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.

genesis-hello-tool-bar

 

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

genesis-hello-tool-widgets

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

genesis-hello-tool-single

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.

2 Comments

  1. Merck glikol on January 21, 2019 at 2:34 pm

    Howdy juet wanted to give you a quick heads up. The words inn your article seesm to be running off the scren inn Chrome.

    I’m not sure if this is a formatting issue or something
    to do with internet browser compatibility but I figured I’d
    post to let you know. The layout look great though!
    Hoppe yoou get the problem fixed soon. Many thanks

  2. Tyler Golberg on July 25, 2016 at 1:44 am

    This worked great! I love being able to add a simple “hello bar” without having to add another plugin.

Leave all Comment