This members-only tutorial provides the steps to display primary navigation menu at the left, title area in the middle and secondary navigation menu at the right in Genesis Sample. Between 960px and 1399px (inclusive) we shall center the site header elements one below the other. 959px and below, it will appear as usual. with the menu expanded Tested in Genesis Sample […]
CSS Grid
Split Nav Menus in Navigation Pro
This premium members-only tutorial provides the steps to reposition the secondary menu from the footer to header upload an image logo use CSS Grid to position the primary menu at the left, logo image in the middle and secondary menu at the right set search icon to be added to the secondary menu instead of […]
Split Nav in Genesis with logo change on scroll
This members-only tutorial provides the steps to show a centered image logo with primary nav on its left and the secondary nav on the right in the site header of Genesis Sample. We shall show a different logo image on scroll with a smooth shrinking effect. Before scrolling: After scrolling: While the tutorial has been […]
Comment Form fields in columns using CSS Grid
This tutorial provides the code to display Name, Email and Website inputs in a left column and Comment textarea and Submit button in a right column using CSS Grid in Genesis. The fields will be set to appear one below the other 600px and below. and when the name, email and website checkbox does not […]
CSS Grid with Float Fallback
Sample CSS for a 3-column grid with the number of columns changing to 2 from 768px & below and to 1 from 500px and below with floats fallback for non-supporting (read, outdated like IE) browsers. Given this HTML: the CSS using CSS Grid for all modern browsers with float fallback for IE: .videos { display: […]
Left aligned Site Title with Centered Navigation in Genesis
This tutorial provides the CSS to keep the site title aligned to the left and horizontally center the nav menu within the site header’s wrap in Genesis Sample 2.6.0. Using CSS Grid Works in all modern browsers. Does not work in IE 11. Title area and primary nav will continue to appear left and right […]
Jetpack-like Related Posts without Jetpack in Genesis
Jetpack’s Related Posts module has a “large and visually striking layout” option that shows related posts at the bottom of content like this: This tutorial provides the steps to show a similarly styled three related posts below the comments section on single posts in Genesis based on the code by Nick Croft and improvements by […]
Nav menus in columns in a full screen modal upon clicking a floating hamburger icon in Sixteen Nine Pro
This tutorial provides the steps to implement Infinity Pro’s Offscreen Content widget area in Sixteen Nine Pro. We shall place a Navigation Menu widget (and a Text widget) in the Offscreen Content widget area and use CSS Grid to arrange the menu item groups in columns in the full-screen modal. Screencast: https://sridharkatakam.com/wp-content/uploads/2018/03/sixteen-nine-pro-offscreen-widget-area.mp4 While the tutorial […]
Image Grid on Archives in Genesis
This tutorial provides the steps to display featured images of entries (posts) on archive pages in Genesis in a 3-column grid using CSS Grid with Flexbox fallback (for oldIE). For entries that do not have a featured image set, the first attached image will be shown and if that’s not present, a fallback image. The […]
Breaking out with CSS Grid in Genesis
This tutorial provides the steps to create and use a custom page template for a fixed width content with full-width images (or any other content) based on this article from cloudfour in Genesis. While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis theme. Step 1 […]
Recent Comments