[FrocreateParticipant]

Hey all, your KB instructions on setting up the megamenu were very helpful – thanks!

I’d like to take things a little further and add some basic styling to the megamenu:

• Make column headings a different color/font and remove link (i.e. Maintenance, Service, etc under Plumbing)

• Extend right border in middle column all the way to the bottom so all borders are the same height

• Is it possible to add a fourth column with no links and include an image instead?

Thanks!

[FrocreateParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey there,

Please add the code below in your Appearance > Customize > Custom > CSS.

.desktop .x-nav .x-megamenu>.sub-menu>li>a {
    font-family: sans-serif;
    color: red !important;
    cursor: default;
}

.desktop .x-nav .x-megamenu.col-3>.sub-menu>li {
    width: 33.3333%;
    min-height: 230px;
}

And, the code below in your Appearance > Customize > Custom > Javascript

jQuery('.desktop .x-nav .x-megamenu>.sub-menu>li>a').click(function() { return false; });

Regarding the image, yes. Simply insert image tag in the Navigation Label instead of text (see attachment)

Hope that helps. 🙂

[Author]

Posts