Nav hamburger items are horizontally stacked rather than vertically stacked

[Emilie_Ho]

When I used the dafault element for nav bar, it worked fine for the tablet and mobile form factors at first and the drop down nav menu on mobile would have all the items vertically stacked together like this:

However now my tablet version of the nav bar has all the items horizontally stacked and the mobile version is completed messed up:
Tablet:
Mobile:

This is the design I’m going for:

(Free Design Tool for Websites, Product Design & More | Figma)
How can I stack all the menu items vertically and have the burger page full screen without any scroll??

Appreciate any tips to fix this

---

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

[cyberdave (Dave S.)]

Hi @Emilie_Ho, thanks for the post.

I would suggest to set your button navbar class to display block for the tablet and lower viewport, this will force each link to a new line:

I hope this helps

.cyberdave

[Emilie_Ho]

@cyberdave Thank you so much for the suggestion! It worked perfected for the tablet view. Unfortunately for my mobile view, it’s still acting very strange: the items are not really being formatted like the other form factor and the nav bar is gone as well.

When I click on “open menu” under settings it can’t even display the burger menu unless I go to preview mode. Any idea how I might overcome this?

[cyberdave (Dave S.)]

Hi Emilie,

Thanks for your reply, I took a quick look at the read only link provided (thanks for that, it really helps) and I could see that the navmenu div is set to position fixed with an override on the mobile portrait.

I would remove that position override as it affects to the default dropdown styling.

I hope this helps!

[Emilie_Ho]

@cyberdave It worked You’re a lifesaver! Thank you so much.