How to create sticky navigation with Foundation and JointsWP

create sticky naviagtion with jointswp and foundation

When I develop a WordPress website I quite often use the great JointsWP starter theme to kickstart my workflow. Based on the responsive Foundation framework I like the clean and simple setup that Joints gives me at the start. 

The theme is very basic and thus gives me plenty of room to create my own template with only the things I need in each project. Working with Foundation for the grid and all it’s responsive powers I can create great looking websites for every device. 

For one of my latest projects I wanted to create a responsive menu. To give users the ability to see and use the menu at the top of every page I wanted it to be sticky. Foundation itself has a great sticky feature which I wanted to implement within the menu structure provided by the JointsWP starter theme.

In Foundation you can create responsive menus by using the ‘title-bar’ and ‘top-bar’ classes. Depending on the breakpoints you use the ‘top-bar’ will appear on smartphones with a nice toggle menu option while on bigger screens the ‘title-bar’ will appear with menu options inside. These menus are great looking and easy to style.

There was only one thing bothering me. To create a menu that sticks at the top of every page I needed to work with the sticky class. But, just adding the sticky class at the menu attributes didn’t do the trick. I was able to create a sticky ‘title bar’ for medium and bigger screens but the ‘top bar’ didn’t appear to stick at the top on small screens. 

After playing around I figured out a way to get the wanted sticky behavior for ‘title-bar’ and ‘top-bar’. Below you can find the code I used.

Creating the ‘sticky’ menus

Step 1 open nav-title-bar.php

Select in the JointsWP theme file structure parts/nav-title-bar.php and open this file. 

I used the navigation template nav-title-bar.php as the setup for my new navigation template.

As you can see this file uses the Foundation ‘title-bar’ and ‘top-bar’ classes to create a responsive menu. This menu works great with the exception that it doesn’t stick at the top. To change this create a new file in the parts folder and call it ‘nav-sticky-title-bar.php’ 

Step 2 create a new file parts/nav-sticky-title-bar.php

Below you can see the code I used to create the sticky ‘title-bar’ and sticky ‘top-bar’. Before you’ll head over there I’ll give you a small break-up of the used code. 

As you can see I wrapped all elements within a container with ‘data-sticky-container‘. This is necessary in order to get the sticky class working.

Within the outer wrapping container I put ‘title-bar’ and ‘top-bar’ each in their own wrapping containers with ‘data-sticky‘. To get the sticky class working on small screens I added ‘data-sticky-on=”small”‘ to each container.

Finally I changed the order to make sure the ‘top-bar’ is floating on top when you open it on a small screen. As you can see I put ‘top-bar’ first and after this I put the ‘title-bar’.

The new navigation template we’re going to use is called nav-sticky-title-bar.php

Step 3 open the header.php file and point towards the new navigation template file 

In header.php find the line where you can change the navigation template part as shown below.

Find this line in header.php

And change ‘title-bar’ into ‘sticky-title-bar’. 

In header.php change ‘title-bar into ‘sticky-title-bar’ 

Step 4 make some changes to your sass file

To make sure the menu is showing properly we have to put some extra styling to our sass file. You can put the below styling to your ‘_global.scss’ to get the menu working. This is just the basic styling to get you started. You can style the menus with your own settings.  

Step 5 enjoy!

You’re done. As all is well you just created your sticky responsive navigation bars with Foundation and JointsWP. Let me know what you think of this solution!

Deel dit via

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

 

 


Where there is shouting, there is no true knowledge

Leonardo da Vinci