Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 8 – Example #5 – Make a Sticky Top Menu in Genesis

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

We’re going to get a little bit more complicated in our examples of how to use PHP to customize the Genesis theme. In example #5 we’re going to make this menu that we changed the position of earlier sticky so that when you scroll through the pages it stays up at the top.

Studio Press Tutorials Method

There is a little tutorial at StudioPress on how to do that and we’re going to use parts of it. In the first place, we’re not going to put it in our functions.php file because, as I said in my introduction, if we put it in our functions.php file we can’t upgrade.

Move the Secondary Nav Menu

This tutorial suggests that you essentially move the menu into the place that you want and that’s up at the top for us. That’s the first thing to do, move the secondary nav menu up to the top.

And so that’s what this is, remove_action ‘genesis_after_header’, ‘genesis_do_subnav”. They put genesis_before that’s interesting. Instead of ‘genesis_before_header’ they’re using ‘genesis_before’ and since we’re making it sticky that probably makes sense. Doing it that way means that it’s not inside of any of the wrappers.

Create and Add Javascript File

The next thing they have you do is create a javascript file. They call it sticky-menu.js. You put this inside of that file and then add it. The system of adding it is a process called enqueue script. We’re going to talk about this a bit but we’re not actually going to do it this way, not exactly this way.

What is Enqueue Script and How to Use It

We’re going to start off by looking at “wp enqueue script”. Wp enqueue script is a means of adding a javascript to the correct on the page. When I started in WordPress, before there was such a thing as enqueue script, the way people put scripts on a page was to write them either to the head or foot of a page in a section called print scripts.

Issues with Conflicting jQuery

What would happen is that you might have 3 different plugins that all use jQuery and so everybody would add jQuery and you would have potentially conflicting versions of jQuery being added to your site and things sometimes just didn’t work because of the conflicting scripts.

There are lots and lots of shared scripts in these kinds of things. Lots of plugins use jQuery, jQuery UI and all kinds of other things so there is opportunity for conflicting scripts. Because of this WordPress came up with this system called enqueue script which allows as many plugins and themes as want to call the script as possible.

It doesn’t matter how many times the script is called. It’s only inserted once and so you can say to yourself, I know I need jQuery so I’m going to enqueue jQuery but you also know that by using enqueue scripts to enqueue jQuery, jQuery will only be added once and it’s going to be added at the right place.

Where to add the Scripts

There are two places that any script can be added generally speaking. You can either add them in the head of the document or you can add them at the foot of the document.

Typically, you want to add most scripts at the foot of the document because putting it in the head of the document will slow down processing of the page. So you generally want to put it in the foot of the document so that the page can begin to render even without the javascript in place.

However, some scripts need to be loaded in the head because the page requires them in order to render. Generally speaking, if all of the scripts that need jQuery are in the foot then jQuery can be loaded in the footer but if there’s a script that needs jQuery that’s in the head then jQuery needs to load in the head and needs to load before that script.

Order of Script Loading Matters

The order of script loading also matters. If I’ve got a script that needs jQuery in order to be loaded, jQuery has to be loaded first. If jQuery gets loaded after my script then my script doesn’t see jQuery and doesn’t work. So there’s both a location and the order matter and it gets to be kind of complicated.

WP Enqueue Script

We’ve got this wp enqueue script and this is a WordPress function with it has these parameters here.

  • The Handle
  • The Source
  • Dependents

It has the handle which is essentially a nickname for the script. It has the source which is the location, the URL that the script exists at. It has dependents which are what other javascript needs to load in order for this to work. That’s what it depends on.
I went through that explanation because what we’re working on here requires jQuery.

So if we were enqueuing our script like this, we would have jQuery as a script that we depend on then you can specify a version of the script that you’re currently using and you can specify whether or not your script can load in the footer. These are your different parameters for your script.

Re-visit the Studio Press Tutorial

So if we come back and look at Studio Press’ tutorial here, they’ve got wp_enqueue_script. They gave their script a little name ‘sample-sticky-menu’. The URL of the src is get_bloginfo ‘stylesheet_directory’. Then they said put it in a folder called js and call it sticky-menu.js.

So this is the URL or the src, the source, and then it is dependent upon jQuery. So it has an array of dependents and the dependents have to be registered scripts. We’re not going to talk about script registration because generally speaking you don’t have to worry about it but jQuery is a registered script.

How to Specify Loading in the Head or Foot

All we’re doing here is putting jQuery’s handle in so that’s its dependent. Here’s is its version and then they’re not saying anything about whether or not it needs to be loaded in the header or the foot so it’s going to be loaded in the head. If you don’t say anything then load in footer is false. So that’s the way they’re saying to do this.

jQuery Handles

Let’s come back over here and look down at the bottom, these are the handles. WordPress has lots of scripts that come with it. This is a whole list of the scripts that WordPress has inside of its core that come along with it. Then these are the handles for that.

So jcrop and jquery is the handle for jQuery, jquery-form, jquery-color, jquery-masonry, all of these scripts already exist inside of WordPress. If you’re doing something that is dependent upon them all you have to do is specify their handle in that dependent section.

That’s what they were doing with jQuery in this tutorial. They’re saying our little script is dependent upon jQuery so we’re going to say jquery as one of the scripts it depends on.

This dependents means that jQuery is going to load first so WordPress looks at all the scripts and if any of them are going to load in the head and it’s dependent on jQuery then WordPress makes sure that jQuery gets loaded ahead of it in the head. So that’s the beauty of this little system here.

Typical Hook to Enqueue a Script

The typical hook that you would use to enqueue a script is ‘wp_enqueue_scripts’ and so the way they’ve got this is add_action ‘wp_enqueue_scripts’, and then the name of their function ‘sp_enqueue_script’. That’s what they’re doing here.

Using a Different System to Keep the Site Faster

We aren’t going to do it this way and the reason is because this ends up requiring an http action and the script is tiny. This is all the script there is. In my mind, there is no reason to slow your site down with an http request when you can simply embed this code in your webpage so that’s what we’re going to really do.

Using Their Code but Not Their System

We’re going to use their code but we’re not going to follow their system because I don’t think it’s actually very good practice. I think it’s much better practice in this case, for you to include this directly in the body of the page rather than making it a separate script file that is enqueued.

Create the Function for the Sticky Menu

So what we’re going to do here is create a function and that function is going to be function byob_sticky_menu_script. Now, remember that they said that this was dependent on jQuery so we need to make sure that jQuery gets added at the right place.

The Script

So what we’re going to do here is enqueue script, wp-enqueue_script but the script we’re going to enqueue is jQuery. Let’s go back and look at these parameters. Actually, all of these parameters for enqueue script are optional. Everything is optional except for the handle.

So wp_enqueue_script could just be enqueue script with handle and in this case, since jQuery is already registered with WordPress we don’t need to give it an src. jQuery itself doesn’t have any dependents.

We don’t have to worry about a version and we’re not going to specify in footer because we’re actually going to let jQuery be loaded wherever jQuery needs to load. So all we have to do is say ‘jquery’. That’s our enqueue script. That’s the only thing we have to do because we don’t need to specify anything else to add jQuery.

The next thing we want to do is add the script that they have. Again, we have to leave PHP because that script is HTML or as far as you’re concerned it’s actually javascript or jQuery script but it behaves like HTML.

So we’re going to have an opening script tag and a closing script tag and then come back over to their tutorial and grab their script. Let’s get this stuff indented correctly.

Add the Hook

We’re enqueuing a script. We’ve got our script and this script actually works just fine in the footer. And the hook that we’re going to hook this to is ‘genesis_before’. So add_action ‘genesis_before’, which is the very last Genesis hook on a page. It’s just before the end of the closing body tag. Then the byob_sticky_menu_script.

Add CSS for the Sticky Menu

And then we’re going to save it, upload it, reload it. Now, nothing is happening yet. Well, it sort of happens. You can see it disappearing there. The problem is we need to add the CSS that also makes this work.

They provided us with the CSS so let’s just view it raw again and just copy their CSS. Now, we’re going to come back over to my plugin and add it to the CSS editor in my plugin, the Child Theme Editor plugin. We’ll just paste that there.

Review the Sticky Menu on the Site

Now we can just save our Custom CSS and then come over and refresh this. See how the menu shows up here? It’s being hidden under the admin so you don’t see that secondary menu anymore because it’s deliberately intended not to be seen.

Add a CSS Rule to Change the Location on Certain Pages

But when you scroll up you can see it’s trying to show up. So what we need to do is add our own rule to get it down below the admin bar.

As you may know WordPress adds a variety of classes to the body tag. So if we look at the body tag here, one of the classes it automatically adds is admn-bar. It will add that when the admin-bar is being shown.

So what we’re going to do is we’re going to edit our CSS code here add a rule for when it’s the admin-bar. Let’s come down here and look at this. You can see that .nav-secondary is fixed in position. It has a top of 0.

What we really need to do here is just take this and in front of .nav-secondary we’re going to add .admin-bar and then we don’t need anything except for top. It’s admin-bar is 32 pixels tall so top we’re going to do 32px.

In this case, what it says is stick that menu to the top and what we’re saying here is in the case of a page that has the body class of admin-bar, stick it to the top but bring it down 32 pixels. Let’s save our Custom CSS and now you can see the menu dropped down.

Make Color Modifications

Unfortunately, our colors are off as well. So we need to make some color modifications. For example, we need to make our text here is white and we’re also going to want to change the color of the drop down menu and that sort of thing.

Change Text Color

We’ll just come back over to our editor here and in our .genesis-nav-menu a, this is where you want to set the color for the regular link. And that is just color:#fff. Let’s save that and take a look at it. There we go, so we don’t see the menu till we scroll down. Now that we scroll down we see the menu.

Change Background Color

We made that text color white but the background is white so you can’t see it anymore. Now we need to change the background color to this dark grey #333 color. What we’re looking for is the .sub-menu a background color. So we’ll come down here to .nav-secondary .sub-menu a and this is where we’re going to add the background color #333.

Note that if don’t spell it right it tells you. This has error checking essentially so if you’ve got an error in here some place you’re going to see that in the coloration.

Change Border Color

Let’s refresh this now and we’ve got that background color but we also have border problems to address. If we look at this one, it’s got a nice darker border which is the color #222. I already know that but you can see that here border-color:#222.

This is on .nav-primary .sub-menu a. Essentially we want to find corollary to that which is actually where we want to put a border color. So, border-color and that worked everywhere except for the top of the submenu and so we need to come down here to this without the link. It’s no a and then all we need is border color and it’s border-top-color. Save that, refresh this and it’s working.

Remove Extraneous Code

The other thing I want to do is get rid of extraneous code they have that doesn’t apply to anything. If you look down here they’ve got this .nav-secondary .sticky-right and @media only screen .sticky-right stuff. Let’s get rid of that.

I tried to figure out what on earth they meant by that, couldn’t figure it out and just decided that we’d just throw that away. There’s no reason to have code in here that doesn’t mean anything. Let’s save our Custom CSS and refresh this. It goes away at the top but when you scroll down it comes back.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment