Docs

[atjonesen]

Hey there,

Got a sort of interesting question regarding how the theme handles menus, particularly the sub-menus on the nav bar. Is there any way to set up a maximum height on the sub-menu and then start displaying additional links added to the sub-menu in two columns?

Thanks in advance!

[Rupok]

Hi there,

If you have that much items for the submenu then you should consider using Megamenus because you might face problem on scrolling.

Thanks!

[atjonesen]

This reply has been marked as private.

[Rupok]

Hi there,

Let’s use three/four columns instead of two and it should be fine as you have lots of items.

Cheers!

[atjonesen]

Hey,

We’re not interested in doing 3/4 columns – the client just wants two columns. Also, that doesn’t address the styling of the megamenu. We need it to match the look of the normal submenus. Please advise.

AT

[Lely]

Hi AT,

By default, Megamenu is a block. Since you just want two columns, it just divide the block into two. Each column is 50% width. Now if you don’t it that wide we can use CSS to set maximum width. Please add this CSS on Appearance > Customize > Custom > Edit Global CSS:

.x-navbar-static-active .desktop .x-nav .x-megamenu>.sub-menu {
    max-width: 500px;
}
.desktop .x-nav .x-megamenu>.sub-menu>li {
   padding: 0;
}
.desktop .x-nav .x-megamenu.col-2>.sub-menu>li:after {
    height: 1px;
    max-width: 96%;
}
.desktop .x-nav .x-megamenu.col-2>.sub-menu>li:nth-child(3n) {
    clear: none;
}

The result is this:http://screencast-o-matic.com/watch/cbebiX6gWb

Hope this helps.

[Author]

Posts