Sniffle Valve - Dynamik Website Builder

Sticky Header and / or Menu Bar

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this tutorial to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this tutorial, book a one-on-one online training session

This quick video shows you how to set up a sticky header and / or menu bar, or nav bar with Dynamik Website Builder. It should work on other Genesis child themes, but I have not tested it yet.

It is a two part process, the first being to install and activate the free Sticky Menu (or Anything!) on Scroll plugin available on the WordPress Plugin Repository:

https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll

Use the instructions in the video to correctly set up this plugin.

Then add this code to Genesis > Dynamik Custom > Functions:

//* Open stick-header div
add_action( 'genesis_before_header', 'dynamik_open_stick_header', 2 );
function dynamik_open_stick_header() {

echo '<div>';

}

//* Close stick-header div
add_action( 'genesis_after_header', 'dynamik_close_stick_header', 12 );
function dynamik_close_stick_header() {

echo '</div>';

}

 

2 thoughts on “Sticky Header and / or Menu Bar

  1. Hi there!

    Great vid! I have the exact same setup as you with Genesis.

    Can you tell me what the code would be if I wanted to have nav bar sticky and header scroll? I have the Sticky Header plugin installed, but for me, .nav-primary is conflicting with vertical mobile toggle menu (hamburger drop down menu). The menu freezes when I use .nav-primary.

    • Hi Todd,

      Can’t really say for sure what the code would be. As I mentioned in the video, I just got it from the DWB Forum but I an not a coder so I don’t know how or what one would have to change.

      Cheers!
      Lyle

Leave a Comment