Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #14415

    Can I get an image, logo or header background, to fill the entire header area? When I try using a logo, I don’t get the full size image. When I try with a background image I get some sort of image offset resulting in white margins on the left and bottom. Please see http://kurtbruner.net as a sample of the results when I try using a logo.

    #83375

    Hello,

    Try this on your custom.css.

    #header {
    padding: 40px 0 30px 0;
    z-index: 100;
    margin: 0;
    }

    #header.offset-by-one {
    padding-left: 0;
    }

    #header.seven.units {
    width: 775px;
    left: -45px;
    }

    #top #header .social_bookmarks {
    position: absolute;
    top: 25px;
    }

    Regards,

    Ismael

    #83376

    Thanks Ismael. It gets me real close. I had set the padding in the #header to 0. Please look at the results http://kurtbruner.net.

    Issues still:

    1) Some browser window widths cause the header image to run into the right column or leave about 20 pixels of white space.

    2) Header doesn’t show properly on an iphone

    3) Social media buttons are now in the way. Can I move them to the right column? If so, how?

    Thanks for the great customer support.

    #83377

    Ok, I figured out how to remove the social media buttons from the header with this css:

    #top #header .social_bookmarks {

    display: none;

    }

    But I still need to get them over to the right column if possible.

    #83378

    Still hoping for a response??????

    #83379

    Hi!

    Try following css code (add it to css/custom.css):

    .logo img {
    width: 145% !important;
    }

    .logo, .logo a {
    left: -18px;
    }

    #header.seven.units {
    width: 100%;
    left: 0;
    }

    Regards,

    Peter

    #83380

    The above code doesn’t work. I don’t think I was quite clear enough on what I want to accomplish. So let’s start again.

    Please refer to http://kurtbruner.net

    I have an image in the header area that is 775×210 that spans the the wide column, main content area. This is what I want. I don’t want it to span into the right column above the navigation. I got this with the css code listed below. I still have two important problems to solve.

    PROBLEM 1: As you see in the code, the social bookmarks are not displayed. I want them displayed in the upper right area, to the right of the banner image and above the navigation. How do I accomplish that?

    PROBLEM 2: Using the code below, the banner image looks fine when the browser window is wide. If you reduce the width of the browser, the banner shifts, or the right portion truncates. How do I make it so the banner image resizes correctly so the page will look reasonable on a smartphone?

    Current Code in the Quick CSS Box:

    #header {

    padding: 0;

    z-index: 100;

    margin: 0;

    }

    #header.offset-by-one {

    padding-left: 0;

    }

    #header.seven.units {

    width: 775px;

    left: -45px;

    }

    #top #header .social_bookmarks {

    display: none;

    }

    #83381

    Hi steveburgoon,

    For the first issue, you’ll first need to remove:

    .social_bookmarks {
    display: none;
    }

    Then add:

    #top #header .social_bookmarks {
    position: absolute;
    right: -142px;
    z-index: 152;
    top: 10%;
    margin-top: 0px;
    }
    @media only screen and (max-width: 767px) {
    #top #header .social_bookmarks {
    right: 25%;
    }
    }
    @media only screen and (max-width: 989px) and (min-width: 768px) {
    #top #header .social_bookmarks {
    right: 37px;
    top: 172px;
    }
    }

    The second issue is a lot of the same adjustment as above. First you need to make the code you have only fall into the largest size of screen then make an adjust for everything in between, followed by the smaller sizes:

    @media only screen and (min-width: 1140px){
    #header.seven.units {
    width: 775px;
    left: -45px;
    }
    }

    #header.seven.units {
    width: 696px;
    left: -45px;
    }

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    #header.seven.units {
    width: 775px;
    left: -35px;
    }
    }
    @media only screen and (max-width: 767px){
    #header.seven.units {
    width: 484px;
    left: -35px;
    }
    }

    @media only screen and (max-width: 767px) {
    #header.seven.units {
    width: 532px;
    left: -35px;
    }
    }

    I’m sure quite a bit of those will need to be adjusted a pixel or two as I’m not able to put it all in live. You’ll probably also need to make some exceptions for IE and maybe Firefox as they all behave a little differently but that is about as far as we can dive into it through support.

    Regards,

    Devin

    #83382

    Thanks! I had to modify things as you said but with the exception of a small glitch in Firefox, IT WORKS! If you or anyone else cares, her is the code that works for me.

    #header {

    padding: 0;

    z-index: 100;

    margin: 0;

    }

    #header.offset-by-one {

    padding-left: 0;

    }

    #top #header .social_bookmarks {

    position: absolute;

    right: -142px;

    z-index: 152;

    top: 10%;

    margin-top: 0px;

    }

    @media only screen and (max-width: 989px) {

    #top #header .social_bookmarks {

    right: 37px;

    top: 172px;

    }

    }

    @media only screen and (max-width: 767px) {

    #top #header .social_bookmarks {

    right: 190px;

    top: 135px;

    }

    }

    @media only screen and (max-width: 480px) {

    #top #header .social_bookmarks {

    right: 110px;

    top: 90px;

    }

    }

    @media only screen and (min-width: 1140px){

    #header.seven.units {

    width: 775px;

    left: -45px;

    }

    }

    @media only screen and (max-width: 1139px) {

    #header.seven.units {

    width: 696px;

    left: -45px;

    }

    }

    @media only screen and (max-width: 989px) {

    #header.seven.units {

    width: 775px;

    left: -35px;

    }

    }

    @media only screen and (max-width: 767px) {

    #header.seven.units {

    width: 480px;

    left: -30px;

    }

    }

    @media only screen and (max-width: 480px) {

    #header.seven.units {

    width: 319px;

    left: -10px;

    }

    }

    #83383

    Hello,

    Glad Devin could help. :)

    Regards,

    Ismael

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Header logo filling the entire header area’ is closed to new replies.