Archived topic

Navigation Hoover (width)

4 replies · Started by Monique Montes on September 12, 2015

Viewing posts 1–5 of 5

September 12, 2015 at 3:23 pm #136331

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

September 12, 2015 at 3:46 pm #136333

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/

September 12, 2015 at 5:32 pm #136360

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.

September 12, 2015 at 8:16 pm #136389

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

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

September 12, 2015 at 11:58 pm #136413

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.

This archived topic is closed to new replies.

Start building better websites today.