White space in spill-over multi-line menus

In Foundation, I’m using Top Bar with RW Menu. The site has a black background. At narrow window widths like on mobile devices, the menu spills over to a second line, and all space not occupied by a menu item has a white background. I’ve tried everything I can think of, and @joeworkman said “Top Bar Swatch” but I’m not clear on what he means & I haven’t heard back from him on it, so thought I’d post here and see if there are thoughts on other ways of going about it.

Everything on my page is in a Container, so I tried giving the container a black background, but that doesn’t solve the problem.

Found a hack that’s probably not ideal, but it turns out that what I was calling a “white background” is actually the Component Color light grey. Changing that solves the problem, but likely breaks something else.

I’m on my iPad, but there’s a swatch for styling the topbar. I think that’s what you need to look at.

Thanks, Doug! And there’s a light grey in the Top Bar Styles swatch, but when I changed it to black, it had no effect.

Do you have a URL to a test page?

With F6 there are so many options with styling it would be easier if you could share a URL and screenshots of the settings and swatches.

I do, Doug… here’s the site: https://dev.originalgreen.org

Here’s the current Site Styles. Changing Component Colors > light grey to black solved the problem, but I wonder what else it might break as I get further into building the site?

I’ve changed the top bar color from light grey to black here, but that seems to have no effect, which I don’t understand.

I’m on my iPad so I can’t tell what you have done (no developers tools), but it looks okay.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.