Full Width Header

Give this CSS a try:

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

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

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?

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

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?

All I did was put the image in. I didn't add anything to the "Content" tab

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%;
}

That did the trick!

Thanks,

Dave

No problem :)

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

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%;
}

perfect, thank you!

You're welcome :)

Thanks, Tom. This has helped me too. :)