[Resolved] Sub Menu Items on Mobile

Home Forums Support Sub Menu Items on Mobile

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

    #1151236
    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.

    #1151241
    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)

    #1151243
    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…

    #1151397
    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.

    #1151488
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    Let me know 🙂

    #1151607
    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.

    #1151615
    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!)

    #1151630
    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

    #1151713
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1152236
    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

    #1152471
    Tom
    Lead Developer
    Lead Developer

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

    Thank you very much Tom. That has worked beautifully.

    #1152574
    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!

    #1153134
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.