The general practice for showing a WordPress menu in Header of a Genesis theme is to populate it with a Custom Menu widget in the built-in 'Header Right' widget area. If you would like to additionally display say, social icons or other stuff to the right of this custom menu, you would normally put that content in a text widget below the Custom Menu widget and write CSS to make the custom menu and text widget's content float side by side.
In the above scenario the resulting HTML markup can be optimized by using Gary Jones' light-weight Genesis Header Nav plugin.
In this article I show how we can use Genesis Header Nav plugin to display the following at the right side in .site-header.
- WordPress menu
- WordPress menu + social media icons
- WordPress menu + cart icon with number of items and total cost (of products in the cart) in nav menu when using WooCommerce
WordPress menu
Step 1
Click 'Download ZIP' button on the plugin's page. Upload it by going to Plugins > Add New and activate it.
Step 2
Go to Appearance > Menus > Manage Locations and assign the Custom Menu that you would to be shown in the Header to Header theme location.
Step 3
Ensure that 'Header Right' widget area is not populated. Note: You can very well use this widget area along with the Genesis Header Nav plugin but we are not going to do so to keep things simple in this tutorial.
Step 4
Add this in style.css:
Thanks Sridhar! Just what I was looking for. I’ll try it on my web. Cheers
It doesn`t look how it should be on the page I am working on: almidonresistente.com
Do you know how to fixe that?
Thanks
Hi Sridhar,
I have been trying in vain for TWO DAYS to get social media icons to be on the same line as menu/custom menu in Genesis Nav bar / Header (I’ve tried both). I’m going crazy since as you can see the SM icons are always on a line below. This does not happen in Thesis framework!
Above you say: “…If you would like to additionally display say, social icons or other stuff to the right of this custom menu, you would normally put that content in a text widget below the Custom Menu widget and write CSS to make the custom menu and text widget’s content float side by side.” Would you mind suggesting what CSS would do that? I think I’ve tried most everything but obviously don’t get WP CSS!!
Thank you so much, your tutorials are so fantastic!!! Otherwise I will try this header plugin.
Lili
Thanks for this tutorial! Is it possible to change the cart icon with a custom image?
You can replace the code that displays the Font awesome cart icon in http://pastebin.com/raw.php?i=LkZB9vfc with HTML code to display your custom image.