[Support request] Submenu Issue on Mobile

[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

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[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)

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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!

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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! 🙂

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts