[Resolved] Secondary navigation element button styling

[Carsten]

Hi there, how do I style the buttons background color in my Secondary navigation element, without using the general selectors influencing all other buttons.

button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited, a.wp-block-button__link:not(.has-background)

I could style each button by id, but there must be an easier way?

Which classes can I use for my Secondary navigation element buttons alone?

[Leo]

Hi there,

Where can I see the secondary navigation with the buttons in your site?

[Carsten]

I added my site url, the secondary navigation should be visible on all pages

[Tom]

Hi there,

This should help:

.sub-navigation a.button, .sub-navigation a.button:visited {
    ...
}

.sub-navigation a.button:hover {
    ...
}

[Carsten]

Thanks very much

[Carsten]

Resolved

[Tom]

You’re welcome 🙂

[Carsten]

Hi there, you helped me out with my secondary navigation styling, but how do I add the styling for the active button?
I have tried to add .sub-navigation a.button:active { color: red; } but this is not working?

Thanks!

[Leo]

What’s the password to your site so we can see the issue?

[Carsten]

I removed the password so you can login as

user: generatepress
pass: SgNH*5oqdPrs69vdeF!2tsXh

The .sub-navigation a.button:active { color: red; } is not added, as I was testing it out:

[Leo]

Sorry where can I see this navigation you are referring to?

I only see the menu toggle and slideout navigation on the home page.

Let me know 🙂

[Carsten]

The secondary navigation is only visible for logged in users, which was why, I sent you login credentials.

Thanks

[Leo]

Ok I’m logged in but still don’t see a second navigation.
https://www.screencast.com/t/9TFMXS8Es

What am I missing?

[Carsten]

Did you try to navigate away from that page? 😉

[Leo]

I did not as you mentioned that is should be visible in All pages in this reply 😉
https://generatepress.com/forums/topic/secondary-navigation-element-button-styling/#post-1256663

How is that navigation created? It’s missing the current-menu-item class so we cannot target it.

[Author]

Posts