[Support request] Custom button class, can't get it to work

[Susanne]

Hi there,

I’ve almost got my site right where I want it, but for the life of me can’t figure out how to isolate the button in my main navigation and change JUST THAT BUTTON to a different color. I want just that “make an appointment button” to be pink instead of grey like all the other buttons on the site (as specified in the buttons section of the customizer).

What’s the CSS I’d need for this? I was able to create a unique class for the background “.nav-button-background” but that affects the whole block on the navigation bar.

TIA!

[Leo]

Hi there,

This article should be helpful: https://docs.generatepress.com/article/adding-buttons-navigation/

[Susanne]

Yes, I am using the class “nav-button-background” to style the hover and rollover of that whole selection on the menu (in the CSS custom class section of that menu item). By enclosing the item’s navigation label with “button id=button” it shows my styled button within that. But when I try to alter that button id with another to style it further without affecting all of the “button” CSS on the entire site, it isn’t working. Can you see my site? You can see what I mean when I say I have a button floating inside a “nav-button-background” styled menu item so it floats within the wide navigation band.

Here’s what I had tried with CSS, but it doesn’t work:

@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #bc3273 ;
color: #ffffff;
}
.nav-button {
width:220px;
}
.nav-button {
padding: 15px;
}
.nav-button {
text-align: center;
}

What am I missing? I even tried “important” but unless I put it in the wrong area, it’s not working.

[Leo]

You added custom class nav-button-background but you are targeting .nav-button in your CSS.

[Susanne]

Hi again Leo,

I added both of them and I am targeting both of them with different styles. I didn’t show the styles for nav-button-background because they are working fine, but the .nav-button ones aren’t, even when I IMPORTANT them.

[Leo]

I still only see one class, nav-button-background, added to the menu item custom class: http://www.screencast.com/t/olnSdFdB7

You shouldn’t need both, just pick one and target that with the CSS.

Also try using this selector:
.main-navigation .main-nav ul li.nav-button instead of just the class.

[Author]

Posts