Main Menu Breaks into 2 lines in Evolv

Hello Lee-

Thanks for reaching out! In the Evolv theme that you’re using, the header area widths are hard-coded, but you can fix this with a little bit of custom CSS and JavaScript code. If you’re interested in getting full control over your header styles without using any code, I recommend checking out our newest theme, the Crio WordPress SuperTheme.

First, in order to get your menu to line up vertically with your logo, you’ll need one line of Custom CSS. Navigate to Customize > Advanced > Custom JS & CSS and paste this line into your Custom Theme CSS:

nav#site-navigation { margin-top: 21px; }

21 pixels will match the margin on your logo.

Next, to adjust the widths, you’ll use the Custom Theme JS field to add two lines of JavaScript:

jQuery('div.header-6.col-md-6').removeClass('col-md-6').addClass('col-md-4');
jQuery('div.header-7.col-md-6').removeClass('col-md-6').addClass('col-md-8');