Mega menu help please

Support
#1

Hello!
I’m trying to set up the mega menu on my website. I followed the guide I was shown in a previous question I posted: https://theme.co/apex/forum/t/features-megamenus/99

But I’m not sure how to activate the megamenu like the guide states: “Each megamenu is activated with the implementation of a couple special classes on the top level menu item in your navigation. The base class needed to activate the megamenu is as follows:”

This is what my menu looked like when i tried to do it, but there was no “CSS Classes” section for me to add the “x-megamenu”.

Please help :slight_smile:

#2

Hi Nadia,

On the upper right portion of that page, you can see Screen options. Click it to open the parts whe you need to enable CSS Classes option.

After that, a text field for that will appear.

#3

I figured it out, thanks for your help!

How can I make it so that the columns are not so far apart?

#4

Hi Nadia,

The answer is this classes as discussed on the guide

col-2
col-3
col-4
col-5

You may use col-4 so it will be 4 columns with less spacing to each other.

#5

Ok, but is there a way to configure it so that there’s not so much blank space on the right side. I like the distance between the columns this way, but I don’t want the empty white space.

One last thing. How can I make the titles (circled in red) bigger and bold?

Thanks so much :slight_smile:

#6

Hi Nadia,

We can use custom CSS. Please check the following guide:

You may share the exact URL with the megamenu so we can check too.

#7

Great, thank you!

I’m very new to CSS. Would you be able to help me figure out what it needs to be?
The url is https://crisisequipped.com

Thanks so much :slight_smile:

#8

Hello Nadia,

You only have two columns? Please use col-2 so that there will be less space on the right side. And then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar-static-active .desktop .x-nav .x-megamenu>.sub-menu, 
.x-navbar-fixed-top-active .desktop .x-nav .x-megamenu>.sub-menu {
    max-width: 600px;
}

We would love to know if this has worked for you. Thank you.

#9

Thank youu!! That looks so much better!

Is there a way to move the mega-menu over to the right (see arrow in photo), so that it drops below the text?

Also, for the titles I circled, can the text be changed to Bold and be made larger?

Thanks so much! I appreciate all your help!

#10

Hey Nadia,

Please have the code updated and use this:

.x-navbar-static-active .desktop .x-nav .x-megamenu,
.x-navbar-fixed-top-active .desktop .x-nav .x-megamenu {
    position: relative;
}

.x-navbar-static-active .desktop .x-nav .x-megamenu>.sub-menu, 
.x-navbar-fixed-top-active .desktop .x-nav .x-megamenu>.sub-menu {
    min-width: 600px;
    max-width: 600px;
}

Cheers.

#11

That looks great now! THANK YOU!! :slight_smile: :slight_smile:

What code should I use to change the “Family Plan” and “Disaster Guides” to make them larger and bold?

Thanks for everything!

#12

Hello Nadia,

To change the font size and font weight of the column menu items, please make use of this code:

.desktop .x-nav .x-megamenu>.sub-menu>.menu-item-has-children > a {
    font-size: 24px;
    font-weight: bold;
    color: red !important;
}

I added color so that you can see the changes immediately. Feel free to adjust the values.

#13

I love the way it looks! Thank you so much! Great choice on adding the color red. It looks perfect!

Thank you, thank you!!

#14

You’re most welcome!
We’re glad we were able to help you out.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.