[Resolved] Header/Navigation Width and Font

[John]

Hey all. I was wondering if anyone knew some CSS to adjust the main header and navigation bars size. Despite my logo being relatively small, the header on the top of my page still takes up more space than I want it to. I’d like it to be thinner.

Also, I have some custom CSS to make the header transparent in some pages, which works great. But I’d also like the option to change the font color of the navigation on some pages. One of them would require a white font for example. Is that possible?

Thanks!

Edit: Found the answer to the first one. I’m an idiot.

[Leo]

Hi John,

OPTION 1:
Find the page ID (can do using Chrome inspector), then add page specific CSS like this:

.page-id-XXXX .main-navigation .main-nav ul li a {
    color: #ffffff;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

OPTION 2 (maybe easier):
Install Simple CSS: https://wordpress.org/plugins/simple-css/
It has a metabox at the bottom for each page/post (Dashboard > Pages) where you can add your CSS for that page.
Then you can add this code:

.main-navigation .main-nav ul li a {
    color: #ffffff;
}

Let me know.

[John]

Perfect. Works great. Thanks Leo!

[Leo]

Happy to help 🙂

[Author]

Posts