[Resolved] Site Header & Nav as Seperate Containers from Body?

[Zach]

Hi,

I’m using the Classic Demo Theme.

What I’m trying to do is have just the site header, navigation, and footer stretch from one end of the screen to the other, while everything else stays the same.

Now I can do this by setting Layout>Container to 2000px but I also want to use a background image for the body of the website, which you can’t do if the entire website (content area) is also full width/2000px.

Is there any way to do this?

Thanks.

[Leo]

Hi there,

Have you tried changing the outer container width to full?
https://docs.generatepress.com/article/header-layout/#header-width
https://docs.generatepress.com/article/navigation-layout/#navigation-width
https://docs.generatepress.com/article/footer-layout/#footer-width

Let me know 🙂

[Zach]

Yes, but that doesn’t work.

I believe the site header is contained within the Layout>Container which is set at default to 1100px. So setting the header width to full still constrains it within that container.

If I increase the container, however, there is no way to have color/background image for the body of the website.

The site demo Article achieves what I want: the header/nav/footer is stretched full width across the screen while the content area isn’t and there is a colored body on the sides.

[Leo]

It should definitely work.

There are two container settings – inner container and outer container.

Setting the outer to full would eliminate the default container width.

Classic is using Contained for both.
Article is using Full for outer container and Contained for inner container as I suggested above.

[Zach]

I see what you are saying.

But when I set ‘Header Width’ to full nothing changes at all.

I’ve now set it as:

Header Presets: Current

Header Width: Full

Inner Header Width: Contained

Header Alignment: Center

There is no change.

[Leo]

Do you see anything change in the customizer when you switch the settings?

Can you link me to the site in question with all cache cleared and disabled?

[Zach]

Here’s an example:
http://oi66.tinypic.com/4sfwwi.jpg

The website is

[Leo]

So everything is still set to contained from the code standpoint.

Can you clear and disable Endurance cache as I requested above?

[Zach]

Yes, I purged the cache before I put up the link. Also, the Endurance Cache was already set to O/Off

[Leo]

ahh sorry!

I just realized that Classic has a full container property added.

Go to Appearance > GP Hooks and delete these things:
https://www.screencast.com/t/3gxipMOWT
https://www.screencast.com/t/sFed32ML0Bl3

Then make sure to purge cache again, then the customizer settings should work normally.

Let me know 🙂

[Zach]

Ah, yea that worked.

Thanks Leo 🙂

[Leo]

No problem 🙂

Sorry for the confusion haha

[Author]

Posts