- This topic has 5 replies, 2 voices, and was last updated 6 years, 4 months ago by Leo.
-
AuthorPosts
-
December 7, 2017 at 11:02 am #444162Susanne
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!
December 7, 2017 at 11:47 am #444213LeoStaffCustomer SupportHi there,
This article should be helpful: https://docs.generatepress.com/article/adding-buttons-navigation/
December 7, 2017 at 3:38 pm #444391SusanneYes, 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.
December 7, 2017 at 5:29 pm #444451LeoStaffCustomer SupportYou added custom class
nav-button-background
but you are targeting.nav-button
in your CSS.December 8, 2017 at 7:16 am #444813SusanneHi 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.
December 8, 2017 at 9:05 am #444930LeoStaffCustomer SupportI still only see one class,
nav-button-background
, added to the menu item custom class: http://www.screencast.com/t/olnSdFdB7You 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. -
AuthorPosts
- You must be logged in to reply to this topic.