[Resolved] Full Width Header

[David Seibel]

Hey Tom,

I’m having trouble creating a full width header. What I want to do is have a colored band at the top of a page with our logo and contact info included. I went into customize/layout and set it to full width but that didn’t work. I tried creating an image in Canva with the correct dimensions (1600 x 150) but when placed in the page it reduced it to the size of the container (1080).

What’s the best way to do this? I’m clueless and out of ideas!

Appreciate the help and all the support!

Dave

[Tom]

Give this CSS a try:

.inside-header.grid-container {
      max-width: 100%;
}

[David Seibel]

Tom,

I think its a case of the stupid end-user! I loaded up Simple Custom CSS and copied in the code you gave me. I see it worked on the “regular” pages. I created a page which will be a landing page for a video. I wanted to use a different header than on the rest of the site. It is this page that I’m having trouble with.

How do I get just that page to use the full width custom header?

Sorry if I’m not that clear. Obviously I’m not a web designer!

Thanks,

Dave

[Tom]

Are you using the Page Header add-on, or are you wanting to do this using the site header with your regular site title and tagline/logo?

[David Seibel]

Here’s what I did:

1. I created a new page.
2. I disabled the Header in the Disable Elements Box (also disabled Headline/Navigation/Footer).
3. In the Page Header area on the new page I added the .png file that I created in Canva

I didn’t change any other settings on the new page

[Tom]

Gotcha – are you only using the image, or did you add content to the “Content” tab?

You’re wanting this area to be 100% width?

[Dave Seibel]

All I did was put the image in. I didn’t add anything to the “Content” tab

[Tom]

And you want the image to be 100% of the browser?

You could use this CSS:

.page-header-image.grid-container {
      max-width: 100%;
}

.page-header-image img {
      width: 100%;
}

[David Seibel]

That did the trick!

Thanks,

Dave

[Tom]

No problem 🙂

[Rylan]

Hey tom, I just used the CSS

.inside-header.grid-container {
max-width: 100%;
}

to make the header the full width (different than my content). Do you also know a CSS needed to make the Nav bar the full width as well? (like on your site)

Thanks,

Rylan

[Tom]

The navigation on this site is just using the “Navigation layout” option in “Customize > Layout” (set to fluid).

To make the content inside the navigation fluid as well, you can add this:

.inside-navigation.grid-container {
      max-width: 100%;
}

[Rylan]

perfect, thank you!

[Tom]

You’re welcome 🙂

[Marianne]

Thanks, Tom. This has helped me too. 🙂

[Author]

Posts