Improvements in Genesis Sample 2.6.0

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%;
}