How to Make a Sticky Header for the Vantage Theme

This post is about how to make a sticky header for the Vantage theme.

Steps for Making the Sticky Header

Step 1

You should first read the following on how the Foundation Framework documentation. You can read about sticky navigation here:

https://foundation.zurb.com/sites/docs/magellan.html#sticky-navigation

Have a look at the following page to find the option you want to use. There are many different sticky navigation options. You will need to find the one that fits your needs the best.

https://foundation.zurb.com/building-blocks/navigation.html

Step 2

Copy header.php from Vantage folder to your child theme folder.

Step 3

Edit new child theme header.php file so it looks like following:

<?php
/**
* The template for displaying the header
*
* Displays all of the head elements.
*
* @package Child Vantage
* @since 4.0.0
*/
?>
<header class="header" role="banner" data-sticky-container>

<div data-sticky data-options="marginTop:0;">

<?php get_template_part( 'parts/nav-top-bar-primary' ); ?>

<?php get_template_part( 'parts/nav-top-bar-secondary' ); ?>

</div>

</header> <!-- .header -->

<?php get_template_part( 'parts/nav-mobile-title-bar' ); ?>

Step 4

Add following styles to your child theme styles.css:

[data-sticky] {
  width: 100%;
}
 
.sticky-container {
  z-index: 15;
}

Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.