Archived topic
Button hover on Primary Navigation not the same as other.
5 replies · Started by Gabriel on April 25, 2020
Hello,
First of all I want to say Congrats on the amazing theme. Everything I have read about it has been correct and when comparing it to other themes I have, it is blazing fast :)
Now to my issue, I installed the Aspire theme and slowly I've been learning and modifying the theme, and recently I added a button to the primary navigation which I was successful at, but, the hover is not working as I thought it would. I would like the hover to work exactly as the button in the middle on the main page. The css provided from https://docs.generatepress.com/article/adding-buttons-navigation/ was added in the Additional CSS Tab.
Moreover, when looking at the website on mobile it does not show it as a button. Would this be the normal behavior?
Thank you.
Hi there,
You'd need to add CSS for hover:
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
color: #000000;
line-height: 35px; /*this number will likely need to be adjusted*/
}
.main-navigation .main-nav ul li.nav-button a:hover {
background-color: #000000;
}
}As for mobile, do you want to show the button beside the logo?
It doesn't look like you'd have enough room as it's quite a long button.
Thank you for the reply Leo,
It did work correctly, but it only applied to the button that comes up as you scroll up. The one that is steady when you go all the way to the top is still hovering all white for some reason. Can you check if you are getting the same results from your side?
For the mobile version, I thought I was going to see a button inside the menu burger. However if this is not possible, I can live without it. :)
Thank you again!
Gabriel
Hi there,
add this extra CSS rule:
.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li:hover > a {
background-color: #1e72bd !important;
}Awesome, fixed!
Glad to hear that
