Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 6, 2019 at 12:43 am #1050438
    webWahine

    Hello

    I’m doing some last tweaks to the mobile styling and have 2 items that are eluding me:

    1) I want the size of the logo on mobile to be larger, eg, 300px width/height auto (it’s an svg) – I’ve tried a bunch of code but I think I’m overlooking something, or maybe have something overriding what I have. I have some code for (max-width: 989px) and (min-width: 768px) and it appears to be 300px wide there, but below 768 it get really small.

    2) The sub menu items on mobile have too much vertical space below each item; I want to fix that, too. Again, I have tried a bunch of code but it’s not taking effect. It looks like a bottom margin of about 20px, or perhaps a line height from somewhere else for each sub menu item.

    Thank you in advance :)

    January 6, 2019 at 4:13 am #1050477
    Mike

    Hey webWahine,
    For the logo on mobile, the max-height was set to 80px, since you can’t set max-height to auto, try 134px or what you choose:

    @media only screen and (max-width: 767px) {
.responsive .logo img {
    max-height: 134px !important; 
}
}

    For the menu, try this css:

    #av-burger-menu-ul ul.sub-menu li {
padding: 0px !important;
margin: 0px !important;
}

    Best regards,
    Mike

    January 6, 2019 at 11:08 pm #1050661
    webWahine

    Thank you! Both worked beautifully. And to help others, since I set the open menu li to be aligned top, I did a small adjustment to the first item, ie, my home item –

    	 /* tweak the vertical position of the menu when open */
 
	 #av-burger-menu-ul {
		 vertical-align: top; /* originally middle */
		 background: black !important; /* just to see what elemnt is targetted */
	 }	 
	 
	 /* tweaks the vertical position of the open menu items under the burger x - home is menu item 23 */
	 
	 .menu-item-23 {
		 margin-top: 150px !important;	 	
	 }
	 
 	/* or leave vertical-align as the default middle and use this */
	
 	.av-burger-overlay-inner {
 		/* top: -140px !important; */
 	}
    January 7, 2019 at 12:15 am #1050687
    Mike

    Hi,
    Thanks for sharing your solution, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

    January 7, 2019 at 2:11 am #1050705
    webWahine

    Yes, please – sorry, I should have mentioned that. Thanks again! :)

    January 7, 2019 at 2:34 am #1050711
    Mike

    Hi,
    We will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Mobile – sub menu items vertical padding and logo size is too small’ is closed to new replies.