[Support request] Hook after dropdown items

[Kees]

Hi,

We have a mega menu with the generatepress way. but we need to hook something after the dropdown items. Is there a way to fix it? I have a link in the private information to give you an idea.

Please let me know.

Regards,
Niek

[David]

Hi there,

is that just another link?
If so an easy solution maybe to add another Menu item to the mega menu, and give it a custom CSS Class eg. bottom-menu-item> We could then use some CSS to position and style it like that.

If that works for you, add the link, and share me a link to where i can see it and i will work on the CSS.

[Kees]

see link in private

[David]

Try this CSS:

@media(min-width: 1024px) {
    .main-navigation ul ul li.bottom-menu-item {
        position: absolute;
        inset: auto 0 0;
        background-color: #ccc;
        border-radius: 0 0 8px 8px;
    }
}

then you need to edit the mega menu CSS ie this, add increase the bottom padding:

header nav .main-nav .mega-menu > ul {
    position: absolute;
    width: 100%;
    left: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 30px 30px 60px; /* this changes from 30px */
    border-radius: 8px;
    top: 115px;
    box-shadow: 0px 24px 32px rgba(5, 20, 57, 0.1);
}

And your border CSS becomes changes from:

nav .main-nav .mega-menu > ul > li:not(:last-of-type) {
    border-right: 1px solid #D3D3D3;
}

to:

nav .main-nav .mega-menu>ul>li:nth-child(-n+3) {
     border-right: 1px solid #D3D3D3;
}

[Kees]

thanks that worked

[David]

Glad to hear that!

[Author]

Posts