In the comment section of How to display a Fixed Mini Header when Scrolling down in Genesis tutorial, a user asked:
Thank you for all your excellent bits of code. I’m using the inline logo uploaded via the customizer (https://sridharkatakam.com/inline-logo-in-genesis/), is it possible to incorporate that logo into this code so that it doesn’t need to be uploaded twice (and then have the size controlled by css?)
Thank you!
In this article, we shall combine the inline logo and fixed mini header techniques and replace the left and right floating divs with Flexbox CSS to vertically center the logo and menu in both the regular and mini versions of the site header. Additionally, we will use the logo image uploaded in the WordPress Customizer and display the same in a smaller size in the mini header.
Before scrolling down:
After scrolling past the header:
Screencast:
While the tutorial has been written for and tested in Genesis Sample 2.2.4 child theme it should work with minor adjustments in any Genesis child theme.
We shall display the fixed mini header (on scrolling) only for viewport widths greater than 1023px.
Step 1
Create a file named say, general.js in child theme's js directory having the following code:
