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.
On scroll, which you can easily set to any pixel value, the 2nd header adds a smaller custom logo before the custom links.
On mobile screens, this is how it displays :
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
- 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
Was This Tutorial Helpful?