Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #110170
    Terry
    Participant

    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.

    #110185
    Sakin
    Keymaster

    @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.

    #110199
    Terry
    Participant

    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”.

    #110227
    Sakin
    Keymaster

    @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; }
    }
    #110229
    Terry
    Participant

    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

    #110230
    Sakin
    Keymaster

    @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 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Changing the Configuration of My Site's Header’ is closed to new replies.