[Resolved] Fitting header container width to logo width

Home Forums Support [Resolved] Fitting header container width to logo width

Home Forums Support Fitting header container width to logo width

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #854774
    Alan Stancliff

    I’m developing a new site using GP on a local server. I can’t figure out how to get the header container sides to change so it is the size of the logo. I tried changing the margins, but no joy. Here is a link to the screenshot from my Dropbox. The link expires in 30 days.
    Screen capture of problem

    #854907
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You can set the header to contained: https://docs.generatepress.com/article/header-layout/

    Let me know if that helps or not ๐Ÿ™‚

    #855236
    Alan Stancliff

    Thanks for the rapid reply, Tom. I had actually played with that before posting here, but it did not get me what I wanted. I wanted the sides of the container to only be as wide as the logo. But I wanted the top of the container to go to the top of the page.

    When I tried what you suggested, the container was fully constrained to the dimensions of the logo and was hidden behind it. Here is what I got:
    Container fully constrained

    But what I wanted was for only the sides of the container to be constrained to the logo’s width. However, I wanted the top of the container to go to the top of the page. I did a little markup to show you what I mean. This is what I want:
    what I want

    By the way, I didn’t see how I could left justify the site title and description. Right now, they are centered, as you can see.

    #855303
    Tom
    Lead Developer
    Lead Developer

    How are you adding that at the moment?

    #855373
    Alan Stancliff

    I’m not adding it. The second graphic is what I’d like to get. I achieved that graphic by taking a screen shot of the header-container constrained and a second with the header-container at full. I then went to my graphics program and cut-copied the part where the site name and site description appear and pasted it into the graphic that shows the header-container fully constrained.

    • So how do I get that effect?
    • And how do I left justify the site title and the site description?

    *********************
    By the way, here’s a link to the original site made using the Atahualpa theme, which is non-responsive. That site is a few years old and has not been updated, and the organization went inactive. Now, the group is activating again, and I wanted a new site that was responsive and looked similar to the old one, perhaps a little cleaner.

    BTW, here’s a link to the old

    #855948
    Tom
    Lead Developer
    Lead Developer

    The image of what you want it to look like is what it should look like by default if you’ve:

    1. Uploaded your header in Customize > Site Identity
    2. Set your Header Width to “Contained”
    3. Given your header a background color in Customize > Colors > Header

    If that’s not working, I’d need to see the actual site in order to know what’s going on. Any chance you can put it up on a live server?

    As for the header alignment, that should be in Customize > Layout > Header as well.

    #856214
    Alan Stancliff

    Tom,
    This site is really not ready to go live. I’ll ask Bluehost if I can put it into some kind of hidden or developmental subdirectory, but then I’d need a way to send you the URL and dashboard password privately and securely, wouldn’t I?

    Alternatively, I could make a screencast of what I am doing and send that to you. Would either of those be acceptable?

    #856250
    Leo
    Staff
    Customer Support

    You can send private info through Account Issues here:
    https://generatepress.com/contact/

    Screenshots can be uploaded using a service like this:
    https://postimages.org/

    #856304
    Alan Stancliff

    Thanks Tom and Leo

    I’ll see about uploading it to a temporary live site this evening. By the way, I’ve been using a child of GeneratePress. I assume that makes no difference, right? You’ll see it a bit later.

    #856339
    Tom
    Lead Developer
    Lead Developer

    It shouldn’t, but it depends on what’s inside the child theme I suppose. We’ll know once we see the site ๐Ÿ™‚

    #856676
    Alan Stancliff

    I submitted the confidential information needed to log into the site. I think I had to use the presales instead of account information because the latter is broken. The site URL is here

    #857051
    Tom
    Lead Developer
    Lead Developer

    Ah, I see the issue. You’ve added this CSS with CSS Hero:

    .grid-container {
        background-color: rgba(0, 0, 0, 0);
    }

    That’s telling every element with that class to have no background color. If you remove that CSS, you should see the background behind the site header once you set it to Contained in Customize > Layout > Header.

    #857301
    Alan Stancliff

    Hi Tom,

    I followed your directions and took this out of the CSS Hero code:

    .grid-container {
    background-color: rgba(0, 0, 0, 0);
    }

    1. Then I went to Customize>Layout>Header and set that to contained.
    2. Then I went to Customize>Colors>Header and ensured the header background color was set to #e2e2e2

    However, that didn’t work either.

    It seems that one can either fully constrain the logo container or make it full. I don’t see how to constrain only the width but not the height. Those options don’t seem to be present in the customizer.

    What can I do to achieve the effect I am seeking? Can you please revisit the test site and see if you can make it work?

    #857308
    Alan Stancliff

    Tom,
    Disregard the last post, please. When I did the preview after following those directions, I had forgotten to flush my browser cache. But when I flushed it and looked again, it was working.

    Thanks

    #857418
    Tom
    Lead Developer
    Lead Developer

    Awesome! All good now?

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