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:
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.