[Resolved] Help with GP Mega Menu Columns

[Catherine]

Hello,

I have successfully created a simple mega menu on the client site I’m working on using the steps and CSS listed here. However, although I would like it to display in the default 4 columns, the fourth column is appearing below the first three. I will attach screenshots in the private info field to show how the menu is structured vs. how it is appearing. Is this a break point issue, or is there something I should be doing differently? Also, would I customize the background colour of the sub menu via the sitewide GP Colors settings, or via custom CSS?

Please note that when you view the menu structure / appearance in the attached screenshots I have only applied the mega menu functionality to the first menu section (wanted to resolve this before moving on to the other sections).

Thank you in advance for your help!

[David]

Hi there,

can you share a link to your site and i can provide some CSS to make those changes/fixes.

[Catherine]

Thanks so much for your quick reply, David. I’m working on a localhost at the moment so unfortunately can’t provide a direct link. I can wait and return to this thread once the site is live in a week or so if that works better?

If it helps at all re: necessary CSS, I used the Dev site from the Site Library as my starting point for this site build.

I’d also love to be able to have a thin grey line separating the columns in the simple mega menu, if that’s possible. 🙂 I did see that changing the background color of the mega menu is possible through the sitewide colors settings, so please disregard that part of my initial question.

Thanks so much.

[David]

Lets see what we can do ‘blind’ to fix the 4 columns.
In the Mega Menu CSS change:

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

to:

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

We need to update the mega menu docs to deal with GP 3.0 that now uses flexbox … ill get on to that.

And for the border you can try this CSS:

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

The only pain here is if the Menus are different heights the borders will also be different.
May have to leave that bit until the site is viewable to correct.

[Catherine]

That CSS fix worked PERFECTLY! Thank you so much. Let’s just forget the dividing lines for now as those were definitely a wishlist item rather than an essential.

One final question: Is there a simple way to mimic the bold mega menu column headers in the mobile version of the menu?

Thanks again.

[David]

Try adding this CSS:

@media (min-width: 769px) {
    nav .main-nav .mega-menu > ul > li > a {
        font-weight: bold;
    }
}

[Catherine]

That didn’t seem to change anything, unfortunately. To confirm: I added that as an entirely separate CSS snippet in the Additional CSS section (wanted to mention that in case I was supposed to update the mega menu CSS).

[David]

How odd 🙂

Try:

#site-navigation .main-nav .mega-menu > ul > li > a {
    font-weight: bold !important;
}

If that still doesn’t work – try pasting it at the very top of the Additional CSS code

[Catherine]

It still doesn’t seem to work. I do have other CSS menu styling in there for main nav buttons. Not sure if that would cause a conflict? I can’t remember where exactly that code is from but the comment is “media query for nav buttons” and I obtained it from GP support or a site from the site library (can’t remember which, sorry!).

Thanks again for all your help.

[David]

I updated the CSS here:
https://generatepress.com/forums/topic/help-with-gp-mega-menu-columns/#post-1605159

Try that

[Catherine]

Thanks, David. I tried using the updated code and it still didn’t change anything, unfortunately. The column headers are only bold in the desktop version of the menu but on mobile nothing is bold.

[David]

Might be worth waiting until you can move the site to a live state where we can see it – then we can see whats going on

[Catherine]

Sounds good, David. Thanks for all your help today.

[David]

You’re welcome

[Catherine]

Hello again!

The site I was referring to is now live (on a temporary URL). I’ll share a link in the private info box below. If you have a moment to please take a look at the mobile version of the mega menu and share any suggestions for dividing things up with some formatting on mobile that would be a huge help. Ideally I would like to have the mega menu column headers bolded or delineated somehow on mobile so that it’s easier for people to move through the navigation (since it’s so large!).

Thank you in advance.

[Author]

Posts