Archived topic
Call to Action in Main Menu
9 replies · Started by Paul on November 5, 2018
Hi Generate Press Community,
Could anyone help with the CSS to actually put button looking tabs in the main menu? If you look at my site, http://www.sandandsteelfitness.com, I was able to do it using the topbar widget, but I am not sure how to do it using the menu.
I did try invoking the same button class "button" that I use on my buttons (in the menu class field of the menu designer), but it looks terrible.
I'd like to make it look more like HotJar's menu. https://www.hotjar.com/
Hi there,
this article may be of help:
https://docs.generatepress.com/article/adding-buttons-navigation/
I looked at that post, but it also created very odd looking buttons. I don't think that css code was intended for my menu settings.
Using the instructions in the article, but using this CSS should give you a similar style to that of hotjar.
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #FD385B;
border: 0 none;
color: #fff;
border-radius: 18px;
line-height: 36px; /*this number will likely need to be adjusted*/
margin-top: 12px;
}
.main-navigation .main-nav ul li.nav-button:hover a {
background-color: #DA2E4C;
}
}I would need to see the code in place to help tweak it.
David,
That actually looks pretty for a first shot!
https://sandandsteel.staging.wpengine.com/
Some small touchups are needed like you said.
OK, so i made an adjustment to the code above.
To cover: Your nav is 60px high, so i set the the button to 36px. This is 24px short of the navigation height. Split this in half: 12px and added it as top margin.
https://sandandsteel.staging.wpengine.com/
You are amazing! Thank you.
Awesome. Glad to be of help :)
Here's what the final product looks like: http://www.sandandsteelfitness.com/
Pretty impressive.
I noticed that it doesn't good on mobile (I'm sure that's why used the media display restriction.)
Looking great.
Yes the media query limits it to just the desktop navigation. Buttons inside the mobile nav are do-able but would require some extra CSS to make them look good. Let me know.
