Having a persistent, sticky header area or navigation can be a useful design element in some websites. In this article I provide the code on how we can make Header or Primary Navigation or Secondary Navigation in Genesis sticky/fixed. While I’ve used Genesis Sample child theme for the demo site, the process (with few tweaks […]
Search Results for: sticky menu
Reply To: Change Page Content margins
Hey thanks for all your help and sorry about my random posts on your other threads. I’ve figured out some of those things. I tried what you suggested here and it didn’t change the margins. I want to expand the place where I have content on the page. It’s a full width page but the […]
Relocating Primary Nav and Fixed Nav on Scroll in Smart Passive Income Pro
This tutorial covers the following customizations in Smart Passive Income Pro: moving the primary nav from below the header to above adding image logo (changeable via the customizer) to the primary nav registering a custom fixed nav that is initially hidden and appearing upon scrolling down. This fixed nav will also show the logo at […]
Add a background color to site-header as the page gets scrolled down
Hi Sridhar, I was looking for a way to add a background color to my site-header as the page gets scrolled down. I’m using your one-pager genesis theme and came across the tutorial “Medium-like Full View Featured Image in Genesis”. I was able to change the header-fade.js file to almost achieve the effect I want. […]
Home Hero Overlay with Shrinking Site Header in Genesis
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 […]
Header Search in Genesis
This tutorial provides the steps to add a magnifying glass search icon at the right of Primary nav menu in Genesis, which when clicked, will show a search box covering the entire site header based on the code from Monochrome Pro. Screenshots: While the tutorial has been written for Genesis Sample 2.6.0, it should work […]
Reply To: How to push footer to bottom only when there is little content or to load after?
I have now moved all my modifications from the Minimum Pro version 3.0.1 to Minimum Pro 3.2.1, the latest version. I didn’t want anyone to try to solve something related to an old theme version. If I browse exp.silent.se with Edge and the jQuery based sticky footer solution then it will look okay the first […]
Inline Site Header and Primary Navigation in Pretty Creative
In Pretty Creative theme, the Primary Navigation menu is moved above the site header out of the box. In this tutorial, I share the steps to wrap the site header and primary nav in a custom div and float site header to left and primary nav to the right on desktops. We shall also make […]
Soliloquy slider below header on Showcase Pro’s homepage
In the comments section of Soliloquy slider below header on Pages in Showcase Pro, a user asked: Is it possible to do this as well for the home page in Showcase? I’d like to have the header/menu fixed with the white background on all pages versus the sticky effect when you scroll. This tutorial provides […]
Fixed nav on scroll with button for full screen search in Genesis
In Genesis Slack chat a user asked, Is it possible to get this tutorial, https://sridharkatakam.com/slide-search-box-full-screen-overlay-genesis/ to work with this one https://sridharkatakam.com/how-to-make-primary-navigation-in-genesis-sticky-on-scroll-for-desktops-and-mobile-responsive-on-handhelds/? In this tutorial I share the steps for adding a magnifying glass search icon to the right of Primary nav in Genesis which when clicked opens a full screen overlay showing a search field. […]
Recent Comments