In this article I share the steps for customizing Genesis Sample to
- replace the background logo image with an inline logo managed via the customizer
- relocate primary nav menu to header right
- make the header fixed so it remains in view all the time and shrinks (incl. the logo) on scroll (from 1024px and above, changeable)
- make the nav menu/hamburger menu icon remain inline with the logo until when necessary at smaller screen widths
Create a file named say, custom.js in your child theme's
js directory having the following:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
I always use the sample theme as a base to create customised themes. I have used this tutorial on a few themes but would would like to add a Nav Social Menu widget area similar to your ‘Fixed Utility Bar and Header in Minimum Pro and other customizations’ tutorial. Can you please add that option to this tutorial?
Will this only work properly in your own starter theme or will it also work on the Genesis Sample?
Unless otherwise mentioned, all my tutorials are written for the latest (at the time of writing the tutorial) Genesis Sample child theme.
Actually, something like this but that would work on Genesis Sample would be awesome.
And one that doesn’t involve copying and pasting over the entire style.css! 🙂
Basically, I implemented another tutorial you did (same result except the title area dropped down instead of moving upwards to become smaller) but would prefer the above effect
As I replied earlier, this tutorial is meant for Genesis Sample.
There were far too many changes in the stylesheet to list them individually. You’d need to go through the differences, try to understand the purpose of code changes and implement them manually if your style.css file has already been modified.
Apologies, I had two open at the same time!
This one looks extremely similar but is mentioned to be for your starter. I got confused between the two =)