-
On the site I just posted about (elements in secondary nav) I can’t target either primary or secondary nav menu items. Creds are in private area.
Since I wasn’t having luck placing the button elements where I wanted them, I was going to use css to style menu items into buttons.
I’ve targeted the menu items using their ID, with their classes and target selectors. Nothing works. I would assume it’s my lack of expertise with targeting selectors except that a forum message said the ID is supposed to work. So I’m missing something else.
Here’s my latest simple CSS trying to at least target menu items:
/* TARGET MENU ITEMS TO FORMAT AS BUTTONS – NOT WORKING */
/* Primary Menu TREE REMOVAL */
#menu-item-1977 {
color: #FF0000 !important;
}/* Secondary Menu GET A QUOTE */
#menu-item-2056 {
border: 1px solid #000000 !important;
color: red !important;
} -
Hi there,
Can you try this first?
https://docs.generatepress.com/article/adding-buttons-navigation/Please ensure all caching plugins are cleared after the implementation and disable them if you need further help.
Thanks!
-
Yes, I started with that page. I first disabled the cache, and have now deactivated the plugin. This site isn’t in CloudFlare, so there’s no cache involved.
I’ve looked over targets using the Inspector, and I think the code from your example should work. I also targeted both links with their ID per another support post.
I am doubtless missing something simple that I will never forget again after you’ve told me.
Below is the CSS in my Customizer:
/* TARGET MENU ITEMS TO FORMAT AS BUTTONS – NOT WORKING */
/* Primary Menu TREE REMOVAL */
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
color: #ff0000;
line-height: 35px; /*this number will likely need to be adjusted*/
}
}/* Secondary Menu GET A QUOTE */
@media (min-width:769px) {
.secondary-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
color: #ff0000;
line-height: 35px; /*this number will likely need to be adjusted*/
}
} -
You are missing a closing bracket
}in the code above which stops the CSS below the error from executing:
https://www.screencast.com/t/Y7qWuTPvQ0 -
Aarrgh. Thank you very much.
-
No problem 🙂
- You must be logged in to reply to this topic.