Help fixing mobile menu to show properly

Design help Layout & Design
1

Hi - I need help finalizing my top navigation menu. Here are the 2 issues:

  1. Tablet view - shows all 4 menu items BUT they are not aligned. I can’t get it to align.
  2. Mobile views - is not showing the full menu because the first and last links (which are regular links not dropdown menus) have Display set to be Hidden. I’ve tried to un-hide by changing the Display setting but it threw off the main menu for desktop.

I would appreciate any help on this.

Here is my site Read-Only: Webflow - High Beam

2

Hey Rayna @rwelch,

Set display: block to the classes Nav Link Dropddown and Navbar Functions Link inside your Nav Menu symbol.

Do the same as mentioned above at the desired breakpoint. Changing the display setting at a smaller breakpoint should not affect anything on the Desktop breakpoint.

Let me know if this helps.

3

Hi Julian @choreus, thank you so much for your help. Everything is showing now, however, the menus at the smaller breakpoints are not aligned. How can I get all 4 menu items to align?

Thanks!

1 Like
4

If you want to align everything to the left, do the following:

  1. Go to the Tablet breakpoint
  2. Select the second Navbar Functions Link (Why Us) → no active Current tag
  3. Select text-align: left; inside the Typography tab. This has to be blue in order to be active.

This should align everything on all smaller breakpoints.

Let me know if this does it for you.

1 Like
5

That worked! Thank you so much!