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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* ## 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
is this plugin still available, updated and would it work for genesis sample (an older version)? Thanks! Liz
Yes. You can get the plugin here https://genesisdeveloper.me/genesis-widget-areas-generator-plugin/. Plugin will work with any version of Genesis Framework.