Icon Stack - navbar background color in mobile

Since the Icon stack does not have direct options for header/footer/navbar background color, I customized in Global CSS with:

.x-navbar {
background-color: #000000;
}
.x-colophon.top, x.colophon.bottom {
background-color: #000000;
}

Problem is, that customization does not seem to be applying on screens 480px or smaller. On that screen size, the navbar and footer return to white, washing out my logo and footer content.

I’ve tried various CSS fixes offered in similar threads with no luck so far. Code issue? Stack issue?

Thank you for your help!

Hi there,

You seem to have added those CSS code inside the @media (min-width: 680px) media query block that is why it goes back to the default background color for screen widths less than 680px.

Please check your CSS code and make sure you have properly close the media query block that other codes that are not part of it should be out of its block.

Hope this helps.

Bless you, Jade! That was driving me nuts.

No worries.

Feel free to ask us again.

Thanks.

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