[Resolved] Mobile Menu – Sub Menu Line Heights and Arrows

[Michael]

Hi all,

Since the latest update my mobile menu line heights increased by a large amount on their own. I didn’t change the code, and previously they were fine. So I adjusted the code to this:

.slideout-navigation .main-nav ul ul li a, .slideout-navigation .menu-item-has-children ul .dropdown-menu-toggle {
		/*border: 1px solid #ff0000;*/
		font-size: 25px;
		/*line-height: 37px;*/
		line-height: 10px;
		margin-top: 0;
		padding-top: 0;
		padding-bottom: 0;
		text-transform: uppercase;	
	}

The initial value was 37px and it displayed the same line height as the root menu items. But now I’ve had to drop it to 10px which seems like it’s not the right thing to do as 27px is a big difference, even though it has resulted in a more sensible menu height. Is there a better way for me to adjust these more accurately so all menu items display the same heights? And also, the arrows seem to be fairly random in their positioning now – is there a way I can centre them in the line?

https://www.dropbox.com/s/1o1o82zfz46cg35/screenshot.jpg?dl=0

Thank you for your help.

All the best,

Michael.

[David]

Hi there,

remove the margin-top: 0; property in your CSS. And then add this CSS to move just the toggle:

.slideout-navigation .menu-item-has-children ul .dropdown-menu-toggle {
    margin-top: -10px;
}

[Michael]

Thanks a lot for your help David – that works awesomely.

[David]

Glad to hear that.

[Author]

Posts