[Resolved] Mega Menu style child items

[Kim]

Hi,

I’ve added the simple mega menu from the Generatepress documentation and tried to customize the Child Items with a custom class to make them look more like a headline (uppercase and bigger font-size). When I add the custom class to the child item in the menu, it also styles the grandchild items. Can you help me with what I am doing wrong?

Many thanks!
Maike

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Kim]

Hi Leo, unfortunately it’s on a local installation at the moment.

BR Maike

[David]

Hi there,

can you share the CSS you’re using to style the child items?

[Kim]

Hi, I’ve tried to style the single item like this

.menu-item-334 a {font-size: 18px !important;}

for instance. But this also changes the style of the grandchild items in the column.

[Leo]

This should style only the first level submenu:

.main-navigation .main-nav ul > ul > li > a {
    font-size: 18px;
}

[Kim]

Hi Leo, this doesn’t work neither 🙁

[Leo]

Any chance you can set up a staging site so we can see it?

It’s really tough to provide help like this.

[Kim]

I do understand. I will get back to this once the site is live.

[Leo]

Sounds good 🙂

[Kim]

Hi, I got it going to work with this code:

nav .main-nav .mega-menu > ul > li > a {
	font-size:18px;
}

Many thanks!

[Leo]

No problem 🙂

[Author]

Posts