Menu spacing

janell

I need to decrease the spacing between menu items.  I saw the code you gave to others to do this
#Top_bar .menu-item. menu-item-type-post_type .menu-item-object-page > li > a span:not(.description) { padding: 0 15px !important; }

but it has no effect on my menu even going into negative padding such as -25px. (I am using the Header Builder.) 

http://gator4047.temp.domains/~theatrec   (for old website and I am installing a new theme!)
Thanks,

Janell

Pablo

Hello,

We suggest, not to use the CSS code to decrease the spacing between menu items, it could issue the responsive view of the website.

We provide this code in really problematic situations.

The best way to decrease them, will be by changing the "Grid Width" option to smaller value.

Theme Options > Global > General

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

janell

Hi Pablo,

Thank you for  responding so quickly.  I tried the Grid Width first, and decreasing it put the menu items to 2 lines, what I don't want! So increasing it to 1300 put all the menu items on one line, but that makes the webpage too wide and for smaller screens, it still puts those menu items to 2 lines.  If I can just reduce the space between the menu items, that should fix a big part of the problem. Why doesn't the CSS code work?

Thanks so much for your help.

Cheers,

Janell

Pablo

Every item must have some space between them, reducing it will make the menu looks bugged and misaligned.

Changing it with CSS could make a lot of responsive troubles which we want to avoid, because fixing it require to remove the css or much more css tweaks.

The menu items break to the second line while your grid width is smaller, because it does not have place to fit and it pushing them down, to prevent letters overlap.

What you can do to fix that, is to create the submenu with some menu items inside, or by changing the font size of the menu items in Theme Options > Fonts > Size & Style - there you will find the "main menu" font size.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next