Wrap primary nav menu so that it takes up two rows


#1

Just started using Jupiter. I’ve searched for help on this topic, but haven’t been able to find it so far. I want to wrap our primary nav menu at the top of the page so that it will wrap down into a second row.

Here is the development server that I’m working on: http://onlinebreathwork.net/

I want it to look like this primary nav does: https://breathworkonline.com/

thank you!


#2

Hello,

Please add this code in Theme Options > Advanced > Custom CSS:

.mk-header-nav-container {
    width: 800px !important;
}
.main-navigation-ul>li.menu-item {
    height: 40px !important;
    line-height: 40px !important;
}

Also increase the header height a bit in Theme Options > Header > Header Height.

Best regards,
Artbees Support.


#3

Thank you… that worked for the primary menu… however, it caused a new issue with the sticky menu… If you scroll down from the top, you’ll see that now the second row on the sticky menu displays an inch further down the page, so that it shows up on top of the background image: http://onlinebreathwork.net/


#4

Hello,

Please also add this code in Theme Options > Advanced > Custom CSS:

body .header-style-1.a-sticky .menu-hover-style-5 .main-navigation-ul > li {
    height: 40px !important;
}

Best regards,
Artbees Support.