Renew - Mobile Navbar background color

[john_AZ]

I have customized my navbar background using Customizer -> Renew -> Navbar Background.

Everything looks good on the desktop sizes, but on the tablet and phone sizes, where the navbar changes to the button menu, the changes are not updated.

https://kristin.johnkent3.com

Where can I make these changes so the navbar is consistent across devices?

[jade]

Hi there,

You have this code added in the Global CSS:

@media (max-width: 979px) {
  .masthead {
    position: relative;
    width: auto;
    background-color: #001937;
  }
}

This sets the solid background color of navigation area as the screen width gets smaller than 979px.

Please try to remove that block of code.

Hope this helps.

[john_AZ]

Great. That worked.

That CSS must have been added when I added the App demo content.

Can I just delete all the code in the Global CSS or does X theme need default code there?

[Alaa]

Hi john_AZ,

The theme doesn’t require any codes to be added in Global CSS section, most probably you added these snippets when you were customizing the theme somehow, I suggest saving these snippets somewhere on your computer as a backup, then try removing them one by one and notice the difference on your page, that’s how you will be able to remember why you added them in first place.

Thanks.

[john_AZ]

Thanks for the info.

I’m sure they were added when I installed the App demo content, as I didn’t touch the Global CSS till now.

Good suggestion about being cautious in deleting them. I’ll comment them out one by one to be sure I don’t break anything.

Thanks for your help.

[basanta]

Hi There,

You are right, some of our expanded demo having custom CSS. If you import that demo content it must be importing the custom CSS too.
Please check carefully and you can delete those.

Thanks