In this article I am using one of my super cool plugin “Genesis Widget Areas Generator“. See the all steps below:
Creating The Header Middle Widget Area
Adding Content in Header Middle Widget Area
- Navigate to Appearance -> Widgets
- You will get new widget area “Header Middle”
- Drag&Drop the required widget in this area
- Now refresh your site
Adding Some CSS in style.css file
I am adding the following CSS in style.css file. You will adjust the CSS as per your site design.
/* ## Site Header Widget Areas ------------------------------------------------- */ .site-header .widget-area { float: right; margin-top: 0px; text-align: right; width: 38%; } .site-header .header-middle { float: left; margin-left: 15px; width: 38%; } @media only screen and (max-width: 800px) { .site-header .header-middle, .site-header .widget-area { float: none; margin: 15px auto 0; width: 100% } }