[Resolved] Fitting header container width to logo width

[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

GeneratePress 2.2.2

GP Premium 1.7.8

[Tom]

Hi there,

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

Let me know if that helps or not 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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.

[Tom]

How are you adding that at the moment?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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?

[Leo]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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?

[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

[Tom]

Awesome! All good now?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts