The up and down arrows for the mobile sub menu toggles in Genesis uses Dashicons. This tutorial provides the steps to replace it with CSS-only approach. While the tutorial has been written for Genesis Sample 2.6.0, it should work with a few adjustments in any Genesis theme. Step 1 Edit child theme’s functions.php. Inside genesis_sample_responsive_menu_settings() […]
CSS
Sub menu indicators in Genesis
In the past I wrote an article titled Adding nav sub menu indicators in Genesis using Font Awesome. This tutorial provides the steps to add submenu indicators without using Font Awesome in Genesis. While the tutorial has been written for Genesis Sample 2.6.0, it should work with a few adjustments in any Genesis theme. Step […]
How to show the text MENU next to hamburger icon in Showcase Pro
This tutorial provides the steps to display the text MENU to the right of hamburger menu icon in Showcase Pro 2.0.2 from 800px and below. https://sridharkatakam.com/wp-content/uploads/2018/06/ScreenRecording_06-19-2018-22-38-53.mp4 Here’s how: Edit style.css. In the 800px media query, change a) button.menu-toggle { display: block; float: right; background: none; padding:0; overflow: hidden; width: 50px; height: 50px; position: relative; } […]
How to show Tagline in the title area in Genesis
Looking to display the site description text below the site title in your Genesis site’s header? Chances are, it is present in the HTML markup but hidden via CSS. For example, in Genesis Sample 2.6.0 locate .site-description, .wp-custom-logo .site-title { border: 0; clip: rect(0, 0, 0, 0); height: 1px; overflow: hidden; position: absolute !important; width: […]
Genesis Sample Sass
Christoph Herr has a modular starter Genesis child theme with Sass partials called Prometheus. I have taken just the Sass part from Prometheus, simplified it a bit and added a couple of partials for homepage and custom CSS. So if you are looking for Sass version of Genesis Sample 2.6.0’s style.css, click on the button […]
How to always show responsive menu in Genesis Sample
In Genesis Facebook group a user asks: Hi Everyone, Using Genesis Sample child theme and I want to always display the mobile navigational menu – even on desktop. I’m having a hard time finding a tutorial for that. Thanks! And the answer is to simply remove the relevant CSS in the 960px min-width media query. […]
How to swap the position of title area and nav menu for RTL in Genesis
In the members-only forum, a user asked: Hello all, My one frustration with WordPress themes today is the lack of full integration with RTL languages. Can someone or you Sridhar please advise on how to best implement this on Genesis, how to change the logo/header, so that the logo is on the right of the […]
Equal height Content and Sidebar in Genesis Sample 2.6.0
Looking to set the same height for content and sidebar in Genesis? Flexbox to the rescue. This tutorial provides the code change to replace floats with Flexbox in Genesis Sample 2.6.0’s CSS for equal height (determined by whichever is taller) content and sidebar columns. In the 960px min-width media query inside style.css, replace /* Content […]
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 […]
Recent Comments