[Support request] Make contained header/footer full width when content container is “full width”

[Mikko]

Hi team GP,

I’ve set my site so that header and footer are “contained”. Inner too.

Sometimes when I work with page builders I set the content container “full width”.

The “full width” mode doesn’t affect my headers and footers as they stay contained.

In case like this, is there some trick to make header and footer too go full width?

I want to keep contained header and footer as the default setting.

I was thinking about creating element/layout and then applying some css in it to fix my headers and footers page/post basis but maybe there’s easier way to get this done.

I want only outer container go full width and keep inside contained.

Thank you for support.

[David]

Hi there,

you could try this CSS:

.full-width-content #masthead,
.full-width-content #site-navigation,
.full-width-content #sticky-navigation,
.full-width-content .site-footer.grid-container {
    max-width: 100%;
}

When full width content is selected, it adds the full-width-content body class, the CSS above will apply to the Site Header, Primary Navigation ( in case its set above/below header ) and the Footer.

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

[Mikko]

Thanks a lot David, that works perfectly.

I also installed add category to pages plugin. Makes adding this style to pages easier with tags and categories.

[David]

Glad to hear that!

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

[Mikko]

Reopening this ticket,

I just switched to sticky navigation and when that style you gave me is applied only inner container becomes sticky.

Is there way to make the outer fullwidth container of the navigation sticky too in scenario that was discussed in this ticket?

Thank you very much.

[David]

Updated the CSS her to include the Sticky Nav:

https://generatepress.com/forums/topic/make-contained-header-footer-full-width-when-content-container-is-full-width/#post-1537249

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

[Mikko]

The outer container of the navigation is sticky now.

I managed to tweak the CSS to make page hero/header 100% too.

.full-width-content #masthead,
.full-width-content #site-navigation,
.full-width-content #sticky-navigation,
.full-width-content .page-hero.grid-container,
.full-width-content .site-footer.grid-container {
    max-width: 100%;
}

Thank you!

[David]

Awesome – glad to be of help 🙂

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

[Author]

Posts