CODEWITHSUNDEEP
zurb-foundation
Ted
Ted

Reputation: 7251

Zurb Foundation 4: remove top-bar fixed/sticky when in mobile?

What would be the best way to keep the "fixed" and/or "sticky" functionality on Zurb Foundation 4's top-bar in desktop views, but remove for mobile views? Having a fixed top bar is great to have on larger devices, but wastes valuable screen real estate on mobile devices.

I'm actually surprised that it doesn't do this by default (or at least have an option to disable on mobile devices).

My quick solution is as follows:

$(function() {
    if (Modernizr.mq('only screen and (min-width: 768px)')) {
        $('#header').addClass('fixed');
    }
});

There's a probably a more elegant solution though (and one that takes care of screen resizing etc.).

EDIT: re-read my question after and realize it was very unclear. Have updated.

Upvotes: 1

Views: 3041

Answers (3)

Bernardao
Bernardao

Reputation: 500

Maybe my answer is too obvious, but have you tried on the media query for the mobile devices?

.top-bar {
    display: none;
}

Upvotes: 0

túú
túú

Reputation: 13

I'm not sure if it is more elegant but I think I would use .hide-for-small .show-for-small as appears in some elements on the foundation templates, I know that it implies repetition, but hey, it's maybe an opportunity for a more mobile friendly layout for the top-bar. Hope it helps.

Upvotes: 0

jameswilliamiii
jameswilliamiii

Reputation: 878

You could modify the .fixed class like so:

.fixed {
  width: 100%;
  position: relative;
  @media #{$small} {
    position: fixed;
    top: 0;
    left: 0;
  }
}

This will show the navbar as fixed for views larger than mobile, and it should then be free to scroll for mobile.

Upvotes: 1

Related Questions