Archived topic

Make contained header/footer full width when content container is "full width"

7 replies · Started by Mikko on November 19, 2020

Viewing posts 1–8 of 8

November 19, 2020 at 1:27 am #1537198

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.

November 19, 2020 at 2:05 am #1537249

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.

November 19, 2020 at 3:15 am #1537319

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.

November 19, 2020 at 3:55 am #1537341

Glad to hear that!

November 21, 2020 at 9:49 am #1540262

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.

November 21, 2020 at 10:11 am #1540288

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

November 22, 2020 at 8:58 am #1541258

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!

November 23, 2020 at 1:14 am #1541885

Awesome - glad to be of help :)

This archived topic is closed to new replies.

Start building better websites today.