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

Home Forums Support Mobile Menu – Sub Menu Line Heights and Arrows

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1395338
    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.

    #1395439
    David
    Staff
    Customer Support

    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;
    }
    #1395723
    Michael

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

    #1395908
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.