[Resolved] Help with GP Mega Menu Columns

[Ying]

Hi Catherine,

You could use this CSS to make the main mega menu bold on mobile:

@media (max-width: 768px) {
    .slideout-navigation.main-navigation .main-nav ul li.mega-menu > a {
        font-weight: bold;
     }
}

Let me know 🙂

[Catherine]

Thank you, Ying. I tried that CSS and it did not bold the column headers, unfortunately. It actually wiped out most of the mobile menu styling (background colours, down arrows) instead.

[Ying]

Well the CSS doesn’t have the function to remove background colors or do any thing else other than bold the link text.

I don’t see the code being add, here’s a demonstration by adding the CSS, isn’t this what you want or did I misunderstand your request? Let me know 🙂

https://www.screencast.com/t/u1i7eey4

[Catherine]

Hi Ying,

Thanks so much. I tried it again and it worked well, but it’s actually the second-tier headers that I would like to bold if possible (the ones that are the column headers in the mega menu, not the ones that are the top-level items in the main navigation). Is there a slightly adjusted snippet of code that would achieve this?

Thanks again for your help!

[Elvin]

Hi,

Have you sorted this out already? The child menu headers seems to have font-weight: bold; already.

Here’s what I see on my end: https://share.getcloudapp.com/DOuozPGz

Let us know.

[Catherine]

Hi Elvin,

I’m hoping to bold the column headers (not the primary navigation items) on the mobile version of the menu.

Thank you!

[Ying]

Hi Catherine,

I still don’t understand what you mean by the column headers, could you give me an example of the one you are talking about? Thanks!

[Catherine]

Hi Ying,

The desktop version of the site has the mega menu that drops down from the primary navigation. In the desktop mega menu drop down, there are four columns of links and each column has a bolded header. I would like to mimic this on the mobile menu if possible, to make the column headers (“Using the Library,” “Collection Services,” etc. – NOT the primary navigation headers or the links that appear under each of the four columns in each mega menu section) bold to make navigating through the mobile menu easier.

Thank you!

[Ying]

I got it 🙂
Here’s the CSS:

.main-navigation.slideout-navigation .inside-navigation .main-nav .mega-menu>ul>li>a {
    font-weight: bold;
}

Let me know 🙂

[Catherine]

It worked perfectly! Thank you so much, Ying. 🙂

[Ying]

You are welcome 🙂

[Author]

Posts