Center Header Text and Remove Menu?

[thekieran]

Hello,

Is it possible to center the header text and remove the menu? Even though I haven’t set up a menu the menu hamburger shows up on mobile and on my desktop whenever my browser window is narrow.

Thank you!

• This topic was modified 7 years, 3 months ago by thekieran.

Topic

[Jason Bobich]

Hi,

I’m sure you can accomplish what you’re looking to do with some basic CSS customization. Can I please see a link to your site, so I can see exactly the way it’s currently setup?

[thekieran]

Hi Justin,

Apologies for not including that earlier. My temporary site is currently hosted here:

http://www.jojoproductions.com/kt/test/

Thank you!

[Jason Bobich]

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme‘s style.css or in the “Custom CSS” option on your theme options page.

I guess centering the logo can be a little tricky, if you’re unsure how about CSS positioning and the transform property. There are several ways to do it, but this is one way.

.site-header.full-width > .wrap .header-logo {
	text-align: center;
}
@media (min-width: 992px) { /* Only desktop viewport */
	.site-header.full-width > .wrap .header-logo {
		left: 50%;
		-ms-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}
}
.tb-sticky-menu .header-logo {
	float: none;
	text-align: center;
}

And just force the menu toggle button to not show by hiding it.

.denali-mobile-menu-trigger {
	display: none;
}

• This reply was modified 7 years, 3 months ago by Jason Bobich. Reason: Added missing period (.) at start of code block

[thekieran]

I appreciate the help Jason! I was out of town and just got back to my computer. I used the code you provided and I was able to hide the menu button just fine.

My header centers now, but only when I have a wider browser. If I shrink the browser width on my desktop the header justifies to the left. It is left justified on mobile as well. Any ideas?

[Jason Bobich]

In the code block above, there should be a period . the very start of it. I’ve fixed it above.

.site-header.full-width > .wrap .header-logo {

[thekieran]

That did the trick! Thank you for your help Jason.

[Author]

Replies