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

Creating Header Middle Widget Area
Creating 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

Site Header
Site Header

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

Leave A Reply

Your email address will not be published. Required fields are marked *