• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Improve Genesis Sample with features and Bug fixes

Last Updated on June 10, 2021 Favorited: 0 times

Genesis Sample is the most popular lightweight and easy to use child theme which offers almost core features.

This tutorial provides the steps to enhance and improve the Genesis Sample which will help you to design and develop #GenesisWP websites faster and easier than before.

Here are some of the changes You can make.

1. Adding js, no-js classes in <body>

This is an important thing which should be followed while working with any design.

  • Add js and no-js class to body in Genesis

These two classes will help you to customize your site based on javascript is enabled (.js) or not (.no-js) in user Browser.

Web Developer extension will help you to test this feature and more.

2. Enhance .title-area and .nav-primary site header

Genesis Sample 2.6.0 was having some js issue which making the .nav-primary to behave differently in with case when js is enabled or disabled in mobile and desktop screens.

One can fix it by following above .js or .no -js guide and use CSS like

.js .nav-primary {
    display: none;
}

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

    .no-js .nav-primary {
        display: block;
        padding-top: 15px;
        padding-bottom: 15px;
    }

}

We can also use flexbox for centering these elements for desktop screens.

@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;
        padding-top: 15px;
        padding-bottom: 15px;
    }

}

3. full-width-content Layout

The default full-width-layout in New Genesis Sample is not full width and have a width of 65%. This should be 100% for full width layout settings.

Open style.css and under the min-width 960px media query below

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

add

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

4. Font Size px vs rem

html {
	font-size: 62.5%; /* 10px browser default */
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

More coming soon…

You can also create an advanced Widgetized front page in Genesis Sample theme.

It is recommended to start your work with these changes.

Related Posts

  • Magazine style Singular Post Design in Genesis Sample
  • Post Page Blog Archive Template with Layouts in Genesis
  • Site Inner with container background in Genesis Sample
  • Remove Responsive Menus in Genesis Sample 3.0.0+
  • Change 3 columns footer widgets in 4 columns widgets in Genesis

Categories: Free Content, Genesis Tutorials Tags: Genesis Sample, Improvements

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service