Mobile Menu Not Expanding

Hi there,

you have this CSS in the Customizer > Additional CSS:

nav .main-nav .mega-menu > ul > li > a {
    display: none;
}

This is hiding the sub menu items.

Hey David,

Thanks for your help and identifying this. Is there anyway I could "hide" those one both mobile, tablet, and desktop and still have them expandable on mobile?

Is there anyway I could “hide” those one both mobile, tablet, and desktop and still have them expandable on mobile?

Not sure if I understand this statement here.

Can you explain a bit more?

You can wrap your CSS using media query so they only apply to specific screen widths:
https://docs.generatepress.com/article/responsive-display/

Hey Leo, basically I have created a mega menu with 5 columns and in order for each column to display as a column on desktop they each need to have a parent which are labeled as the "Column #" and is what I am hiding on desktop because I don't want column headers. I am looking for a way for these to still expand on mobile but not display "Column 1" as it does now.

Let me know if you'd like access to check it out in the backend

I think the best solution here would be to use the off canvas panel for mobile only:
https://docs.generatepress.com/article/off-canvas-panel-overview/

So you can create a new menu and use it for the mobile view only:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location

Our site is using a similar idea.

How do you set the off canvas panel for mobile only?

While hiding the desktop nav on mobile?

In the Customizer > Layout > Off Canvas you can set the panel to Mobile only:

https://docs.generatepress.com/article/off-canvas-panel-overview/

Then you will need to create a separate Menu for mobile and set its location to Off Canvas.