Navigation Hoover (width)

Home Forums Support Navigation Hoover (width)

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #136331
    Monique Montes

    Hi,

    How can I make the width of my navigation hoover smaller so that when you hoover over, there isn’t a lot of extra space above and below the navigation links?
    I would like to keep the navigation centered next to the image how it is currently.

    Thank you

    my site is moniquemontes.com

    #136333
    bdbrown

    Hi Monique. This css should reduce the spacing between the main and sub-menus, and reduce the width of the sub-menu list:

    .main-navigation ul ul {
        top: 40px;
        width: 150px;
    }
    

    Adding CSS: https://generatepress.com/knowledgebase/adding-css/

    #136360
    Monique Montes

    hmm sorry maybe I should have said the “height” of my navigation links smaller
    I put in the custom css code but that didn’t seem to work. When you hoover over each link, the hoover color still shows excessively above and below each link.

    #136389
    bdbrown

    Check Customizer > Element Spacing > Primary Menu Items > Height; set that to 50. Then add this css:

    .main-navigation {
        padding-top: 30px;
    }
    
    #136413
    Tom
    Lead Developer
    Lead Developer

    The above will do it 🙂

    Then, if you need to move the navigation down to center it within the header area, add this CSS:

    .main-navigation {
           margin-top: 20px;
    }

    Adjust the px as needed.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.