Mega Menu

Hi there,

did you add the classes to the menu items as explained in the docs:

https://docs.generatepress.com/article/building-simple-mega-menu/

I added CSS, but it doens't work as shown on the documentation.

Hi Jusung,

Have you added the classes as instructed here?: https://docs.generatepress.com/article/building-simple-mega-menu/#:~:text=Now%20that%20our%20structure%20is%20built%2C%20open%20the%20main%20parent%20item%2C%20and%20give%20it%20the%20mega%2Dmenu%20class.

Make sure you have the correct structure as instructed in the article as well.

I can't seem to see them.

I just added it to parent. I was giving to child menu.

but it doesn't look right.

I tried to remove the CSS that was added to the menu, but it doesn't look as expected.

I think you're still missing a class. Try adding this class: mega-menu-col-4

If that doesn't work, can you go through the entire article one more time and make sure you didn't miss a step?

It doens't work.

As far as I understand, I only have to add the css to the parent menu.

I first added mega-menu cuz it said showing 4 as a default.

Now, I added
mega-menu mega-menu-col-4
, but it doens't work at all..

You have other code working on your menu. The Mega menu is ideal for menus that aren't customized yet.

For instance, you have this code that's conflicting with the mega menu code:

div#primary-menu ul.sub-menu {
    width: 200px;
    text-align: center;
}

You'll need to remove previous code you have that are causing a conflict.

Yeah I removed it.
I also removed this one.
.main-navigation .main-nav > ul > li {
position: relative;
}

Then the mega menu works.

I don't understand what the "position: relative;" is for.
Is it ok to remove this code?

With that code, does the Mega menu not work?

That code is for the line divider I believe.

I removed “position: relative;” . I am not sure if this would be ok.
When I remove this, the mega menu works.

Also, can I move the mega menu on the right side?

To align it to right.
Change this CSS:

nav .main-nav .mega-menu > ul {
    position: absolute;
    width: 60%;
    left: 0 !important;
    display: flex;
    flex-wrap: wrap;
}

To this:

nav .main-nav .mega-menu > ul{
    position: absolute;
    width: 760px;
    left: unset !important;
    display: flex;
    flex-wrap: wrap;
    right: 0;
}

Yes It works!

but the child item becomes white. I want to make it black when hover color.

Also, I want to increase the text size of grandchild item to 20px;.

Try this CSS:

nav .main-nav .mega-menu>ul>li>a {
    color: #f00 !important;  
}

And for the font size, you can set that in the customizer typography or use this CSS:

.main-navigation .main-nav ul ul li a {
    font-size: 20px !important; 
}

.main-navigation .main-nav ul ul li a {
font-size: 20px !important;
}

for this code, I only wanna change the size of grand child item.
But with this code, it changes child item.

Is there a way to change only grand child item size?
Also, I wanna give left padding to grand child items on mobile device.