A sticky top bar is often times used by marketers to get e-mail sign ups, promote a special discount, or just say something really damn important.
There are a few cool plugins out there that do this such as Hello Bar, or as the famous Carrie Dils calls it a Utility Bar but what if you want to roll your own? Why? That’s how we do over here at www.benweiser.dev.
Here’s what this bad boy looks like in action.
This is what we’re going to do
- Register a new widget area
- Add our CSS styles
Create a new file named stickybar.js in your child theme’s js folder (if your child theme doesn’t have a js folder create one at the root) and past this in.
Essentially what this code does it checks to see if the user has scrolled or not and adds and removes a CSS class based upon that behavior. If the user scrolls up the sticky bar will remain visible, if the user scrolls down it gets out of the way to allow your content more room to “breathe”.
Step 2: Functions.php
Note that we are hooking the new widget area in the genesis_before hook rather than genesis_before_header because we’re going to be making this bar sticky we want to add padding to our site container so the fixed div doesn’t cover up our content.
Step 3: Style.css
Slap this bad boy in your style.css in order to give your new widget area some spanking new styles. Feel free to edit these styles as necessary to match your theme and whatnot.
Wrappin’ It Up
Now that we’ve got all sticky with our brand new widget let me know if you have any complaints, concerns, hate mail, suggestions for improvement, or if you need help implementing in the comments below. K Thanx Bye.