• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Menu Bar Before Header Which Displays Smaller Logo On Scroll

The code in this download folder creates a 2nd site header with custom links before the default site header in the Genesis Sample child theme by StudioPress.

The following image shows the utility bar style site header with custom links on the left and right.

utility-bar-custom-site-header

On scroll, which you can easily set to any pixel value, the 2nd header adds a smaller custom logo before the custom links.

custom-site-header

On mobile screens, this is how it displays :

mobile-custom-header

Watch how it works in the following demo video :

Demo Video #

Shows the utility bar displayed before the site header with a smaller custom logo displayed on scroll inline with your custom menu links.

Code Installation #

Theres 5 steps :

Step 1 – Copy & paste the PHP code from the functions file to the end of the Genesis Sample themes functions.php file.

Step 2 – Upload the file named scroll.js to the Genesis Sample themes root directory.

Step 3 – Copy & paste the CSS from the style.css file to the end of the Genesis Sample themes style sheet and clear caching.

Register for full access

Related Tutorials

  • Scroll Remove Utility Bar Before Header In Genesis Sample Theme
  • Add Utility Bar Before Site Header Removed On Scroll
  • Add Utility Bar Before Site Header Removed On Scroll – Eleven40 Pro
  • Replace Logo With Site Title On Scroll
  • Display Fixed Site Header On Scroll
  • Display Logo on Scroll
  • Change Logo On Scroll

Custom Logo jQuery Scroll Nav Menu

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.