Streaming live at 10am (PST)

Navbar problem, changes in 2 lines

Hallo everybody,
i have a problem with the navbar. i have a logo on the left site in “brand” and in “nav menu” 7 navicons. it looks good until i resize the broweser then i get 2 lines, (the logo goes above the navmenu)and that doesnt look good. how can i resolve this?

2019-04-18%2017_57_17-Untitled

Well the obvious answer is to rethink your nav bar layout with that many nav links. You can try redesigning it and maybe putting your logo above the navigation (which I think can be quite nice), or you can right away use a hamburger type menu and have a more consolidated menu slide out on click or any other way. I guess I would ask, how would you like the nav bar to react considering the amount of nav links you have etc?

thx for the answer.
logo above is not an option, hamburger-type rightaway also.

the reaction should be a transition to hamburger type instead of getting doublespaced.

how and where webflow decides at which point the menu gets to hamburger?

Well you can set another breakpoint using media queries with CSS manually with custom code. For example:

@media only screen and (min-width: 1300px) {
  .nav-menu {
    display: none;
  }
  .hamburger-menu {
    display: flex;
  }
}

This is just an example. So you can measure at how many pixels does the menu start to push against the logo and/or drop down to a new line and write the min-width or max-width breakpoint from there.

Hope this helps!
-Noah

1 Like

okay, thx. that is very helpfull.
now i am able to get the hamburger menu, at 1400px instead of 991px(standard).
the thing is that the design of the “open-menu” is different in this until it reaches the standard.

is there a trick to say that it should get also the design, or do i have to write it also in custom code?

Im not sure I fully understand the problem here… Can you better explain or use visuals like screenshots?

for example:
i have a change in style, and dont really know what that is.
in the hamburger menu the text above has some space and in the normal menu its without the space above.
2019-04-26%2012_56_21-Window 2019-04-26%2012_55_42-Window

Hi @Noah-R,

I have a similar problem to @slay_chan. My nav also ends up on two lines. I’ve been reading the posts and come across to versions of CSS to fix this - option 1 and option 2 (the code you suggested):

Option 1:

<style>
/* menu list desktop - hide on screens less than 1300px width */
@media screen and (max-width: 1300px){
  .w-nav .w-nav-menu {
      display: none;
  }
}

/* hamburger icon - display on screens less than 1300px width */
@media screen and (max-width: 1300px){
  .w-nav .w-nav-button {
      display: block;
  }
}
</style>

Option 2:

<style>
@media only screen and (min-width: 1300px) {
  .nav-menu {
    display: none;
  }
  .hamburger-menu {
    display: flex;
  }
}
</style>

I’ve been inserting my code in the Custom Code section -> Footer Code so it works with the Navbar symbol sitewide.

The issue I have is option 1 code above is almost doing what I want, however it displays a strange version of the navbar - not the one I have defined (medium width - nav menu open screenshot).

I’ve added some screenshots below to show what’s happening at the various breakpoints for each option.

The outcome I’m looking for is at 1300px or less I want to switch to the hamburger menu as shown in screenshots Nav Bar Code 1 - Small Width and Nav Menu Open. The remaining defined breakpoints in the standard navbar element configuration should function as defined (i.e. no additional changes needed). I don’t want any intermediary variations of the navbar (i.e. Nav Bar Code 2 - Medium Width).

Any ideas what CSS I’d need to achieve this?

Screenshots:

Option 2 - Full width (not what I’m looking for as Nav Links are not shown.

Option 1 - Medium width (not what I’m looking for - 2 lines)

Option 1 - Medium width - nav open (not what I’m looking for)

Option 1 - Nav Bar Code 1 - Small Width (what I want to happen at less than 1300px until next breakpoint)

Option 1 - Nav Bar Code 1 - Nav Menu Open (what I want to happen at less than 1300px until next breakpoint)

Ahh ok… so you have to style the mobile menu on the desktop breakpoint. So set the display on the hamburger menu to display: flex and then open it in the element settings and style it the same way you have in the last image and I think that should work. So remember styles cascade downward with breakpoints, not upward. So you’ve probably styled that on the tablet view and not the desktop view. Let me know if that works. Cheers!

-Noah

Hi Noah, apologies for the delayed response. Yes it did work, thank you very much for the advice.