[Support request] Submenu Issue on Mobile

Home Forums Support [Support request] Submenu Issue on Mobile

Home Forums Support Submenu Issue on Mobile

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #876598
    David

    Hi Tom and team,

    I really wish I could figure this out on my own – goodness knows I’ve tried!

    You helped me in the past on a menu for mobile viewing. I now have sub categories on my menu that show up fine on desktop but do not on mobile. I’m sure it’s a simple fix, or some particular CSS somewhere causing the issue.

    Hopefully you can help. Thanks so much! πŸ™‚

    **I have added the link

    #876603
    David
    Staff
    Customer Support

    Hi there,

    it looks like you have created a separate Menu for the Slideout Navigation.
    Check in Appearance Menus for the one you have assigned to Slideout. You will now need to add the sub categories to that menu as well. Let me know.

    #876624
    David

    Hi David,

    There actually is no menu under “slideout navigation” selected when I go to appearance>menus. I created the pages_menu I think in the past but never used it. It just shows “home, blog, about” … not sure why I created it to be honest. But even if I set one of those menus as slideout navigation, all the styling goes out the window.

    Confusing. I added one of those menus temporarily to show you. You’ll see it shows up, big txt at the top and the other menus are still below it.

    #876630
    David
    Staff
    Customer Support

    Aah the menu was added to Customizer > Widgets > Slideout Navigation.

    #876676
    David

    Oh I see that too now. Any reason why that wouldn’t show the subcategories on the menu?

    #876759
    David
    Staff
    Customer Support

    It doesn’t use the navigation styling so the drop down elements aren’t displayed.
    You would need to assign a Menu to the Slide Out. We could then help with some CSS to style it similarly to what you have.

    #876863
    David

    Hi David,

    Sounds good. I made a staging site for the page so I don’t tinker with the main site. I have updated the URL for you. The password to see it is “Apple11”. I also took out the widgets and made a new menu which I added as Slide_Navigation. Would love the help to style it similarly to what I had.

    Thanks so much for being willing to help out. πŸ™‚

    David

    #876917
    David

    Mostly I’d like to know how to add back the search bar (at the top), how to resize the subcategory font and the “Pages” and “Categories” separator I had before (the widget let me do that)

    #876926
    David
    Staff
    Customer Support

    So need to do some extras here.

    First add the Search Widget into the Sticky Navigation.
    Then for you menu Page and Category separators can you add them as additional menu items. Can you give each of them a class of: menu-separator – just give them a URL of #

    You can add classes to menu items in Appearance > Menus –> Screen Options ( top right hand corner ) and Check CSS classes. Then that field becomes available when editing the menu item.

    We’ll use that class to hide them on the desktop and to style them in the Slideout.

    #876942
    David

    Ok I’m going to do that now. How do I add the Search widget to the sticky navigation? I added it to the menu widget (which places it at the bottom). Is that incorrect?

    #876947
    David
    Staff
    Customer Support

    Thats correct – you can add this CSS to move the Search at the top:

    #generate-slideout-menu .inside-navigation {
        display: flex;
        flex-direction: column-reverse;
    }
    #877081
    David

    Alright, it’s looking better. I got the placeholders added. I’m stuck on how to center them though (instead of left align) and how to change the font sizes (for the placeholders, categories and sub categories).

    And is there anyway to change the padding on the menu items?

    Thank you again for all your help!

    #877213
    David
    Staff
    Customer Support

    Looks like you got a lot of changes made.

    So targeting amy menu item in the slideout for styling like so:

    #generate-slideout-menu .slideout-menu li a {
        padding-left: 20px; 
    }

    To specifically target the menu separator:

    #generate-slideout-menu .slideout-menu li.menu-separator a {
        text-align: center;
    }
    #877272
    David

    Hi David,

    That allowed me to get it looking really great. Just a couple of things.. when I tried to apply the padding to “li a”, it only applies to the submenu items, not the main ones. I left it applied with 1px so you can see it under “wellness”.

    And is there anyway to use text-transform to make the the top items in the menu (the pages) uppercase and the bottom menu items (the categories) capitalized? I can apply the transform to all menu items but I can’t seem to do what I’ve described above.

    I think that’s it so far! πŸ™‚

    #877289
    David
    Staff
    Customer Support

    What are you trying to do with the padding? Is it to align the menu items horizontally or increase there height?

    You could create two new classes and assign them to your menu items eg.

    menu-capital

    #generate-slideout-menu .slideout-menu li.menu-capital a {
        text-transform: capitalize !important;
    }

    menu-upper

    #generate-slideout-menu .slideout-menu li.menu-upper a {
        text-transform: capitalize !important;
    }

    This would mean assigning them to each menu item, so may be easier to just edit the menu items.

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.