Archived topic
How to change nav-button effect - Search template
3 replies · Started by Roberto on November 13, 2022
Hi, using the Search template, I'm trying to change the nav-button effect given to the "contact" page (border: 3px). Here's the homepage: https://staging.giacomodenanni.it
I would like to make it more like the secondary button effect, that I set in Global Styles in Generate Blocks. How can I achive this? What's the specific css class used in that template?
Thank you very much!
Hi Giacomo,
The Button is added as a Menu Item. Thus, it can't be given a Global Style.
To style this menu item, go to Appearance > Menus.
On the top right, click on Screen Settings. Then, enable CSS classes. Example: https://share.getcloudapp.com/bLu5Xvj2
Then, add cu-secondary-button class to the class list of the Contact Menu item. Example: https://share.getcloudapp.com/X6uQgjNR
Lastly, add this in Appearance > Customize > Additional CSS:
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button.cu-secondary-button a:hover {
background-color: var(--accent);
color: var(--base-3);
border-color: var(--accent);
}Thank you so much, it worked perfectly!
You're welcome Giacomo!
