Support » Themes and Templates » having trouble centering header

  • Resolved Iono

    (@iono)


    Hi there,

    I’m having problems centering my header image on the retro-fitted theme! (The stylesheet is difficult to understand…)

    ‘#header{overflow:hidden;width:1024px;position:relative;height:360px;padding:20px 0;background:url(/wp-content/uploads/xyz.jpeg)repeat-x 0 0;border-bottom:10px solid #ce3000}#header .wrap{width:980px;margin:0 auto}’

    Could someone explain to me where to insert what in order to center the image? I checked a lot of other posts but couldn’t find something that worked.
    Do I have to change something in header.php?

    Thanks so much 🙂

Viewing 12 replies - 1 through 12 (of 12 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Assign a style to your image, using the width of your image (preferably smaller than its parent element), display it block and centre it with margins.
    E.g

    header img {
     display: block;
     width: 800px;
     margin: 0 auto;
    }

    But are you talking about a background image rather than an actual <img> HTML element?
    If so, try

    #header {
     background: url(/wp-content/uploads/xyz.jpeg) repeat-x center center;
    }

    Thread Starter Iono

    (@iono)

    Andrew, thanks for the answer! I tried to insert display:block like this:

    #header{display:block;width:1024px;position:relative;height:360px;padding:20px 0;background:url(/wp-content/uploads/xyz.jpeg)repeat-x 0 0;border-bottom:10px solid #ce3000}#header .wrap{width:980px;margin:0 auto}

    But it didn’t change. (also tried position:center before) Do you think it’s fot to do with #header.wrap?

    What do you mean by background image? I’m worried about the header on top of the page (like here https://bettercookies.wordpress.com/ (not my blog)).

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    How should that cookie image look when it’s centred?
    WordPress has scaled down the image to a width of 770 pixels, which may be the problem.

    Thread Starter Iono

    (@iono)

    The cookie image is fine, it’s perfectly centered (mine is stuck in the top left corner of the page). It was just an example for what I mean by “header”.
    Mine is still stuck on the top left of my page… 😉

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    But you’re using a background image, whereas the example website is using a HTML element.

    Can you send us a Pastebin.com link of your HTML and CSS code for the problematic web page, or a link to the page?

    Thread Starter Iono

    (@iono)

    Like this? http://pastebin.com/C98uU7yt

    It’s only the CSS code ((where) is there a html code on wordpress?), sorry.
    I hope it’s OK if I don’t send you the link- it’s not a finished page and I don’t want Google to remember all that 😉

    Thanks for helping!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Assuming you’re using Windows, load the webpage, right click on the page and select ‘View source’. The contents of the subsequent pop-up window will hold the page’s HTML.

    Thread Starter Iono

    (@iono)

    Aah cool, thank you! Not using windows though, but found it anyways: http://pastebin.com/tf2J5Cfs

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try adding

    #header {
     margin: 0 auto;
    }

    Thread Starter Iono

    (@iono)

    Oh wow, thank you so much, Andrew! Made my evening!

    Sorry for bothering you, but one more thing: Do you know how I could move the menu *below* the red line so it’s not crashing the header? I saw it on some pages (and as well on screenshots here: https://theme.wordpress.com/themes/retro-fitted/) but don’t see how to change it.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try

    #menu-primary {
     margin-top: 0;
    }

    You had it on -75

    Thread Starter Iono

    (@iono)

    Great, thanks a million! 🙂

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘having trouble centering header’ is closed to new replies.