Yesterday I launched the new design here on my site, which includes a number of things that are new to my personal theme. In other words, things I’ve never used before.
One of those is what’s known as a “sticky menu”, and it’s something that I really wanted to incorporate when I began the redesign process.
If you don’t know what I’m talking about, take a look at the top of the screen right now. Since you’re reading this, you’ve scrolled down far enough to trigger the sticky menu.
Now scroll back to the top of the page, and you’ll see the sticky menu disappear, giving way to the default header and navigation of my site.
As expected in yesterday’s comments, I was asked how this was implemented. To your surprise, as it was to mine, this is something that is really easy to do.
Adding a Sticky Menu
There’s only a few steps required to create a sticky menu for your site, so go ahead and download the Genesis Sample theme as you’ll need it to follow the steps I mention below. If you are using a StudioPress or custom theme, this will merely serve as guidance.
You’ll need to create a custom menu through the WordPress dashboard, as the sticky menu that is shown at the top of your site will be displaying the secondary navigation.
Moving along, there is 3 sets of code that you need to implement. You can see those at the bottom of this post — functions.php, sticky-menu.js and style.css.
1. functions.php
There are two things you need to add to your theme’s functions file. The first is the function that will enqueue the sticky-menu.js file and the second is the function that will reposition the Secondary Navigation menu at the top of your page.
2. sticky-menu.js
In your theme’s folder, create another folder called js, and then create a new file called sticky-menu.js and place that inside. This file includes the jQuery that will control the fade in/out effect on the sticky menu for your site. Here’s what the path should look like:
genesis-sample/js/sticky-menu.js
3. style.css
Lastly, you’ll see that I’ve provided a bit of CSS that can be applied to your sticky menu to help make it stand out. Feel free to modify or add to this as necessary. To get your menu links to align right, assign them the sticky-right menu class in the CSS Classes option.
Hey Brian,
I added the step above, but the menu only appears when I’m at the top of the page. It disappears as I scroll down. Do you know what I could be doing wrong?
Jeremey
I’d have to see it in action — can you provide a link to the site where this is occurring?
I get exactly the same problem. I have it at my upcoming blog:
http://www.streetisme.com/
Love your tutorials, though. Makes it feel like a breeze – except if something is not working out
How did you get it to work? I have spent hours on this and cannot get it to work.
Any help would be greatly appreciated…
Thanks,
Doug
Nevermind… Just created a fresh blog and tried it and it worked! Thanks!
Brian, I am also getting the same problem. ! I tried to change the hook but not getting the results as expected !
This is so odd. I went back to have a look at my site today to reinstall the whole thing and now it workd.
I think testing the plugin SlideDeck is giving me troubles, because after using it on a couple of sites and even unistalling it, I can’t get Genesis Responsive slider to work. This might be a similar problem. Don’t know for sure, though.
Brian, I am also getting the same problem. ! I tried to change the hook but not getting the results as expected !
I’d have to see it in action to be able to help. Got a link?
I also had the same problem, but it fixes it’s self when you refresh the page.
Is there any way to have this scrolling menu display on computers but disable it on mobiles? As not all of it shows up on smaller screens.
Thanks in advance.
I’m having the same issue, but it is not fixing itself. The menu appears at the top, then disappears as I scroll down.
http://visualfin.com
Did you set your secondary navigation theme location to a custom menu?
Well, I guess i know what I’ll be playing around with today
THANK YOU!!!
Heh, good stuff Heather. Let me know how it goes!
Hi Heather,
I checked your portfolio and i am very impressed about your design ideas as well. Good luck for your business…
But by the way, please don’t call me a smartass, but maybe you should check your loading time. It is a bit slow right now (maybe just a snapshot).
Thank you Rene! Yes, I am actually looking into some other hosting options at this time.
Ahem. Synthesis, by Copyblogger.
Yep, it’s at the top of my list!
Very nice solution for a sticky header. I knew the principle from in-fading ads at the bottom of a page, when you scroll down. I also saw the fading sticky header for social buttons. Also a good thing to use that for.
Nice theme!
Brian, simple jQuery made the trick here. I almost plucked my hair out by trying it using CSS only. Its time to add a sticky menu on my blog. Thank you.
Brian,
Wow, there’s a sticky menu I can get behind!
Thanks for showing how to do that!
Dave
Yeah, when I asked Rafal for some help with it, I couldn’t believe how quickly he came up with a solution.
Interesting!
It’s a stylish way of handling that. SO much better than those ones that awkwardly follow you down the side of a page, like the salesman who is sticking his foot in your door and saying “Look at me!”
Nice. I have just the project to add a sticky menu to. Thanks – as always – for the clear instructions! And loving the new look.
I love it!
I got it working on my own site very easily. – Thank you
One question: I am using responsive Studio Press Minimum Child Theme. I see your sticky menu is responsive…. mine, sadly is not. It must be something I missed in my CSS…
tip or suggestion?
Thanks again,
CB
Thank you. Can’t wait to try this!!! I was blown away by the sticky menu when I first looked at your redesign last night.
This is pretty cool and I’ve had to do this for clients from time to time. There are 2 optional tweaks you can do differently.
First is you can avoid hardcoding the integer that triggers the menu to show up. Typically what I do is set it to the header height (or header height + XX px if desired). So you could do:
var header = $(‘#header’).height();
Then in the code where you have 200, you would simply swap that out for ‘header’. So the menu will truly only show once the header has scrolled off the screen (assuming your primary navigation is in the header widget area). This is also helpful if the size/height of your header fluctuates on different areas of the page.
The other thing is placement of the navigation. Since you’re using position:fixed on the secondary navigation it doesn’t specifically need to be hooked into genesis_before. I usually do the opposite and render it at the very bottom of the page. I suppose it doesn’t matter, but out of habit, when search engines crawl my site, I want my header/title/h1 to be as close to the top of the page as I can, so I just output it at the bottom instead of the top.
Whoops, I need an edit button. Of course I mean if the size of your header fluctuates on different areas of the SITE, not the page
Jared, awesome tip. I’ll be placing the code at the bottom since the code isn’t needed on immediate page load anyway.
Would be a challenge to get this one responsive……
Kind Regards,
Peter Luit
No I see it already is sort of responsive…….
I think it’d be better if we show dropdown menu on mobiles screens, what you say?
Hello Brain
I am using Streamline theme From Studipress for My Blog Can I use Sticky Themes Idea for it?
Also I want to change the Layout of my theme so I can make it Look More Wide where Most of the Space is left empty on the Layout. I want to Make it Broad so that Maximum Area Can be covered And the Layout Looks Wide and Hence completely Filled. Is there any way to do that?
You should be able to use this on any themes.
All that can be achieved by tweaking the CSS of the theme.
@Rudd
I tried to increase the content width from the CSS of the theme, but it creating mess up in whole theme default fine arrangement.
@Rudd
I am having the same Problems
I am unable to Tweak the CSS to Make Sticky Menu
Brian excellent stuff… just trying it out on a local demo site, question… the sample code doesn’t seem to be ‘responsive’ like your site… have I missed anything?
Hard to say without seeing it in action.
Brian, I noticed this site is not responsive and neither is the “sticky header” code.
I have to admit, I am surprised.
Any thoughts on updating this tutorial and your shiny new website, any time soon?
Terence.
Terence, sorry — your comments were marked as spam, and I’m just now seeing them. I’ll take a look at updating the tutorial. As for responsive, I’m on the cusp of another redesign, so the non responsiveness is going to be moot.
Better late than never… shit happens!
Hi,
I just added this to my first Genesis Child theme, But I have one problem. When I’m logged in the admin bar from WP covers the sticky navigation bar. Is there any way to fix this?
Regards,
Andor Nagy
Yes, disable the admin bar.
I found a solution
By adding the following code to the theme’s functions.php, the stick menu will have margin-top: 28px; when the admin bar is active.
function move_admin_bar() {
echo ‘
#subnav { top: 28px; }
‘;
}
add_action( ‘admin_bar_menu’, ‘move_admin_bar’ );
It’s fantastic that you are incorporating some subtle jquery (since Scribble and Modern Portfolio). I like that Genesis is lean and mean and adding little touches like these really add that little detail that raises the experience. I think of these like the little tasty licks a musician plays that you notice but you don’t notice or that dash of spice that makes something taste really good, but you can’t really put your finger on it. Thanks for this tut, keep em comin.
Long time Genesis user, first time commenting. Brian, I love the look of the genesis sticky menu. I’ve added it to my site, which is now on the Modern Portfolio theme, but I can’t seem to figure out a way to remove the hover effect from my logo. Can you give me a hint on what I’m missing?
Here’s the link: http://www.chantillypatino.com/
Also, how can I get that great drop down search bar that you have?
Great job on all the new design elements! Genesis just keeps getting better and better!
Hey Chantilly, so sorry for the delay in response. Your comment was marked as spam for some reason. I’ll try to inspect your site with developer tools to see what’s going on. As for the search bar, that’s probably coming in another post. A little too difficult to explain in a comment.
And thanks for commenting for the first time!
Thanks Brian. I look forward to that tutorial. I was able to fix most of the issues with the sticky menu. My one problem though is that when you hover over my name in the menu, it only reacts with a hover action if you hit the far left corner, or it just flickers. Any ideas on this? Thanks!
Just for grins, what are your thoughts about using text for the logo area, rather than an image? Might work better? That’s what I’m doing.
I would love to do that. My only question would be, how can I keep the same font that’s in my current branding?
I am having the issue, whereby the menu is not acting sticky as it were.
Thank you! How did you add the logo?
I just created a custom menu link, and linked to my homepage.
Hello Brian,
I loved the new navigation. But I was looking more than that. It will be quite not good for small screen devices. (I means devices having low resolution)
A few days ago, I made a navigation somewhat like mashable. You may take a look on http://www.netrival.com.
Waiting for your expert opinion.
I like that mobile menu Anand. There was talk of Studipress adding a mobile menu to 2.0. Is there a tut for the kind you’re using?
Thanks, you liked the navigation!!
Yep, I adapted the navigation from smashing magazine tut (http://goo.gl/gESu0)
thanks for the link Anand
Hi Brian,
Can you tell me how I can insert the Search function?
Mike, this is a bit of a loaded question since I had to write some custom code. Perhaps I can somehow update the post or come up with another one soon.
Just awesome as always man, seriously. I wish I had the skills to do what you do, I really do. I actually started building websites because I am horrible working with my hands. I cannot build a simple bird house. But using your themes, and your tutorials, I can put out customized sites for myself, and clients.
I hope one day I can buy you a cup of coffee man, you’ve made a non-talent like me look awesome
Cheers
I can get it to load, but it starts from the left of the content wrap and goes all the way right.
Running on prose. Any thoughts?
Here’s a screenshot. http://prowebsitesystems.websitesbyvideo.com/wp-content/uploads/sites/6/2013/03/navbar-starts-from-content.png
Fixed;
Anyone else having this issue; Add to the #subnav css
left: 0;
I was looking for something like this only. Menu where a user does need to scroll back to go back to categories. This post saved a lot of time.
Thanks Brian
We’re launching a new look in three days and with a bit of CSS tweaking, this is going to be THE PERFECT FINISHING TOUCH on the new site. Using Genesis and a highly-customized theme that started as the “decor” theme, I didn’t have to modify any JS, CSS or PHP beyond your instructions to get it working. Now just to finalize the look…
THANK YOU!!!
Outstanding Barry, so very happy to hear that!
This is something really cool. Most of the times it is irritating if you have to scroll back to the top for selecting another menu. Another solution was ‘back to top’ button, but this is interesting.
Don’t suppose your new cool design will become a theme sometime? Visually epic.
Thanks Michael, really appreciate that. More than likely it’ll come out as a StudioPress theme in some fashion.
Would purchase in a heart beat. any ETA?
It’ll probably be after Genesis 2.0 is available, so end of May or June at the earliest.
Hi Brian,
It’s a very effect when it’s working well.
It’s not quite working with me yet. I guess the issue is that the targeted subnav menu is repositioned below the header. For this reason, upon activation of the above, the sub menu gets forced to the top of the screen and then disappears upon scroll. Is this a matter of simply changing the hooks? So far I have tried to no avail.
Brian, I don’t think this sticky menu is mobile responsive. Looks whacky on my iphone 4s errr stretched out.
Hi Brian,
Thanks so much for the awesome tutorial. This was the simplest one I’ve found to add this feature. It’s not quite working for me yet though. The top header appears when the page is first loaded, but then when I scroll down it disappears and never comes back. Do you have any idea why this might be happening? I’m very new to building websites so I don’t have too much technical knowledge. Thank you for your help.
Ali
The link to my site is http://www.busterandellie.com .
Thank you again!
Ali
I get a screen that says check back on May 1st for the new site.
My apologies, I forgot that I still had the Under Construction plugin activated. It should show up now: busterandellie.com
Thank you again!
Too many questions. Too little time.
Like *really* how did you get that logo into the menu?
I used a custom menu class to accomplish that. (and sorry for the long delay in your comment — as I mentioned in another one, it was buried in the spam for some reason.)
Any way to make this sticky menue mobile responsive because it’s messing up my blog when viewing it on a mobile phone. (iphone 4s).
I like this menu and looking like I have to sacrafice mobile traffic to use this sticky menu.
Hey Brian. This looks awesome! I was wondering how you added the sticky menu and bam, you had a tutorial! Thanks for sharing this great tutorial, it looks perfect on the site. I just have one issue, is there a way to show the dropdown items on the menu? It’s not showing on my site.
Hey Brian,
I can’t find .js file in the zip. Can you upload the sample zip again?
You need to create the file, it’s not in the zip.
I am shocked how fast and easy this one was. Thanks for a great tutorial Brian!
(Love the new design…waiting patiently for a Studio Press version)
To those who have problem with this sticky menu, the issue is already solved if mobile plugin is used. I noticed this after I activated WPTouch in one of my client’s site.
Awesome! This is just what I was looking for last 2-3 days. I am using one of your theme on my blog and definitely gonna add this very soon. Thanks a lot
. However, are you planning to update existing genesis themes to have this as a optional settings for user? I think that would be great.
When we update themes after Genesis 2.0 is released, there’s a possibility that some/most/all will have this type of feature.
Hey the sticky menu was working fine on my site but then I changed the theme and it did not work. Can you tell why? It happens normally or there is a flaw on my part?
Okay, stumped. How do I move the sticky menu dropdown to where it should be = below the menu?
http://dev.babalucas.com/hellyeroaks
Can’t see the site Rob, does it requite certain login creds?
My bad; it’s live now ~ http://hellyeroaks.com
Nice! Just curious, why would you use JS rather than just CSS for this? Is it just the cute effect that you get with it, or are their other benefits?
Yeah, for the most part. Although I’m sure there’s a way to pull it off with CSS transitions.
Managed to get it working perfectly on my site. Apart from its not responsive on mine for some reason. Either way it still looks great. I tried a semi-transparent background colour also so people can still see the whole screen which I think works quite well. Thanks a lot for sharing all the code!
I am trying to implement this on my own web dev site. Not luck. I am using modern portfolio. My issue with a tutorial like this is having the correct location for the script files. Any help would be great!
It would be interesting to see this adapted to be used as a cta bar in the style of a hello bar. Or maybe instead of a sticky menu we could have a “sticky widget” are on top. Can’t wait for Genesis 2.0, and love the redesign for your blog Brian.
I think I got the sticky menu on the following website correct:
http://jonathancchin.com/view
But I was wondering how I could include his name (logo) on the top left and have the menu aligned right… just like your example?
Thanks