Reduce space between masthead menu lines

Resolved 2 replies developer theme theme-vantage

9 years ago · Last reply by David Leigh 9 years ago

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!

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

Alex S Staff 9 years, 3 months ago
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.
David Leigh 9 years, 3 months ago
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!

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.