Nav toggle breakpoint options

I’ve just about got it where I want it but am stuck on the nav toggle. On the full screen breakpoint I have a horizontal menu and logo fade in and the font is black. On the other breakpoints I want a hamburger toggle with a sidebar menu. When I do this I can’t see the menu list in the sidebar because the font is black and the sidebar background is black. I’ve tried finding a way to only change the font color for the sidebar menu and/or the sidebar background but couldn’t, so I duplicated the Bloc housing the nav container and turned off visibility for the full screen nav components and changed the font color to white. And in the original Bloc housing the other nav container I’ve turned off visibility for all the nav components for the other breakpoints. In short I now have two nav blocs one with full screen visible and one without and different font colors.

It works ok but for the non -full screen breakpoints (ie the breakpoints with the hamburger toggle) the menu is visible on the left side of the page in white on page load and when the hamburger is not activated and when I click the hamburger the left-sided menu disappears and the sidebar menu appears on the right with the menu in white (the way I want it to).

How do I get rid of the menu on the left on page load for the non-full screen breakpoints?

Cheers,

1 Like