Creating Header Middle Widget Area between Site Title and Header Right Widget Area

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

1. Navigate to Appearance -> Widgets
2. You will get new widget area “Header Middle”
3. Drag&Drop the required widget in this area
4. 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%
  }
}

Output