Update on March 26, 2017: Added steps for positioning the sticky at the right edge of the browser. This tutorial provides the steps to display a vertical tab to the left side of browser edge in Genesis which when clicked, will slide out a side panel having widget(s) of a custom widget area. Clicking on […]
fixed
How to implement jQuery Stick ’em in WordPress
jQuery Stick ’em is a jQuery plugin for making content sticky/fixed/persistent after the user has scrolled past the element. It has parameters for defining the item that should be made sticky, container that the sticky item to be contained in, offset and start values. In this article I show how jQuery Stick ’em can be […]
Shrinking Fixed Header in Genesis similar to that in Centric Pro
Update on February 11, 2016: Click here for a newer tutorial on this topic. One of the unique features of the just released Centric Pro, a Genesis child theme from StudioPress is the header (text logo size) that shrinks in size as the page is scrolled down and always remains visible. In this article I […]
How to fade in last sidebar widget as it is scrolled to and make it fixed in Genesis
Andrea asked, @srikat Any chance of a tutorial? Client wants bottom sidebar widget to fade in and stick like on Pat Flynn’s blog: http://t.co/5leVweR1zI— Andrea Whitmer (@awhitmer83) January 30, 2014 In this post I am going to share a way of doing this using Waypoints, Animate.CSS and StickyJS. Here’s the overall flow: Opacity of the […]
Using Waypoints Sticky Elements to fix elements to top of page upon scrolling in WordPress
In the past I showed elements like header and navigation can be made to stick to top of page when the user scrolls past using jQuery script and jQuery.Pin. In this article I show how jQuery Waypoints Sticky Elements shortcut can be used to do the same. Upload waypoints.min.js and waypoints-sticky.min.js to child theme directory/js. […]
Home Featured section with a fixed background in Dynamik
To view the full content, please sign up for the membership. Already a member? Log in below or here.
How to make Utility Bar and Header fixed in Agency Pro
To view the full content, please sign up for the membership. Already a member? Log in below or here.
How to make Header and Primary Nav fixed in Minimum Pro
To view the full content, please sign up for the membership. Already a member? Log in below or here.
Displaying a fixed navigation menu upon scrolling down in Genesis
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 […]
How to make Utility Bar and Header fixed in Minimum Pro
Carrie Dils has a great tutorial on adding a Utility bar above the header in Genesis here. When this is implemented in themes like Minimum Pro that have a fixed header, as the page is scrolled down a gap equal to the height of utility bar will appear above the fixed header and the bar […]
Recent Comments