[Resolved] Layout – Header Widget Alignment with Header Image

Home Forums Support Layout – Header Widget Alignment with Header Image

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #892
    Bonnie

    When I use the Widget:Header, I find that the items push the Header Logo/Image down and visually creates a huge space above it.

    I’m not sure how to adjust the layout, so that they are aligned. (e.g. Widget:Header is next to Header Logo (vertically aligned at the top), instead of being above it.)

    #894
    Tom
    Lead Developer
    Lead Developer

    Hi Bonnie,

    This can happen if you’re using a full width header.

    Can you link me to the website so I can take a look and provide a solution?

    Thanks!
    Tom

    #895
    Bonnie

    I just started to set up this website.

    As you will see, the logo image does not take up the entire width or height. However, there is a lot of wasted space because it looks like the Widget:Header is in a separate row above the logo/image. Anytime I add in another item within the Widget:Header, the logo gets pushed down further.

    Ideally, I want the items within the Widget:Header to appear next to the logo, so I can save on space and not require visitors to scroll down so much.

    #896
    Tom
    Lead Developer
    Lead Developer

    Hi Bonnie,

    It’s hard for me to tell without a link to the website, or maybe a screenshot?

    Let me know,
    Tom

    #901
    Bonnie

    Sorry but I thought the website link was included in my post. I entered it in the “Website” field on this form.

    Try again. http://www.cathedraltownhealth.com

    #902
    Tom
    Lead Developer
    Lead Developer

    Hi Bonnie,

    Looks like the theme is trying to display the tagline, which isn’t there.

    Try going to Customize > Header > Hide site tagline and see if that fixes it.

    Let me know,
    Tom

    #903
    Bonnie

    πŸ™‚ πŸ™‚ πŸ™‚

    Worked!

    Thanks.

    #133191
    Scarlet

    I’m having the same issue. I have a full width header and every time I try to add anything in the header, my header image gets pushed down. I tried adding the simple social icon widget to the header and my header image got pushed down and the facebook icon was in one place and the title for the simple social icon widget was in another place. I’d love to give you the website but I’m working from Instant-WP and not my real website. Is there any way to show you my issue?

    #133216
    Tom
    Lead Developer
    Lead Developer

    If you have a full width header, you will need to position your header widget on top of it.

    Something like this should do it:

    .inside-header {
          position: relative;
    }
    
    .header-widget {
          position: absolute;
          top: 20px;
          right: 20px;
    }
    #133393
    Scarlet

    That didn’t work. Here’s a YouTube video I made to show you what’s happening, even though I’m sure you understand.

    When I added the code you gave me, it pushed my image down further.

    #133422
    Tom
    Lead Developer
    Lead Developer

    Ah, it doesn’t look like you’re using GeneratePress which is why the code above doesn’t work.

    You’ll have to ask the Genesis people how to place their header widget on top of your image, as I’m not familiar with their code all that much.

    Another alternative would be to remove all of the empty space in your header and only include the text – but you may have a reason for making the image full width.

    #133594
    Scarlet

    I appreciate you taking the time out to help me. Thank you.

    #133596
    Tom
    Lead Developer
    Lead Developer

    No worries – let me know if you need anything πŸ™‚

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.