This members-only tutorial provides the steps to add a hero section on the homepage with a transparent site header overlay with the header and logo shrinking when scrolling down. We shall register home-hero widget area set transparent background for the site header set hero image as background covering both the site header and hero section […]
Shrinking Header
Fixed shrinking header in Modern Portfolio Pro with fix for hash links offset
In Genesis Slack chat a user asks: is there a way to get Modern Portfolio to work like a One Pager? The nav isn’t sticky on there. I need it to stick so the navigation will work more like a one pager. Click a menu item and scroll into one of the areas. In this […]
Fixed Header and Nav in Dynamik with Shrinking Header on scroll
In my Facebook group a user asked, Hi Sridhar, first of all, thank you so much for all your great tutorials!! I have learned so much from you. I’m stuck with some sticky stuff and hope you can help. A client want both the header and primary nav bar to be sticky, and at the […]
Fixed shrinking header in Kickstart Pro
Continuing on the series of tutorials on fixed shrinking header in Genesis today’s is on how to implement it in Kickstart Pro. Step 1 Create a file named say, global.js in js directory having the following: To view the full content, please sign up for the membership. Already a member? Log in below or here.
Fixed shrinking header in Showcase Pro
In the comments section of How to display a Fixed Mini Header when Scrolling down in Genesis, a user asked: Showcase Pro does not have a header right widget area, and Iām not finding a good article to reference to register a header right widget area. We can customize Showcase Pro such that primary nav […]
Fixed shrinking header in Workstation Pro
In this tutorial I share the steps for making site header in Workstation Pro fixed and reducing its height with a smooth animation as the user scrolls down. Scrolling back to the top of the site will animate the header back to its original height. We shall limit this behavior to screen widths > 880px, […]
Fixed Shrinking Header with inline logo and menu in Genesis
In this article I share the steps for customizing Genesis Sample to replace the background logo image with an inline logo managed via the customizer relocate primary nav menu to header right make the header fixed so it remains in view all the time and shrinks (incl. the logo) on scroll (from 1024px and above, […]
Recent Comments