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.

Related Tutorials

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.