• 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

Sticky site header having before site header widget section in Monochrome Pro

Last Updated on May 2, 2019 Favorited: 2 times

This tutorial provides the steps to add a sticky site header having before site header widget section in Monochrome Pro child theme based on Sticky site header having before site header widget section in Genesis.

The above site header widget section hide when scrolled. One can move This section to nav primary in the smaller screen. For similar tutorials, you can search for sticky site header.

Here, We can also set up slide in-out responsive menu tested on Genesis Sample which will make it more beautiful and unique.

What we are going to do?

  1. Add a js no-js class in body
  2. Add structural wraps for before site header
  3. Create and register the widget area for the above site header
  4. JS and CSS for sticky header effect

Prerequisite:

  1. Create a Pre-layout/effect checklist for the site header. This will help you to understand which tutorial will work best.
  2. Install and Activate the necessary Plugins, Like Simple Social Icons and Genesis eNews Extended.
  3. You can also keep the HTML for Ionicons Icon. Sample HTML is mentioned in the tutorial.

Let's start.

STEP 1

The first step is to add js and no-js class in the body. Monochrome Pro adds js class using a jquery snippet.

We will also add some additional classes to work with the before header section and sticky site header.

Add the following in functions.php of your child-theme.

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

 
 
Forgot Password

Related Posts

  • Convert Search form into the widget area in Essence Pro theme
  • How to limit the site header to content width in Genesis Sample
  • Sticky site header and Notification bar in Genesis
  • Left and Right Navigation Menu having title area in center to the site header in Genesis Sample
  • Left and Right widget section having title area in center to the site header in Genesis Sample

Categories: Genesis Tutorials, Premium Content Tags: site header, sticky

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