Improvements in Genesis Sample 2.6.0

Updated on April 25, 2018

The recently released Genesis Sample 2.6.0 is close to perfection as my ideal starter Genesis child theme.

That said, there are still a few things that could be improved in my opinion and I list the theme changes and fixes below.

Most of these will hopefully be fixed by StudioPress in the next update.

Menu items flash

From 959px and below on a desktop i.e., when the nav menu items collapse into the hamburger menu, reloading the page will/might show a flash of the menu items briefly below the site title before the hamburger icon appears.

This can be fixed by installing Gary Jones’ Genesis JS / No JS plugin and adding this CSS:

.js nav {
    display: none;
}

@media only screen and (min-width: 960px) {

    .js nav {
        display: block;
    }

}

Header floats

.title-area and .nav-primary and floated left and right respectively inside .site-header > .wrap.

These can be removed and Flexbox used for 960px and above like so:

@media only screen and (min-width: 960px) {

    .site-header .wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .title-area {
        float: none;
    }

    .nav-primary {
        float: none;
        margin-left: auto;
    }

}

This will have the added benefit of keeping the two elements vertically centered when JS is off in the browser.

i.e., this will fix:

Primary nav’s wrap

I am a fan of least possible HTML markup (which is why I dislike page builders).

As such we can remove .nav-primary‘s .wrap (assuming that you want primary nav to be at the right side in the header and not below like in the older theme version) by adding this in functions.php:

// Remove `.menu-primary` from structural wrap.
add_theme_support( 'genesis-structural-wraps', array( 'header', 'menu-secondary', 'footer-widgets', 'footer' ) );

With JS turned off

Submenus will not appear in the mobile menu when Javascript is disabled.

This can be fixed by adding display: block to .genesis-nav-menu .menu-item:hover > .sub-menu.

.genesis-nav-menu .menu-item:hover > .sub-menu {
    left: auto;
    opacity: 1;
    display: block;
}

and to fix the width of submenus, change (inside the 960 min-width media query)

.genesis-responsive-menu .genesis-nav-menu .sub-menu,
.genesis-responsive-menu .genesis-nav-menu .sub-menu a {
    width: 180px;
}

to

.genesis-nav-menu .sub-menu,
.genesis-nav-menu .sub-menu a {
    width: 180px;
}

No Sidebar Layout

960px and above, .content will have a width of 65%. This should be set to 100% for pages that use the full content layout.

Inside the min-width 960 media query below

.content {
    float: left;
    width: 65%;
}

add

.full-width-content .content {
    float: none;
    width: 100%;
}

Equal height Content and Sidebar

https://sridharkatakam.com/equal-height-content-and-sidebar-in-genesis-sample-2-6-0/

Thanks to Marcy Diaz and Robin Cornett.