I’m working on a new site design using Vantage (free) and one thing is bugging me a bit. My masthead menu spans 2 lines but the amount of padding that is between the lines is not visually pleasing. I tracked down the “margin-top” value to be coming from jquery.theme-main.js (obviously the “min” version) where the code has:
// Aligning menu elements
var mhHeight = $( '.masthead-logo-in-menu' ).height(),
menuItemHeight = $( '.masthead-logo-in-menu .menu > .menu-item' ).outerHeight(),
logoHeight = $( '.masthead-logo-in-menu .logo' ).outerHeight();
if( mhHeight > menuItemHeight ){
$( '.masthead-logo-in-menu .menu > .menu-item' ).css( 'margin-top', ( mhHeight - menuItemHeight ) / 2);
}
if( mhHeight > logoHeight ){
$( '.masthead-logo-in-menu .logo' ).css( 'margin-top', ( mhHeight - logoHeight ) / 2);
}
Here’s what I’m seeing: http://dleigh.odns.fr/wp-content/uploads/toomuchspace2016-10-29_14-44-19.jpg
I’m guessing that if it was one row, it would be the right amount of space and maybe I just need to redo my menu. Since it’s being put in there inline with style=”” tags, is there no way to override it with CSS?
Thanks!
Hi David,
You can change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Please add the following CSS:
.main-navigation .menu .menu-item:nth-child(n+6) { margin-top: 0 !important; }That’ll remove the margin-top applied to every menu-item after the sixth item. I personally would instead recommend adjusting the spacing between the menu items.
.main-navigation ul li a { padding: 20px 35px; }(adjust the second number)
You might also need to install the SiteOrigin CSS Editor.
I ended up using the first one as it still left some margin at the top, and I changed it to n+2 so that if the screen width left less than 6 items at the top, it wouldn’t loose the top margin. The second example squished stuff too much, but it’s probably worth doing more experimenting when I have time. At any rate, thanks for the CSS help!