Navigation Hoover (width)

[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

[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/

[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.

[bdbrown]

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

.main-navigation {
    padding-top: 30px;
}

[Tom]

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.

[Author]

Posts