[Resolved] Button hover on Primary Navigation not the same as other.

Home Forums Support Button hover on Primary Navigation not the same as other.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1255338
    Gabriel

    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.

    #1255593
    Leo
    Staff
    Customer Support

    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.

    #1256757
    Gabriel

    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

    #1257754
    David
    Staff
    Customer Support

    Hi there,

    add this extra CSS rule:

    .header-wrap #site-navigation:not(.toggled) .main-nav > ul > li:hover > a {
        background-color: #1e72bd !important;
    }
    #1258792
    Gabriel

    Awesome, fixed!

    #1259141
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.