Awesome mobile menu mystery problem - preview and live don't match up


I’ve made my website and the navbar has 2 div’s with buttons, so I can separate them to the left and right. When going to mobile menu, only one of the divs became properly formatted. I managed to take the other div and thought that I formatted it neatly underneath. By stretching all formats, it stays in position. HOWEVER! When I live test it, there is a big GAP. I can’t figure out how to properly attach the second div under the first one. Any ideas?

Live website:
What it looks like on mobile:

Here is my site Read-Only:

Hi! Any feedback here?

Been very tricky, that’s why it took me a while to find a proper solution, sorry.

The gap probably results from using absolute positioning on the nav menu. This trick works for desktop, but the 312px on top are just too much for mobile, pushing the second div down too much.

Here is what I tried for tablet:

  • I’ve created another div to wrap the two “Nav Menu” divs inside of that one.
  • Position that div absolute:top and size it 100vw while setting layout to block
  • change first navbar div to position:relative and width 100vw
  • change second navbar to position:relative (it had width 100vw already)

Works fine for tablet. Mobile still needs tweaking though.

  • remove the high px marging and padding of div block 6 entirely


Please let me know if it worked for you as well.