I have placed a Nav bar on my page but I seem to lose the first nav button when it switches to a drop down menu for the phone. It works fine in the editor in design mode when I click “Open Menu” I can see all four sections, but if I go to preview mode or visit the published page it disappears again.
Hi there ! You can do the following to make it work:
Select the Nav Menu block from the tree menu
Select the Phone Landscape mode, because the problem starts there since your breakpoint for the mobile menu is from phone landscape mode and lower
Create a new class for the Nav Menu block, in my example, I called it “navmenu block”. Set top margin to 60. This is because you want your menu fixed to top of page, but brand is hiding your first menu item. So by setting top margin to 60px on the “navmenu block” class, this pushes down the menu to just below the brand, when the menu is expanded, thus showing the full menu. After you do that, set your position to “Fixed” and alignment to Top as shown. Save changes, publish and then it looks correct and the desktop styles are unaffected because the css cascades only from phone landscape view on down …
I thought that might be what was happening but I wasn’t sure how to fix it. Your solution worked like a charm. Thanks for the clear step-by-step instructions!
