Jump to content


Photo

How To Create A Sticky Header (With Example Child Theme)


  • Please log in to reply
7 replies to this topic

#1 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 05 February 2016 - 09:18 PM

One of the most popular requests (and future default feature in MD has been the sticky header! In simple terms, a sticky header scrolls down the page with you and can be used to keep important information (like a buy button or nav links) accessible at all times on the page.

 

Here's a quick video demo of what the sticky header in default MD will look like:

 

Watch video demo

 

Attached File  md-child-theme.zip   2.64KB   17 downloads

 

I think this looks great and am surprised at just how great the Headhesive script works with MD. I also like Headhesive because it doesn't rely on any JavaScript libraries and weighs in at a slim 4KB minified! That means you won't have to take any kind of performance hit to make your sticky header dreams a realization.  ^_^

 

Let's get started.

 

Step 1: Download + Upload Headhesive

 

Head over to the official Headhesive website and download the latest version of the script. Unzip the file and go into the /dist/ folder to find headhesive.min.js.

 

Take that file and upload it to your MD Child Theme, preferably in the /js/ folder (if this folder doesn't exit, create it).

 

 

Step 2: Add Scripts

 

With the Headhesive script now loaded into your MD Child Theme's /js/ folder, open up functions.php and add the following line into the function you load MD stylesheets into. If you're just getting started with a child theme, you should only have one function in the file anyway:

wp_enqueue_script( 'headhesive', get_stylesheet_directory_uri() . '/js/headhesive.min.js' );

This enqueues the Headhesive scripts and loads it onto your website. With the Headhesive script now active, we have to call it and activate it to an HTML element.

 

Still in functions.php, add the following function to the bottom of your file:

function md_child_theme_inline_scripts() { ?>

	<script>
		var header = new Headhesive( '.header' );
	</script>

<?php }

add_action( 'wp_footer', 'md_child_theme_inline_scripts' );

Take note of the .header declaration in this small script. This tells the Headhesive script to make the header class sticky. What's cool about this kind of control is you can set any element to be a sticky element.

 

What's even cooler is that since this script is printed inline, we can use template tags and conditionals to make different elements on different pages sticky.

 

For example, say I want the header on every page but a particular sales page to be sticky. On that particular sales page, I want a different section that has a buy button to stick instead.

 

I can simply modify the above function to something like:

function md_child_theme_inline_scripts() { ?>

	<script>
		<?php if ( is_page( 'sales-page' ) ) : ?>
			var element = new Headhesive( '.element' );
		<?php else : ?>
			var header = new Headhesive( '.header' );
		<?php endif; ?>
	</script>

<?php }

add_action( 'wp_footer', 'md_child_theme_inline_scripts' );

Now with this little bit of PHP mixed in, I can check to see which page I'm on and load a different headhesive script to it. Every page but my specified sales page will have a sticky header. Pretty cool right?

 

 

Step 3: Add Styles

 

We're not done just yet! The last step is to add a few CSS styles to ensure the header displays properly and add a neat slidein/slideout effect. Just drop this little bit of CSS into your style.css file:

.headhesive {
	position: fixed;
		left: 0;
		top: 0;
	width: 100%;
	z-index: 50;
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}

.headhesive--stick {
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	-webkit-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
}

With that CSS in there, save and upload your style.css file and your header should now be stuck to the page!

 

Make your sticky header more effective by adding an important button link to your header, like a buy now link or link to a new course for example.

 

I've uploaded an example child theme that has these customizations intact in case you're having trouble piecing it all together or would like to just merge this with your existing theme.

 

Let me know if you have any questions!

 

Attached File  md-child-theme.zip   2.64KB   17 downloads


- Alex
Check out the Kolakube blog or follow me on Twitter.

#2 Ray

Ray

    Brooklyn's Finest

  • + Legacy Member
  • PipPipPip
  • 132 posts
  • LocationLos Angeles

Posted 27 February 2016 - 03:12 PM

Hi Alex,

 

I see a js folder in my MD (theme) folder but I don't see one in my child theme folder.

Should I just create a /js folder for my Raylosophy Child Theme or can upload headhesive to the MD js folder?


I consult, create products and brainstorm all day


#3 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 27 February 2016 - 03:58 PM

Hey Ray, yes, create a /js/ folder in your child theme and upload the headhesive script there.


  • Ray likes this
- Alex
Check out the Kolakube blog or follow me on Twitter.

#4 Ray

Ray

    Brooklyn's Finest

  • + Legacy Member
  • PipPipPip
  • 132 posts
  • LocationLos Angeles

Posted 27 February 2016 - 08:34 PM

Update:

 

The header menu is not clickable when the screen is shrunk until the sticky menu pops up during the scroll. 

I'll probably remove the script and css and just wait until sticky menus are a part of MD.

 

----------------------------------------------------

Worked like a charm!

 

I'm launching a new site using MD in a few days...can't wait to show it off.

 

As always...thanks for the timely support.


Edited by Ray Smith, 28 February 2016 - 01:19 AM.

I consult, create products and brainstorm all day


#5 Alexander Gonzalez

Alexander Gonzalez

    Member

  • + Legacy Member
  • PipPip
  • 19 posts

Posted 27 March 2017 - 12:00 PM

@Alex / Ray, 

 

How did you fix the issue with the menu being unclickable until the sticky header shows up?



#6 ndisdabest

ndisdabest

    Member

  • + Legacy Member
  • PipPip
  • 23 posts

Posted 16 June 2017 - 07:08 PM

I'll second this question. How was this issue fixed?



#7 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 18 June 2017 - 09:29 AM

Can you post a link to your site so I can see this for myself? I'm sure I can give you a fix then.


- Alex
Check out the Kolakube blog or follow me on Twitter.

#8 michkocis

michkocis

    Newbie

  • MD Customer
  • Pip
  • 5 posts

Posted 04 February 2018 - 08:56 AM

Hey guys,

 

as i see video is not working anymore, that service is currently unavailable. Any chance to see it again?






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users