[Sarah]

Hello,
I have a logo and a right sidebar in my header. I would like the entire header to be smaller. Is there a way I can reduce the amount of space between the three widgets in my sidebar?
Also, I would like to center the logo and add text to the left of it. Is there a way to do this?
Thank you.
http://threeriversrowing.org/wordpress/

[Sakin]

@Sarah: For widget spacing you can add the following CSS in “Appearance => Theme Options => Custom CSS” box.

#header-right .widget_text { margin-bottom: 15px; }
#header-right .widget_text p { margin-bottom: 0; }

You cannot make it logo center with logo and right sidebar. It will need details customization and I think you should hire customizer.

About the logo what you can do it. You can just add the Text from “Site Title” and “Tagline” from “Settings => General” and then go to “Appearance => Theme Options => Header Options”. Check “Move Site Title and Description” and add the following CSS in “Appearance => Theme Options => Custom CSS” box.

#hgroup.with-logo { float: left; }
#site-logo { clear: none; float: left; }

[Sarah]

Thanks, Sakin.

Your answer to my first question worked well.

Can you help me reduce the white space at the top of my header?

The answer to my second question just put a line of text at the top above my logo, which is not what I am looking for.

Is there a way to add text in the middle of the header, between my logo and the sidebar?

Thank you.

[Sakin]

@Sarah: That is why I gave you the css and the instruction. You need to follow both as this is bit complex. If you have difficulty adding it then use hire customizer.

[Sarah]

I tried that code and instructions twice but, it puts the text at the top of the header above the logo.

[Sakin]

@Sarah: So, you want in this order right
1. Logo
2. Site Title and Description
3. Header Right Sidebar

1. For that go to “Appearance => Header”, there you have to check in “Show header text with your image” and then you can add site title and tagline text from “Settings => General”
2. Then add the following CSS in “Appearance => Theme Options => Custom CSS” box.

@media screen and (min-width: 961px) {	
#hgroup.with-logo {
    clear: none;
    float: left;
    max-width: 50%;
}
}

[Author]

Posts