Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Support request] Using a full width section with no sidebar on a page with a sidebar

Home Forums Support [Support request] Using a full width section with no sidebar on a page with a sidebar

Home Forums Support Using a full width section with no sidebar on a page with a sidebar

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #600651
    Lee

    Hi, we’re currently building a site and have come up against an issue regarding sections and sidebar layouts.

    We installed a plugin so that we could use sections with a sidebar layout and that is working fine. What we’d like to be able to do though is to insert a new section that spans the whole width of the page, on a page that has a sidebar.

    So a bit like how the way the footer is separate to the content above it and ignores the sidebar, can this be done for an individual section?

    #600949
    David
    Staff
    Customer Support

    Hi Lee,

    tricky little one this. Will require some code and a bit of tinkering to get right. But this will get you started. This works if you have your Sections Box Type set to contained.
    First off you can remove the code/plugin you have used to add the sidebar.

    Then using the Code Snippets plugin (or child theme)
    https://docs.generatepress.com/article/adding-php/
    add this PHP snippet:

    add_action( 'generate_before_main_content', 'tu_add_inside_container' );
    function tu_add_inside_container() {
        get_sidebar('right-sidebar');
    }

    Then we need this bit of CSS. I would suggest you add this using Tom’s Simple CSS plugin, and apply it to the Simple CSS meta box it gives in the page editor. Otherwise we will need to target the specific page(s) in the CSS

    .site-main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .generate-sections-container {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
    }
    
    #generate-section-1 {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 75%;
        flex: 1 0 75%;
        max-width: 1200px; /* Adjust to size of Content Container minus width of sidebar */
        margin-left: auto;
        margin-right: 0;
    }
    
    #right-sidebar {
        width: 200px; /* Set width of sidebar */
        margin-right: auto;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.