To add a button to your primary navigation in GenerateBlocks, you need to apply a class to the menu item. When editing your menu, if you don’t see the option to give the item a class, click “Screen Options” at the top of your window and check the box for “CSS Classes”.
In the code used below, I used the class nav-cta. You’ll either need to use the same class, or change the code to match the class you use.
@media (min-width: 1140px) {
.main-navigation .main-nav ul li.nav-cta a {
background: black;
color: white;
padding: .3em .7em;
margin-left: 16px;
border-radius: 4px;
}
}It’s important to wrap this code inside of a media query (as is done in the example code above) so the button does not show up in the mobile menu (unless, of course, you want that). You can adjust the media query for the min-width size for your desktop menu.
Hi, I have a question. If I apply a css hover effect to the menu, then the effect will also be reflected on the button in the menu and that may not be desirable. How to prevent an effect from being applied to a button?
Thanks
Hum, I haven’t run into that, so I’d just have to look. Can you write specific hover styles for this button? That should override it because of specificity.