Menu items missing in mobile

Design help General
1

Hi there,

Menu items when viewing in mobile are missing. It seems to be the left navigation items that are visible on Desktop (Portfolio and Services). Any ideas how to fix? Share link included.

Thank you.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2
  1. Select “Navigation Right” in hierarchy
  2. Select the “Tablet” breakpoint
  3. Set “Width” 50%
  4. Set “Max H” 50px
  5. Position “absolute”
  6. Select position “right” (6th option from left)
  7. Select position top “100%”

fix 1.PNG
fix 1.PNG2290Ă—1916 440 KB

For some reason this fix messes up the Hamburger menu icon color when the menu is open. To fix this.

  1. Select the icon in the hierarchy
  2. Give it a class name - I used “iconclass”
  3. Select the “Hover” state
  4. Under typography select color “black”

fix 2
fix 22284Ă—1828 445 KB

Final result

fix 3.PNG
fix 3.PNG1286Ă—871 92.3 KB

3

@britishchap thank you, that helped a lot. Is there a way to align the menu on mobile? All the menu items are there now, however, they seem to be overlapping.

Here is the new link with your update.

https://preview.webflow.com/preview/delany-and-co-51a11fb3c30e4ade7cd881b45?utm_medium=preview_link&utm_source=designer&utm_content=delany-and-co-51a11fb3c30e4ade7cd881b45&preview=40d56aa42749d5be682a8b5c24bcb446&mode=preview

4

I was able to do it by tweaking the a few settings. I don’t have exact steps however hopefully this will help.

Go to mobile breakpoint
Set Navigation Container Full to 100VW
Set Navigation Left to 50VW
Set Navigation Right to 50VW - change padding from 56px to 10px
Set all Navigation Link2 to 50VW

give an extra class to the two links under navigation right
set float to right

There may be some tweaking around but this should hopefully point you in the right direction.

Final result.

Capture
Capture781Ă—872 57.6 KB

5

@britishchap thanks for taking the time to document it all out.

1 Like