Full-Width header, get rid of extra white space

Hi Tim-

Thanks for reaching out, sorry to hear about the frustration designing your header.

The Evolv theme has a “contained” header built-in, but you can make it full width with a little bit of custom code. If you’d like to get full control of your header design without any coding, I recommend checking out our newest theme, the Crio WordPress SuperTheme.

That being said, here’s how you can accomplish your goals without changing themes.

First, make sure to remove the negative horizontal margin on your logo. Navigate to Customize > Site Title & Logo and adjust the Horizontal Margin slider back from -50 to 0.

Then, navigate to Customize > Advanced > Custom JS & CSS. Paste this line into the Custom Theme JS field:

jQuery('#masthead div.container').removeClass('container').addClass('container-fluid');

This will create a full-width header so that your logo and menu are all the way to the left and right.

Then, to get rid of the extra white space, paste then following line:

h3.site-description { display: none; }

Hi Tim, sorry to hear that jQuery code did not adjust your header width as expected!

I jumped into the dashboard for your Cloud WordPress installation and saw that the jQuery code Jesse provided had some comment marks ( // )at the beginning of that line. Those comment marks were telling jQuery to disregard the code in that line and once I removed them your header elements started stretching the full width of your page.

Hopefully things are displaying as expected on your end now and please let us know if there is anything else that we can do to help!

You’re welcome Tim! If you ever have any other questions for us in the future please do not hesitate to ask!