Center Logo in Header in Evolv Theme

Hi Tim-

Thanks for reaching out, I know how it feels when the design requirements get changed!

In your case, I’d highly recommend checking out our latest-and-greatest theme, the Crio WordPress theme for business. The reason I recommend it so highly is that most of the issues you’ve needed help with are easy settings in Crio.

I took the liberty of setting up a demo site for you in your Cloud WordPress using Crio, with a basic guess at how you’re trying to set up your header now.

In the Evolv theme that you’re using now, it would take some custom PHP coding to center the logo in the header, but with Crio it’s a breeze. Take a look and see if Crio will work for you, and if you’d rather stick with Evolv let us know and we can help you out further with the custom PHP to center the logo in that theme.

Hi Tim-

The customizations for each theme are stored separately, so you won’t lose anything if you need to switch back.

That being said, I definitely recommend taking regular backups as you work so you can revert back easily just in case.

Hi Tim!

Rebuilding the site in Crio will be the best way to future-proof your website build and make updating it in the future much easier, but if you want to stick with Evolv then we can try to provide some custom code to help you make the required adjustments.

The first step to aligning those header items as needed is to update the Bootstrap column classes assigned to the elements containing the logo and the menu to each span the entire width of your header and stack on top of each other. The following jQuery code should get those column classes adjusted properly:


jQuery('.site-header .header-6 .header-6, .site-header .header-7 .header-7').removeClass('col-md-6').addClass('col-md-12');


The next thing is to remove the custom float that is currently assigned to the col-md-12 class from the new column areas. This CSS will help with that:


.header-6.col-md-12,
.header-7.col-md-12 {
float: none;
}


After that is taken care of you can center the logo with this:


.site-branding {
text-align: center;
}


The last step to creating your design is left the menu items in the site navigation. The important part in this code is that we only want to change the menu item alignments for screen sizes where the entire menu is expanded, in this case Tablet and Desktop displays. The following code uses a media query that only triggers on those screen widths and will alter the display of the Mobile view.


@media only screen and (min-width: 768px) {
#site-navigation {
width: 100%;
display: flex;
justify-content: flex-start;
}
}


Hopefully that code helps you get the design you are looking for and please let us know if there is anything else that we can do to help!

Hi Tim-

In Evolv, you can use the “above header” menu position to add a call-to-action at the top-right with the CSS rules that Joseph provided above.

You can even change a menu item into a button by adding a custom class to the menu item, button button-primary:

If you need it to be on the left-hand side, you’ll want to add a little more Custom CSS:

.header-5 .header-5 {
	z-index: 10;
}
#secondary-menu {
	float: left;
	margin-bottom: -74px;
}

Joseph added these to your site already so that we could make sure it was working correctly. You can find it in your menu titled “Call to Action” so that you can add the correct link.

Hi Tim-

That’s awesome to hear! Let us know if you have any more questions, we’re happy to help.