CODEWITHSUNDEEP
mobilenavigationzurb-foundationbreakpoints
oibanuelos
oibanuelos

Reputation: 11

zurb foundation top navigation bar change breakpoint

I would like to make the top nav bar in a foundation page collapse into the menu form earlier than it does by default because in lower res desktop screens it semi collapses and is neither in mobile view or full desktop view. I tried modifying the following line:

    @media only screen and (min-width: 40.063em) {  <---This is the line I changed
      .top-bar {
        background: #333333;
        *zoom: 1;
        overflow: visible; }
   -----many more lines-------------------------

It sort of worked, as the bar collapsed earlier in the re-sizing but the menu stopped working. Any ideas as to how I can accomplish this? Any help will be greatly appreciated, thank you. (I'm using foundation 5 by the way)

Upvotes: 1

Views: 1619

Answers (1)

oxocode
oxocode

Reputation: 31

I know this is an old question but if you haven't found the answer yet, or for anyone else who may be viewing this...

It looks like you were off to a good start.

Around line 1662

@media only screen and (min-width: 9999px) {
  .top-bar {
    background: #333333;
    *zoom: 1;
    overflow: visible; }

But you actually need to make changes in 2 additional locations.

Around line 3714:

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:9999px)/";
  width: 9999px; }

Around line 1436:

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:9999px)/";
  width: 9999px; }

Full answer is here: Changing Topbar breakpoint using css?

Hope this helps!

Upvotes: 3

Related Questions