—
by
In this tutorial, i’ll show you 3 different ways to add 3 widgets side by side in the header of a StudioPress child theme.
I went with option #1 and everything lines up nice. If I need to have all the images the same size, is it just a case of adding the width and height to the .featured-widgets a img? or should I be adding something to the functions file?
Also, I cannot get the titles to center. I added ‘center’ to the .featured-widgets . widget title in the CSS – I even made it ‘important’, but nothing. Any suggestions?
You could try using a height or padding to each element. Try text-align: centre;
Amazing-ness. Thanks, Brad. Just what I was looking for to get a centralised logo with contact/social details either side.
Here I am again. Everything looks great but now the guy (client) only wants the header widgets to show up on the home page. Is there a way to do that so it won’t show on the other pages?
Yes. Install a plugin like Widget Logic
Awesome! Thanks.
BEST GENESIS POST EVER! This works perfectly right out of the box on the Enterprise Pro HTML5 theme. You have saved me a solid week of pounding my head on my desk while trying to create a much less elegant solution than yours. You are my new hero! Best regards and many, many thanks for the great work – Suuzen
Brad,
Thanks for your help.
That worked perfectly. You make it so easy for those of us who are not coders.
Appreciate it.
You’re welcome Anthony.
I added this code:
[code]
remove_action( ‘genesis_header’, ‘genesis_header_markup_open’, 5 );
remove_action( ‘genesis_header’, ‘genesis_do_header’ );
remove_action( ‘genesis_header’, ‘genesis_header_markup_close’, 15 ) ;
[/code]
and removed the margin left from the CSS then added a 3rd parameter to the action like this:
[code]
add_action( ‘genesis_header’, ‘featured_widgets_inline’, 12 );
[/code]
There’s many different variations and the code will need tweaking depending on what you want.
Hi Brad,
A great tutorial and exactly what I need to get theme looking the way I want.
I am testing locally using Outreach Pro theme.
The 3 widgets are appearing vertically in an area between Nav bar ( Nav bar re-positions correctly) and Header which shows title text.
Any help appreciated.
If you wanted it to look like this:
You can simply add a 3rd parameter like this:
[code]
add_action( ‘genesis_header’, ‘featured_widgets_inline’, 15 );
[/code]
No need to modify or add any more PHP.
You would also remove the margin left from the CSS.
Hi Brad, Can this be changed to keep the logo and add 2 widgets to the right of the logo?
Yes but you’ll need to use the correct CSS code to make it work.
You don’t need 2 widget area’s to display 2 or more widgets in that area.
You can float the different widgets to the left and right using one widget.
Just FYI, I fixed it. I removed the repositioning of the primary nav menu in the original php code and replaced it with yours so there was only one instance instead of two. Thanks so much. I love the configuration.
Hello Rebecca.
Its hard to work out what the problem is sometimes without access to the PHP code so i’m glad you worked it out yourself.
Whoops code didn’t show up.
id=”menu-main-menu-1″ class=”menu genesis-nav-menu menu-primary
The widget areas worked perfectly. I love it! For some reason I’m getting 2 main navigation areas though. I like the one at the top of the page. How do I get rid of the 2nd one? (not a coder)
Looks like you have created 2 primary menus so you will need to delete one of them.
I checked and there is only one menu. I deleted it completely and then re-added it but both menus still show. It’s still giving me an option to create a second menu so I know there’s only one. The site was previously using Canvas from Woo but that was using the custom menu as well. Not sure how to get rid of it.
When i inspected your menu’s using Firebug, they both used the same i.d however 1 had a 2 at the end so you need to remove that from trash or wherever it is.
Another option is to hide it using CSS code using display: none;
I copied the php code from the raw you provided and replaced it in my functions php at the end of the original code but the 2 navs are still there. Where would the 2 be? Sorry I’m not a coder and didn’t want to make a mistake. Did I need to remove anything from the original php? Should I send you my functions php code?
If I use the CSS option where would display:none go?
You will need to grab the i.d class for your nav menu and add like this in your style.css file:
[code]
#nav-primary-2 {
display: none;
}
[/code]
This is example code only and will only work once you use the correct i.d class for the menu you want to remove.
Thanks for all your help and sorry to be dumb about this. This is what I see on the bottom menu using firebug
I’ve tried different combinations of trying to figure out the nav menu id but must be writing it wrong. I also saw this in CSS
.nav-primary:after
I know it’s just one little tweak and then it will be perfect.
Love this brother, heading over to a demo site to play around. Would be nice to see the same thing but maybe a featured section pulled in automagically.
Off to play!
Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.
Leave a Reply
You must be logged in to post a comment.