A user in StudioPress forums asked,
I’ve seen several sites (GameSpot, and this WP demo theme) include a menu that includes a logo/image in the top left corner that links to the homepage. Both of those sites I mentioned have the menu appear only after a visitor scrolls down a ways; I have seen several tutorials online about how to do that. But does anyone know how to create a menu that also includes an image like these ones do?
In this article I explain how a fixed/floating/sticky navigation can be made to fade in as we scroll down and fade out when we go back to top of the page.
First, a video demo:
Create the floating menu
Go to Appearance > Menus in WP dashboard and create a custom WordPress menu which you would like to appear in the sticky nav bar.
Notice that the first menu item is a link to site's homepage. We are going to later set the logo image as this item's background using CSS.
Go to Manage Locations tab and assign this menu to Secondary Navigation Menu location.
Add jQuery to fade in and fade out the Secondary nav bar
Create a file named, say sticky-nav.js having the following code and upload it to js directory under the child theme.
To view the full content, please sign up for the membership.
Already a member? Log in below or here.