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

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

Home Forums Support Make contained header/footer full width when content container is “full width”

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1537198
    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.

    #1537249
    David
    Staff
    Customer Support

    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.

    #1537319
    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.

    #1537341
    David
    Staff
    Customer Support
    #1540262
    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.

    #1540288
    David
    Staff
    Customer Support
    #1541258
    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!

    #1541885
    David
    Staff
    Customer Support

    Awesome – glad to be of help 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.