Archived topic
Header with 3 columns
3 replies · Started by Alberto on March 4, 2021
Hello, I would like to have a header with 3 columns where the logo is in the first column, the main menu is located in the second column and a search widget (Adv Woo Search) is located in the 3rd column.
For tablets and mobiles these columns could be placed one below the other.
I will appreciate your help.
Hi there,
it may take a little CSS, but if you:
1. Set your Navigation Location to Float Right. This will position it to the right of the logo.
2. Add your Adv Search to the Header Widget. This will place that to the right of the menu
Once all three elements are inline - share a link to the site and ill look at whats need to align them
I send you the access data, the site is under maintenance. Thanks since now!
Hi Alberto,
You are actually have 4 columns in the header including the site description, you could give this CSS a try, but I might not work work in smaller screens. I would recommend to add the site description into the logo image.
@media (min-width: 769px) {
.inside-header.grid-container.grid-parent {
display: flex;
flex-flow: row wrap;
}
.inside-navigation {
display: flex;
}
.site-logo {
order: 1;
width: 30%;
}
.header-widget {
order: 3;
width: 20%;
}
p.site-description {
order: 4;
margin-top: -20px;
}
nav#site-navigation {
order: 2;
width: 50%;
}
div#primary-menu {
margin-left: auto;
margin-right: auto;
}
}