You have only two header choices:
1. logo (or site title) to the left, menu on the right
2. Logo (or site title) centered with menu below centered.
If you want your logo aligned left while having the menu centered, you will need to create some custom CSS to do that. I recommend a plugin Simple Custom CSS which lets you create a custom stylesheet to override the theme’s. To align your logo left, you would add this to your stylesheet:
.header-image img {
float: left;
}
Also, after trying this just moments ago, I realized the logo is getting oversized, so this will have to be fixed in an update. However, if your logo gets oversized automatically, then make the above like this:
.header-image img {
max-width: 100%;
float: left;
}
I’ve downloaded simple custom css. I want the logo to the left. I want the primary navigation under the logo and centered, as you would a standard website. so it would look something like:
[__Logo______________________]
[_______navigation menu_______]
[_________Site Content_________]
The bracket and underlline spacing are supposed to show the edge of the web page, wasn’t sure how to show centering without the underline spacing.. How do i do this? I don’t like it looking how you showed me.
I am assuming you did not find the header layout setting…
Go to Appearance >> Customize >> Site Options
Look for the “Centered Logo and Menu Below” setting and choose that. Click Save & Publish. This will center everything in the header. The custom CSS from my last reply will then float the logo to the left for you.
you mean like this? i’ve done some changes in my header
The two theme header options offer these layouts:
[_Logo____________Navigation Menu_]
or…
[_____________ Logo_______________]
[________Navigation Menu__________]
The custom CSS I posted before will float the logo to the left while your menu is centered from the theme header option “Centered Logo and Menu Below”
ok,i see there are 2 options
Correct…select the second one and then use that custom css to flat the logo to the left as you wanted, and then you should be all set to go.
When I just tried putting that in nothing happened. Did do this wrong:
/* .header-image img {
max-width: 100%;
float: left;
}*/
I also tried the bracket after the semicolon.
.header-image img {
max-width: 100%;
float: left;
}
adding /* and */ around the css code will comment that out, and not work. Just as I have it above.
When I took out /* and */, and pasted what you told me to:
.header-image img {
max-width: 100%;
float: left;
}
The header and the tag line below are both centered, set from the customization menu. Suggestions?
Is it possible to get a link to your site and I will take a look?
Ah…now I know why. I thought you were doing a logo. It’s a bit different for the text title and tagline.
#site-branding.header-centered {
text-align: left;
}
Now…something you need to know…it’s not going to float all the way to the left of your header because that container has a certain width to it that doesn’t go edge to edge; it only goes as far as the width of your page content. If you are wanting your site title to go all the way to the left of the browser window, because then this means a whole different solution is needed, which means creating a child theme.
That is exactly where I wanted it. Thank You for Your Time!
