Magazine Pro – How to CSS Increase site-inner edge-to-edge but not Header/Nav

[DTHkelly]

Good news/bad news
Trying to use edge-to-edge Beaver Builder Templates with Magazine Pro and Extender. I have edge to edge, but problem is Header and Nav are edge to edge, too.

Good News - I managed (a hack) to make Beaver Builder Template edge-to-edge with Magazine Pro!
http://vcpgen1np.staging.wpengine.com/monday-bb-test/?

Key: eliminating Magazine pro margin/padding. When I change the following values to 0 in Firebug, only the content is edge to edge, not the Header/nav/secondary nav.

.site-inner {
clear: both;
padding-top: 0px;
}

.site-inner, .wrap {
margin: 0 auto;
max-width: none;
} 

Bad News: On every page, Header is now edge to edge. So are primary and secondary nav

Here is what the Magazine Pro Header looked like before edge-to-edge Beaver Builder Page Code

View post on imgur.com

Here is what the Header looks like on a nonBB page After edge-to-edge Beaver Builder Page Code:
http://vcpgen1np.staging.wpengine.com/

My hack of the Beaver Builder Templates for Dynamik and Generate Pro is the obvious cause, but I don't know how to fix it.

This is the selector I used based on the Firebug body class (overkill?)

.page-template-my-templatesbeaver-builder-php.fl-builder.full-width-content.beaver-page

So here is the CSS I'm using:
HTML Code:

/* Beaver Builder Junior Atoms (hack by KL)
--------------------------------------------- */
/* Beaver Builder */

.page-template-my-templatesbeaver-builder-php.fl-builder.full-width-content.beaver-page.fl-builder .entry {
    background-color: none;
    box-shadow: none;
    padding: 0;
}

.page-template-my-templatesbeaver-builder-php.fl-builder.full-width-content.beaver-page .entry {
    margin-bottom: 0;
}

.page-template-my-templatesbeaver-builder-php.fl-builder.full-width-content.beaver-page .site-inner {
    clear: both;
    padding-top: 0;
}

.page-template-my-templatesbeaver-builder-php.fl-builder.full-width-content.beaver-page .site-inner, .wrap {
    margin: 0 auto;
    max-width: none;
}

/* Media Query */

@media only screen and (max-width: 1023px) {

    .extender-full-width .nav-primary {
        margin-top: 0;
    }

}

Here is the page template - Straight from Junior Atoms for Generate Pro:
http://cobaltapps.com/forum/forum/dynamik-skin-forums/tools-tips-other-skin-resources-aa/39470-fun-with-beaver-builder#post39470

PHP Code:

 <?php

//* Add beaver-page body class
add_filter( 'body_class', 'beaver_body_class' );
function beaver_body_class( $classes ) {
    
    $classes[] = 'beaver-page';
    return $classes;
    
}

//* Force full width content
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
 
//* Remove breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

//* Remove Home Featured
remove_action( 'genesis_after_header', 'generate_home_featured' );
 
//* Remove entry header
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );

//* Remove edit link
add_filter( 'genesis_edit_post_link' , '__return_false' );

//* Remove comments template
remove_action( 'genesis_after_entry', 'genesis_get_comments_template' );

//* Run the Genesis loop
genesis();

[Genesis Developer]

Line no 1199

.site-header .wrap {
    max-width: 1100px;
}

line no 1271

.site-header .widget-area {
    float: right;
    text-align: right;
    width: 720px;
}

line no 1437

.nav-secondary .wrap,
  .nav-primary .wrap {
    max-width: 1100px;
}

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[DTHkelly]

Thanks, Genwrock.

But those selectors make me wonder why only changing .site-inner margin to 0 is affecting Header and Nav?

[DTHkelly]

Genwrock:

I added

.site-header .wrap {
    max-width: 1100px;
}

.site-header .widget-area {
    float: right;
    text-align: right;
    width: 720px;
}

.nav-secondary .wrap,
  .nav-primary .wrap {
    max-width: 1100px;
}

To Extender > Custom > CSS after my edge-to-edge site-content CSS and Success!!!!

Thank you so much.

[Author]

Posts