[Resolved] Styling a single menu button

[Dave]

Hello,

I’m attempting to style a single menu button and getting tripped up by the CSS. Would appreciate some help, if possible. Thank you!

I created a new entry in the CSS editor called .menu-bar-site-name and have attached it to the single menu item. My goal is to change it so

1) The background color always matches the menu bar color:
* No hover effect
* No page-specific highlight
* For now, the color is #222222

2) Text styling:
* Bold text
* Color to be #E63950

Thank you!

[Leo]

Hi there,

Can you try using the suggestion here?
https://docs.generatepress.com/article/adding-buttons-navigation/

Let me know if this helps 🙂

[Dave]

Not really, sorry. I’m trying to restyle an existing WordPress menu item in the default nav bar. Within the WordPress menu configuration, I’ve added my name but I’m not sure how to stack the CSS to override the existing settings. I have just this, which has no effect – I need to somehow indicate my CSS overrides your CSS for this one single item. Thanks!

.menu-bar-site-name {
color: #E63950;
}

[Leo]

That’s exactly what the article is for.

Can you apply the method and link me to the page in question?

You can edit the original topic and use the private URL field 🙂

[Dave]

Still a disconnect for me, I feel like I’m missing something in the syntax – how do I specify my custom class while also taking over the other stuff. What am I doing wrong here? Thanks!

.menu-bar-site-name {
.main-navigation .main-nav ul li.nav-button a {
color: #E63950;}
}

[Leo]

No need to write your own CSS .menu-bar-site-name

If you’ve done step #1, then the CSS in step #2 should be all you need.

If not then I’ll need to see your page in question.

[Dave]

OK I see the disconnect now. The nav-button class was embedded in the snippet, so I was able to swap it out like this. Thanks for sticking with me, I’m on the right track. Will pop back in when I get further confused. 😉 Thanks!

.main-navigation .main-nav ul li.menu-bar-site-name a {
color: #E63950;
}

[Leo]

No problem 🙂

[Dave]

Making good progress, thanks for your help. Only open issue is in relation to hover and focus (?) when the the button which points to the homepage is on the home page. I want the background to never change – any tips? Thanks!

[Leo]

Adding selectors for hover and focus should work:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a,
    .main-navigation .main-nav ul li.nav-button a:hover,
    .main-navigation .main-nav ul li.nav-button a:focus {
        background-color: #ffffff;
        border: 2px solid #000000;
        color: #000000;
        line-height: 35px; /*this number will likely need to be adjusted*/
    }
}

[Dave]

Awesome, that did it – thanks!

[Leo]

No problem 🙂

[Author]

Posts