A user emailed me asking,
So, I'm wanting to place a widget area on both the left and right side of my primary menu. I've been able to place two widget areas using this code: https://sridharkatakam.com/adding-simple-social-icons-navigation-bar-genesis/
But, I'm unable to get one to float left of the primary navigation menu.
I have my logo centered within the primary navigation menu already, now I just want to float a widget on either side of the menu.
I'll attach a photo of what I'm attempting to do. I tried adding a css class to each widget, but all I see is the aside class.
In this tutorial, we shall
- register a custom Header Left widget area
- rewrite the site header so it has the site title, header left widget area, primary nav menu and header right widget areas in the HTML
- hide the site title on larger screens
- add Home menu item in the middle of nav menu and set the header image as its background
- hide the Home menu item on smaller screens
to have a left widget area, nav menu and right widget area in Genesis.
Structure of the HTML output:
While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis theme.
Edit child theme's functions.php.
a) Decide the size of your image logo and specify twice its dimensions in the custom header add theme support function call.
In this example, I would like to display the logo 100 x 100. Hence I am going to change the width and height to 200 each.
// Add support for custom header. add_theme_support( 'custom-header', array( 'width' => 600, 'height' => 160, 'header-selector' => '.site-title a', 'header-text' => false, 'flex-height' => true, ) );
// Add support for custom header. add_theme_support( 'custom-header', array( // 'width' => 600, // 'height' => 160, 'width' => 200, 'height' => 200, 'header-selector' => '.site-title a', 'header-text' => false, 'flex-height' => true, ) );
Go to Appearance > Header and upload/select your logo.
b) Locate the/any function hooked to
wp_enqueue_scripts and add the following in it:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Nice work as always. Thank you .
Ditto that! Nice, Sridhar!
This is exactly what I need for a client site I am now working on. You are the bomb diggity!!!
Hey bud, just wanted to let you know I used this on a new ecommerce site im building
I just noticed you left off the code to add a new widget area
Thanks, added it.
Any chance you can adjust or update this tutorial to work with Genesis Sample 2.6.0 Mobile First Theme.