Site logo

Archived topic

How to change Sticky Navigation Menu text colour

5 replies · Started by Jonny on June 30, 2018

Viewing posts 1–6 of 6

Hi there,

How can I change the text colour of my sticky navigation text (but not the main navigation text - I want this to stay as it is)?

Cheers,

Hi there,

Try this CSS:

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

Thank you!

This works. However I now realise that I want the text of my sticky logo (for a page that is active / you’re on) to be different from the other menu text (this code you provided above).

Is this possible?

And a second question. How can I change the size of my nav logo on mobile view?

Thank you so much!

Not sure what you mean by text of your sticky logo? Do you mean the current menu text?

If so try adding this CSS as well:

.main-navigation..navigation-stick .main-nav ul li[class*="current-menu-"] > a {
    color: #000;
}

You can actually find all the menu CSS here:
https://docs.generatepress.com/article/changing-navigation-colors/
Just replace .main-navigation with .main-navigation..navigation-stick

The logo height is currently set by this CSS you've added:

.main-navigation .navigation-logo img {
    height: 90px;
}

Remove that then you can use the menu item height to change it with mobile toggle on:
https://docs.generatepress.com/article/menu-item-height-width/

Sorry - that's exactly what I meant - thank you!! Really really helpful!

That documentation is great too thanks. If I wanted to make those CSS changes to only the mobile version of the main navigation and sticky navigation - how would I do this?

For example, on the mobile menu, I want to change the background navigation color to #FCDF14 (but keep the main navigation on the desktop / table view transparent)

Thank you so much for your help.

Cheers,

This archived topic is closed to new replies.