[Terry]

I would like to rearrange the layout of the header on my website, breasartinpublicplaces.com. I want the title to be centered and at the top of the header with a larger font size and upper and lower case letters. I’d also like to have the tagline centered and below the title. Then, I’d like to have the page titles centered beneath the title and tagline. So it would look like this (except everything would be centered):

Brea’s Art in Public Places
Brea, California

Home Gallery Listed by Artist Listed by Location Map About Us

The header area would need to be taller than it currently is, so I would need the CSS to do that. Lastly, there’s a white strip on each page below the bottom of my header image. I’d like that to be the same color as the background color.

If you could teach me how to make all of these changes it would be most appreciated.

[Sakin]

@mauryeel: For header arrangement, you can add the following css in “Appearance => Customize => Additional CSS”

.site-branding { width: 100%; text-align: center; }
.site-branding .header-site-details { display: inline-block; padding: 0; }
#site-navigation { clear: both; float: none; margin: 0; text-align: center; }
#site-navigation ul li { float: none; display: inline-block; }

About the white background below your header image. That is there from “Featured Content”. I see that, you have activated featured content and use “page featured content”, but you haven’t selected any page to be displayed. So, if you don’t want featured content then just go to “Appearance => Customize => Featured Content” and in “Enable Featured Content on” select “Disabled”. Then the white background will go from there.

[Terry]

Thanks so much for the information you’ve provided me, Sakin. The white strip is gone and progress has been made on the header. There are two issues still to be resolved, however.

First, the header appears to be centered only on the left-hand side of the header, but not throughout its entire width. I seem to recall from a few weeks ago that when I took out the search box that the header was in two pieces that were equal in width. Is there a CSS that will eliminate that second section?

Second, I was hoping to be able to modify the title and tagline by increasing the size of the fonts and seeing the title displayed as “Brea’s Art in Public Places” as opposed to “BREA’S ART IN PUBLIC PLACES”.

[Sakin]

@mauryeel: Replace the previous css with the following. Make sure, you copy all 4 lines of CSS:

.site-branding { width: 100%; text-align: center; }
.site-branding .header-site-details { float: none; padding: 0; }
#site-navigation { clear: both; float: none; margin: 0; text-align: center; }
#site-navigation ul li { float: none; display: inline-block; }

Then for the title, remove the all caps, you can add the following css:
.site-branding .site-title { text-transform: none; }

Finally for the font size changes, I am not going to change that for mobile. So, you can change the font size in the following css as per your need and add it in “Appearance => Customize => Additional CSS”

@media screen and (min-width: 990px) {
    .site-branding .site-title { font-size: 28px; }
    .site-branding .site-description { font-size: 14px; }
}

[Terry]

It worked perfectly, Sakin. I just can’t tell you how happy I am to have this issue resolved! Thank you very, very much. You can mark this transaction resolved.

Respectfully,

Terry

[Sakin]

@mauryeel: Thanks for your appreciation and if possible would you please submit your review at https://wordpress.org/support/theme/fabulous-fluid/reviews/?filter=5
Thanks 🙂

[Author]

Posts