In Genesis Slack chat a user asks: I would like to move the secondary sidebar into the content sidebar wrap, so I have sidebar/content/sidebar within the wrap. Nothing I’ve tried so far seems to work. Any help would be most appreciated. By default, the secondary sidebar is present outside div.content-sidebar-wrap in Genesis 2.5.3. By adding […]
CSS
Unboxed site-inner in Cafe Pro
This tutorial provides the CSS to make the content of inner pages (div.site-inner) in Cafe Pro full-width i.e., take up the full available width in the browser viewport. Before: After: Both Flexbox and CSS Grid based solutions are provided. Flexbox is recommended for maximum browser compatibility. CSS Grid method does not work in IE11. Tested […]
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 […]
Mega menus in Genesis
Updated on 31 May 2022 In the members-only forum, a user asked: Is there a good way to create a Genesis mega menu without using a plugin (such as UberMenu, which is great but very resource-intensive)? Ideally, I’m looking for a solution that is primarily CSS-based, where a client can use the regular WP Menu […]
How to arrange widgets in columns in Infinity Pro using CSS
In the Genesis Facebook group a user asked: Does anyone know of any links to tutorials on how to make a widgeted area on the Front-Page in Infinity Pro to be 1/3rd width and 2/3rd width columns side by side? I have been going round in circles with it all day and my brain is […]
Horizontal Submenu in Genesis
Looking to display submenu items horizontally when a menu item is hovered upon in Genesis? Screencast: We can set the .sub-menu to be 100% wide and anchored to the right so the submenu items appear full width with the first item in the submenu aligned at the left edge of the screen. The trick to […]
How to set up a Sticky widget in Genesis
Did you know that it is possible to make any element sticky or fixed as it is scrolled to and have it “bottom out” so it never leaves its container (no more worrying about accidentally covering the footer) using CSS alone? Thanks to Tim Jensen, today I learned about position: sticky which is quite powerful […]
Inline hamburger menu icon in Minimum Pro
In Minimum Pro, hamburger mobile menu icon appears below the title area from 768px and below. We can add a little bit of CSS code to position the mobile menu icon to appear at the right side of the title/logo and have the navigation menu slide open below the title area + menu icon. In […]
object-fit: cover for images
In a recent website that I developed, the requirement was to display an image (via an image widget – i.e., not a background) next to an opt-in form and have the image automatically take up as much height as the form. After setting the display of the parent container of the widgets to flex, both […]
Animated Hamburger Menu Icon in Genesis
In Genesis (Genesis Sample, to be precise as well as most other child themes from StudioPress), tapping on the hamburger menu icon at smaller screen widths will toggle the responsive menu and the menu icon does not change i.e., remains a hamburger. It is possible to customize this such that tapping the mobile menu’s icon […]
Recent Comments