Sub Menu Items on Mobile

[Michael]

Hi all,

I’m having an issue on mobile whereby when I try to scroll down to select the last submenu item in a menu item, the screen flashes and goes back up to the top eg:

I highlight Products, which brings up Bathroom, Decor, Garden, Homeware and Kitchenware sub menus. However Homeware is off the screen, so when I scroll down to select I am unable to do so because of the flash and reposition mentioned above. I don’t know how to capture it to show you what I mean I’m afraid.

The test site is: https://reclaimdesign-383226.easywp.com/

Thank you for your help!

[Michael]

I’m tinkering around with the off canvas panel which is helping a lot, but there are some grey lines under sub menus that I’m not sure how to remove via the customizer (or which element to target in css). Here’s a screenshot to show the lines I’m talking about:

https://www.dropbox.com/s/zjnzrv7ow4exr0j/Screenshot_20200201-161211_Firefox.jpg?dl=0

And what is the Desktop Toggle Label? I couldn’t find anything in the documentation on it.

[Michael]

Is there a way I can set the capitalization of the text for the mobile menu separately to the main menu system?

I’d like to capitalize the mobile menu items, and have had to change all the page titles to be capitalized to achieve that but then this displays the page title as capitalized in browser tabs (and I guess therefore search results, which I’d rather not do)

[Michael]

The main menu is using list items which I am styling in CSS to text transform to capitalize. I always have difficulty working out CSS elements to target on mobile…

[Michael]

Is there a way to set the width of the on canvas menu? Ideally it would be great to make it wider to accommodate the longer menu titles.

[Tom]

Hi there,

It looks like you got most of this resolved – what’s still outstanding?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michael]

Hi Tom,

I’m having a bit of difficulty with the sub menu height (or line height) – must be padding or margin somewhere but am still trying to track it down. And I haven’t had worked out what is causing the grey border on the bottom line on sub menus either.

[Michael]

The sub menu gaps I’m talking about are highlighted in blue:

https://www.dropbox.com/s/7gc7j0nf8wmgwpt/sub-menu-gaps.jpg?dl=0

And the grey bottom borders:

https://www.dropbox.com/s/zjnzrv7ow4exr0j/Screenshot_20200201-161211_Firefox.jpg?dl=0

(You can’t see them right now though on the site as I have gone ballistic with psychedelic borders so I can try to work out what is doing what!)

[Michael]

I’ve removed the borders on the site. Managed to adjust padding-top/bottom and margin-top/bottom for:

ul .sub-menu .toggled-on {
	 	padding-top: 0;
		padding-bottom: 0;
		margin-top: 0;
		margin-bottom: 0;	
	}

This removed the gaps between the child sub-menu items (eg Products > Bathroom > Bath Caddy & Bath Mat), but not in the parent sub-menu. If you are able to tell me what CSS to target to remove the gaps here that would be fantastic. Basically I’d like to keep each menu item the same height throughout. And I’d also like to indent each sub-menu group by a few pixels to make it more obvious that a sub-menu has been opened.

I also can’t see where the grey border is being set. It looks like it’s on the last list item for each sub-menu, but can’t see this in the CSS.

https://www.dropbox.com/s/jqoc3qdf7t6mfxl/screen.jpg?dl=0

[Tom]

To get rid of that shadow, try this:

.main-navigation ul ul {
    box-shadow: 0 0 0;
}

To indent the sub-menu items, try this:

.slideout-navigation ul ul {
    padding-left: 20px;
    box-sizing: border-box;
}

Let me know if that helps or not 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michael]

Hi Tom, thank you very much for looking into this for me. That definitely helps 🙂 There’s only one thing left now that I cannot adjust which is the line-height (padding or margin I’m not sure which it is) between the first level sub menu items:

https://www.dropbox.com/s/fdggigh39egalzf/menu-spacing.jpg?dl=0

[Tom]

Give this a shot:

.slideout-navigation .main-nav ul ul li a,
.slideout-navigation .menu-item-has-children ul .dropdown-menu-toggle {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 37px;
    margin-top: 0;
}

.slideout-navigation .menu-item-has-children ul .dropdown-menu-toggle {
    padding-top: 0;
    padding-bottom: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michael]

Thank you very much Tom. That has worked beautifully.

[Michael]

You’re much sharper with this coding malarky than I am….. I spend hours trawling through trying to find the right areas to target!

[Tom]

Glad I could help! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts