Still learning foundation but I was playing around with the topbar and wanted a dark background with light (white) text. worked great until I shrink the screen size were the navigation drops to a second line( prior to breaking to mobile). The second line has a white background.
full size:
srunk but not to mobile:
as you can see the navigation is no longer showing the text (white on white.
What A’m I missing?
You just need to set the breakpoint to custom and adjust it to break to the mobile menu earlier. Top-bar is not designed to have to line of content and your menu items are simply overflowing the background.
If you really wanted this to happen then it is possible to adjust the height to auto BUT you must limit this by media queries to desktop only. If it is set to auto when the mobile toggle appears then the mobile menu will be permanently open.
Thanks Tav,
The breakpoint was what I was looking for, remember seeing something on it, but unless you set full menu at: to custom - it does not show up.
Indeed, without a custom setting it will use the Foundation default breakpoints. This is a common thing with many of the stacks. If you need to break out of the default sizing, styling or pretty much anything just go for custom and the world is your oyster.
