[Support request] slide menu vs mega menu

[fredyms]

Hello, I read about a known problem with the mega menu and the sliding menu in the mobile version.

I need to know if there are any solutions to solve this problem.

I tried mega-menu CSS, as you suggest, but it didn’t work.

[Leo]

Hi there,

Sorry what’s the problem?

The site you link isn’t working.

Let me know 🙂

[fredyms]

The problem is that the slide menu does not work in the mobile version when you use a mega-menu plugin.

please try this link, the web is up and running. http://leontolstoi.covicanarias.es/

[Leo]

Hmm you’d have to ask Mega Menu plugin author how to turn off their feature for mobile so that GP’s option will show up again.

[fredyms]

I’ve read that you’re going to include mega menu in the theme, you know if it’ll be soon.

I also saw the mega-menu CSS solution in the forum, but it didn’t work properly.

Any suggestion, thanks.

[Tom]

We likely won’t add it to the theme itself, but you can find the latest working CSS here: https://docs.generatepress.com/article/building-simple-mega-menu/

[fredyms]

I have retry this workaround and finally got it to work well.
The only problem I notice is the position of the menu in the mobile version, it appears under the logo.

There is some way to place it to the left of logo.

[fredyms]

I have set the menu but when scrolling down, the mega-menu does not work very well covers the entire screen.

you can check it by scrolling down and pressing the “leon tolstoi” menu.

[Tom]

Try using your navigation as the header: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

[fredyms]

Hi, thank you.

you can take a look, I’ve made the suggested changes and it doesn’t look bad.
But showing the mega-menu covers the entire screen when scrolling down.
I have also had to raise the height of the menu items a lot in order to be able to see the logo at a correct size.

please check out the web.

[Tom]

The mega menu will go as wide as the inner navigation container will allow it.

That’s why it wasn’t full width when the menu was floating to the right, as the menu was only as well as the items within it.

You could try reducing the width with this:

nav .main-nav .mega-menu > ul {
    max-width: 80%;
    right: 0;
    left: auto;
}

[fredyms]

Hi,
I have applied your suggestions and it seems that the problem is solved.

There are a couple of details that I want to tell you about, it is the sliding menu in the desktop version the secondary navigation the colors of the menu looks like selected, I don’t know how to change it,
and on the other hand the RSS icons in the drop-down menu are displayed vertically instead of in a row.

Thank you in advance for your help.

[Tom]

Usually your logo would be much smaller, but you could try this CSS:

.main-navigation .main-nav ul li a {
    line-height: 60px;
    margin-top: 25px;
}

[fredyms]

Hello. Hi,

You can see the result of the changes made, there are a couple of details I don’t like.
In the mobile version the header is not centered and the menu is very low, please help me correct this.

Thank you in advance for your help.

Mobile view

[Leo]

Have you tried the mobile header feature? https://docs.generatepress.com/article/mobile-header/

Or that’s not what you wanted?

[Author]

Posts