• 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

Fixed Utility bar Site header and hide the Utility bar while scrolling in Genesis Sample

Last Updated on April 1, 2019 Favorited: 2 times

This tutorial provides the steps to create a utility bar which can be used to add navigation menus, social icons, notifications and more which hides when the page is scrolled.

The tutorial includes a bonus guide for shrinking the site header and hide the utility bar when scrolled in Genesis Sample.

It is recommended to take a look at the default Utility bar in Genesis Sample tutorial.

Let's start with the Basic first.

1. Go to Appearance > Customize > Site Identity > Add the logo and make the logo width as of your choice.
2. Go to Appearance > Menus and Create a Menu for Header Menu display location.

Make sure the logo height is more than 75 px otherwise the menu will conflict with the logo and you will need to add a clear: both for .nav-primary under media-max width 959px.

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

Already a member? Log in below or here.

 
 
Forgot Password

Related Posts

  • Sticky site header having before site header widget section in Genesis
  • Sticky site header and Notification bar in Genesis
  • Top Notification Bar with close button in Genesis
  • Sticky shrinking site header logo having Utility Bar in Genesis
  • Shrinking header with hanging logo having top navigation in Genesis Sample

Categories: Genesis Tutorials, Premium Content Tags: shinking logo, shrinking header, Utility Bar

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