The header widget area allows you to put any kind of widget in it and it will show up on the right side of the header area.
This leaves some space in the center of the header. If you would like to use this area by splitting the header in three, try the following steps:
1. Create a new Hook Element:
2. Set the hook to header
and check the “Disable Site Header” checkbox.
3. Add the following HTML in the content area:
<div class="header-section">
<div class="header-section-1">
<div class="site-logo">
<a href="URL TO YOUR WEBSITE" title="YOUR SITE NAME" rel="home">
<img class="header-image" src="URL TO LOGO IMAGE" alt="YOUR SITE NAME" title="YOUR SITE NAME">
</a>
</div>
</div>
<div class="header-section-2">
Header center content
</div>
<div class="header-section-3">
Header right content
</div>
</div>
4. Add the CSS below:
.header-section {
display: flex;
flex-wrap: wrap;
}
.header-section > div {
width: calc(100% / 3);
}
@media (max-width: 768px) {
.header-section > div {
width: 100%;
text-align: center;
}
}
5. This is the basic result:
Depending on your browser requirements, you might want to run that code through this tool: https://autoprefixer.github.io/
If you want to insert widgets in those sections, we recommend trying a plugin like Widget Shortcode.