Mobile Menu Help

Hi -

I’m having three problems with my menu on mobile:

  1. the menu burger drops behind the images despite setting them above via the z-index
  2. the menu isn’t dropping in a straight line
  3. I’d like to change the menu background to white instead of grey

I’m definitely new to Webflow, so any help would be really appreciated!

Kevin


Here is my site Read-Only: https://preview.webflow.com/preview/kevindstevens-com-766562?utm_medium=preview_link&utm_source=dashboard&utm_content=kevindstevens-com-766562&preview=2895d0662a0df4bfe1f23d361969af52&mode=preview

Hi Kevin :smiley:

  1. Give the .Navigation element a relative positioning and the z-index.
  2. Seems very straight to me. Maybe you can add a screen recording?
  3. You’ve set the menu’s background color to #f8f8f8 which is a very bright grey. Change it to white in the same box.
1 Like

This is perfect, almost there. On mobile I’m looking for this menu to be 1x4 instead of 2x2 in layout if that makes sense:

That depends on how much room you have for all the elements. Since you are using Flex for the parent div (.Top Nav Links) you need to adjust it’s children so they have enough room to occupy the 1x4 space.
Changing the wrap property to no-wrap will force all the children to fit into 1 line, but this will break the design if there is not enough room.