[Support request] Strange behavior last column mega menu

[Gerrald]

Hi there,

I’ m getting more and more menu items so I decided to make a mega menu. I followed this tutorial https://docs.generatepress.com/article/building-simple-mega-menu/ and it worked quite good.

However, I’m seeing strange behavior on the last column. I’m using four columns and have about 6-7 sub categories. But the last category sticks under the last column in the top row.

My site is on a development domain, I’ve got multiple site on Generatepress and on 2 of them I’m testing the mega menu and issue appears on both sites.

Hope you can help!

[David]

Hi there,

the mega menu relies on floats so if the sub menus are not all similar length then this can happen. So lets try flex-box, find the following two parts of the mega menu CSS and add the additional properties below the comments here:

nav .main-nav .mega-menu > ul {
    position: absolute;
    width: 100%;
    left: 0 !important;
    /* Add following properties */
    display: flex;
    flex-wrap: wrap;
}

nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
    width: 33.3333%;
    /* Add following properties */
    margin-bottom: 1em;
}

[Gerrald]

Hi,

Thanks for the fast response!

I added the CSS, but it doesn’t fix the issue yet.

On ‘Klusaccessoires’ there seems to be more space between the first row of items and the second row, but the first two items on the second row seem to lower too.

On ‘Klusgereedschap’ the CSS seems to have no impact at all..

[Tom]

It looks like you’re missing display: flex; above the flex-wrap property you added.

[Gerrald]

That was not very smart.. It worked, many thanks for the help!

I’ve got another question, about the styling of the menu:

Each ‘block’ in the menu has a head item, for example “Boormachine”. I want to style that head item when someone hovers over the head item (the hover state). I have no idea how to do that because the head item has no class. (see link)

How can I style that item?
Related tot his question, when I click on a subitem (Boorhamer, for example) and hover over the head item, the color changes. But it only works for that block.. How is this possible and how can I set this for the whole menu?

[Leo]

You can give the head item a class then target your CSS that way:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Similar example here:
https://docs.generatepress.com/article/adding-buttons-navigation/

Not sure if I understand the second question, can you explain a bit more?

Let me know 🙂

[Gerrald]

About the second question, I try to explain it with an example.

Under the menu item ‘Klusaccessoires’ there are several sub-headings:
‘Meten & analyseren’, ‘Hulpmiddelen’, ‘PBM’, ‘Werkplaats’, ‘Vermaak’ and ‘Elektrisch’.

Currenty, there is no effect when you hover those items. However, if an menu-item below those mentioned above is activated (for example ‘Leidingzoeker’), then there is a hover effect. How is this possible? And is it possible to activate the hover effect also when a sub-menuitem isn’t activated?

—

I added the CSS class ‘nav-top’ under ‘Klusgereedschap’ to the items ‘Zaagmachine’ and ‘Boormachine’.

Then I added this CSS:

.nav-top a {
			color:red!important;
}

.nav-top a:hover {
				background-color:black !important;
}

The effect applies on the whole block with menu items, not only the top one. Do you know how to style only the upper one?

[Tom]

Hi there,

Not sure I fully understand. Do you want the headings to go green when their sub-items are hovered?

Let me know 🙂

[Gerrald]

Hi,

I just want a way to style the headings. I don’t exactly know the colors yet, but I can’t find a way to style only the headings.
Now when one of the sub-items is active, there is a hover effect and when no sub-items are active there is no effect.

Hope you understand my question now!

[Tom]

Try this:

.mega-menu > ul > li.menu-item-has-children > a {
    color: red !important;
}

[Gerrald]

Yes, that works the way I wanted it, many thanks!!

For now I’ve got one last question: How can I turn off the effect on the current menu-item in the footer links?

On this site: http://gerralddokter.nl/devkf/koffiemachine/ I’ve got two menu’s in the footer. Seems like the id’s are id=”menu-footer-aankoopgidsen” and id=”menu-footer-blogs”. Or is the styling possible to display no effects on current menu item in the whole footer?

Hope you can help me again!

[David]

Hi there,

you have this CSS:

li.current-page-ancestor >a, .current-menu-item {
    background: #666666;
    box-shadow: #222 3px -2px 1px 1px;
}

Is this still required?

[Gerrald]

Hi there,

Didn’t notice the CSS, removed it and looks fine now, thanks!

Do you guys have experience with Thrive Architect in addition to Generatepress?

I’ve made a post grid with Thrive Architect on this page:
http://gerralddokter.nl/devkf/homepage-nick/

and I tried to change the excerpt-length under customizer –> layout –> blog with the ‘Excerpt word count’, but the excerpt in the Thrive post grid doesn’t change. How can I do this?

Thanks already!

[Leo]

That means Thrive isn’t using WordPress’ default the_excerpt() function.

You will need to check with their support for that 🙂

[Author]

Posts