Header: Logo in the middle

Yea this is actually pretty easy to do with some CSS. Please try the following code and let me know what you think:

@media all and (min-width: 900px) {
	
	.title-container {
		float: none;
		display: block;
		text-align: center;
	}
	.menu-primary-container {
		float: none;
		display: block;
		text-align: center;
		margin-top: 24px;
	}
}

You can copy and paste that code into the Additional CSS section in the Live Customizer (Appearance > Customize), and it will take effect right away.

Hey,

thank you for the help.

In the desktop-version, the logo is now in the middle.

But in the tablet-version it isn’t. :/

Unfortunately I don’t know that much about CSS, maybe you have an idea?

Thanks again, really appreciate that!

And is there a way to show the social media icons in the tablet/mobile-version instead of hiding them in the menu-symbol?

Or in other words: I want the social menü in the desktop-version next to the normal menü and in the version for tablet/mobile should be the menü-icon next to the logo-subtitle. But i have no idea how to do it :/

• This reply was modified 3 years, 9 months ago by fantasyname.

Hey sorry for bothering you again. But can you help me to put the logo in the tablet-version in the middle, too?

I really don’t know how to do this :/

Sorry for the delay.

I’ve updated the code snippet and it’s going to center the logo for all screen sizes including smartphones and tablets. As for moving the social icons, I’m afraid this isn’t possible without a much more complex customization, so they’ll need to stay inside the mobile menu on smaller screens.

Here is the updated code snippet:

.site-header {
	text-align: center;
}
.title-container {
	float: none;
	display: block;
	text-align: center;
	margin: 0 auto 18px;
}
.toggle-navigation {
	float: none;
	margin: 0 auto;
}
.menu-primary-container {
	text-align: left;
}
@media all and (min-width: 900px) {
	
	.menu-primary-container {
		float: none;
		display: block;
		text-align: center;
		margin-top: 24px;
	}
	.menu-primary-items li {
		margin: 0 10px;
	}
}

That is so awesome, thank you very much! This is exactly what i needed.

Have a nice week!

Just one more question: Is it still possible to put the menu icon in the tablet/smartphone-version next to the centered logo/subtitle? In the right corner for example, but the logo/subtitle should be still in the middle.

• This reply was modified 3 years, 9 months ago by fantasyname.
• This reply was modified 3 years, 9 months ago by fantasyname.

Yea that’s doable too.

You can remove the previous code and replace it with the following instead to makes this change:

.site-header {
	text-align: center;
}
.title-container {
	float: none;
	display: inline-block;
	text-align: center;
	margin: 0 auto 18px;
}
.menu-primary-container {
	text-align: left;
}
.toggle-navigation {
	position: absolute;
	right: 0;
}
@media all and (min-width: 900px) {
	
	.menu-primary-container {
		float: none;
		display: block;
		text-align: center;
		margin-top: 24px;
	}
	.menu-primary-items li {
		margin: 0 10px;
	}
}

Hm, thats strange. If i do that, the menu-icon is on the right side at tablet/smartphone. but in the desktop-version the menu isn’t under the logo anymore.

It only works then when I make my desktop-browser display smaller.

Hmm okay please try this modified snippet:

.site-header {
	text-align: center;
}
.title-container {
	float: none;
	display: inline-block;
	text-align: center;
	margin: 0 auto 18px;
}
.menu-primary-container {
	text-align: left;
}
.toggle-navigation {
	position: absolute;
	right: 0;
}
@media all and (min-width: 900px) {
	
	.title-container {
		display: block;
	}
	.menu-primary-container {
		float: none;
		display: block;
		text-align: center;
		margin-top: 24px;
	}
	.menu-primary-items li {
		margin: 0 10px;
	}
}