- This topic has 14 replies, 2 voices, and was last updated 2 years, 12 months ago by
Tom.
-
AuthorPosts
-
February 1, 2020 at 5:59 am #1151225
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!
February 1, 2020 at 6:18 am #1151236Michael
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.
February 1, 2020 at 6:41 am #1151241Michael
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)
February 1, 2020 at 6:43 am #1151243Michael
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…
February 1, 2020 at 8:21 am #1151397Michael
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.
February 1, 2020 at 10:13 am #1151488Tom
Lead DeveloperLead DeveloperHi 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-developmentFebruary 1, 2020 at 12:30 pm #1151607Michael
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.
February 1, 2020 at 12:46 pm #1151615Michael
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!)
February 1, 2020 at 1:21 pm #1151630Michael
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.
February 1, 2020 at 4:29 pm #1151713Tom
Lead DeveloperLead DeveloperTo 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-developmentFebruary 2, 2020 at 9:50 am #1152236Michael
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
February 2, 2020 at 7:38 pm #1152471Tom
Lead DeveloperLead DeveloperGive 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-developmentFebruary 3, 2020 at 12:37 am #1152573Michael
Thank you very much Tom. That has worked beautifully.
February 3, 2020 at 12:38 am #1152574Michael
You’re much sharper with this coding malarky than I am….. I spend hours trawling through trying to find the right areas to target!
February 3, 2020 at 8:38 am #1153134Tom
Lead DeveloperLead DeveloperGlad I could help! π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.