Center Align Custom CSS Header

  • I am using a custom theme but to get an image to span the whole header I was told to us a custom CSS, I have enter numerous variations and cannot get it to be aligned to cover the whole thing, it always drops down and to the right. My dimensions are correct, but I do not know how to get it to align to cover the entire height and width of the header.

    Any help would be greatly appreciated. Thank you. Below is a link to the orientation of the image

    https://awesomescreenshot.com/0c92sg0hb4

Viewing 12 replies - 16 through 27 (of 27 total)

  • You need to overlay that social block on top of the header image. Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

    Thread Starter oasishomesusa

    (@oasishomesusa)

    It is actually part of the theme itself.

    Firebug is a browser add-on. It is not part of any theme.

    Thread Starter oasishomesusa

    (@oasishomesusa)

    https://www.oasishomesusa.com/

    custom #header {(https://drive.google.com/file/d/0B4Y-ISTaCNe-emROZWItR3VZWW8/edit?usp=sharing) no-repeat;
height: 135px;
width: 450px;

#Header #logo {
    padding:1;
}
}

    IF I change the heading to this you can see the number/social media icons I am talking about. But the alignment is then off, ha.

    Your CSS is broken. It will never work. Try:

    custom #header {
background: url(ttps://drive.google.com/file/d/0B4Y-ISTaCNe-emROZWItR3VZWW8/edit?usp=sharing) no-repeat;
height: 135px;
width: 450px;
}
#Header #logo {
    padding:1px;
}
    Thread Starter oasishomesusa

    (@oasishomesusa)

    Still the same issue of the default icons/contact info being hidden now

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What is “custom”?

    Thread Starter oasishomesusa

    (@oasishomesusa)

    It was the advice given to me, I am not really sure why it is there…I have never head to get this involved. I was always able to use more polished editors so I am out of my depth here.

    Thread Starter oasishomesusa

    (@oasishomesusa)

    Also, it is still not aligned all the way to the left, I am not sure how to fix that issue, I have tried to adjust the dimensions to fix that and it still does not work.

    Thread Starter oasishomesusa

    (@oasishomesusa)

    `#header {
    background: url(ttps://drive.google.com/file/d/0B4Y-ISTaCNe-emROZWItR3VZWW8/edit?usp=sharing) no-repeat;
    height: 135px;
    width: 1000px;
    }
    #Header #logo {
    padding:0px;
    }

    This is the current header I am using. Would it appear differently if I used “headerimg” instead? Would I be able to still have the rest of those icons visible that way?

    just change the top padding on the #logo img:

    #Header #logo { padding-top: 0; }

    Thread Starter oasishomesusa

    (@oasishomesusa)

    Hey! Thank you, that actually should do it I think. I appreciate the help and patience from all of you.

Viewing 12 replies - 16 through 27 (of 27 total)
  • The topic ‘Center Align Custom CSS Header’ is closed to new replies.