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
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, […]
How to set up a fixed header that shrinks on scroll in Genesis
A member asked: Do you have any tutorials that will help me to make the site header stick to the top of the page and reduce the vertical padding upon scrolling, just like at: www.studiopress.com? I have written about this in the past here: Shrinking Fixed Header in Genesis similar to that in Centric Pro. […]
Floating header on top of featured images gallery slider for CPT single pages in Genesis
In this tutorial I show how we can display multiple featured images (featured gallery) uploaded to entries of a ‘project’ Custom Post Type as a full width slider using Owl Carousel with the fixed header overlayed on top of it. For entries that do not have a featured gallery but having a featured image, the […]
How to display a Fixed Mini Header when Scrolling down in Genesis
Update on January 16, 2017: New tutorial > https://sridharkatakam.com/fixed-mini-header-scroll-inline-logo-nav-menu-genesis/ In a recent customization project I took up, client wrote: The other feature we’d like to implement is a sticky header that shrinks after the page has scrolled very much like the page at http://www.marcuardfamilyoffice.com/en/values In this article I share how a sticky mini header consisting […]
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 […]
Recent Comments