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
Step 1Click 'Download ZIP' button on the plugin's page. Upload it by going to Plugins > Add New and activate it.
Step 2Go to Appearance > Menus > Manage Locations and assign the Custom Menu that you would to be shown in the Header to Header theme location.
Step 3Ensure 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 4Add this in style.css:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.