Mobile Menu Styling

Hi Xtemos,

I wonder if you could help me or point me in removing the lines between the dropdown of the mobile menu? (Highlighted in the image)

Thank you

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .site-mobile-menu li.menu-item-has-children>a {
    border-bottom: 1px solid rgba(129,129,129,.2)!important;
	  border-top: 1px solid rgba(129,129,129,.2)!important;
}
body .site-mobile-menu li a {
	  border-bottom: 1px solid transparent;
}

Best Regards

Hi Elise,

Thank you for the code. I was looking to keep the lines for the main elements in the menu (In green) but remove the lines for the sub parts (in orange) and blue. Then the blue area once opened for the text to slightly indent in.

Thank you for your help

Attachments:

You must be logged in to view attached files.

Hello,

Please replace the code with this one:

body .site-mobile-menu .sub-menu li a {
	  border-bottom: 1px solid transparent;
	border-right:1px solid transparent;
}
body .icon-sub-menu {
    border-left: 1px solid transparent;
}

Best Regards

Hi Elise, Worked perfectly, although I was wondering where I’ve highlighted in blue is it possible for the text to move over? Just like they do in categories in the sidebar.

Attachments:

You must be logged in to view attached files.

Hello,

Add this line into the code for body .site-mobile-menu .sub-menu li a

padding-left:40px;

Best Regards

Hi Elise,

Worked perfectly, but I was also looking for the next sub menu to indent also. I’ve highlighted in the blue and the other image of the categories sidebar how I was thinking. Thank you for your help so far, very much appreciated.

Attachments:

You must be logged in to view attached files.

Hello,

Please provide your site URL so that I could give the custom CSS.

Best Regards

Thank you Elise, Added below.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .site-mobile-menu .sub-sub-menu li a {
    padding-left: 60px!important;
}

Best Regards

Thank you for your help works perfectly.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts