Adding in a Hello Tool Bar to the Top of a Genesis Theme

How to add in a hello style tool bar to the head of a Genesis theme and make it appear visible after scrolling down part way down the page. Demo in Genesis Sample Theme here. This can be done with a left/right widget or just a centre one.

Add in the Javascript

Create a file named hello-bar.js with the above, change the pixel value to adjust when the bar appears. File it in your/js folder

Left/Right Tool Bar
Enqueue the Script, Create and Position the Widgets

Here the script is enqueued and the widgets are created and positioned, this is setting up for 2 visible widgets in the dashboard, you can also just do one only if required. Add to your functions.php

Center Tool Bar
Enqueue the Script, Create and Position the Widgets

Add in the CSS

In the media query you may need to alter the margin-top and media query width value depending on the mobile menu you are using. Add to your style.css file.

That’s it – if you want the menu fixed all the time instead of it appearing part way down, remove the javascript and set the display value to block in the CSS.