Archived topic
Top Bar is set to full width, but is contained
9 replies · Started by Philip on February 17, 2023
I wanted a full width top bar with a logo all the way to the left, with a search bar in the center and social icons to the right (since that's the only way it seems to have a search bar in the menu).
I added a Top Bar widget. Set width = full AND Inner Width = full AND Alignment = Center. Padding is just set to 10.
However, upon doing that, all 3 widgets are crammed in the middle. I since then removed logo, but it's the same.
Hi there,
if the top bar is Logo , search, social icons.
where would the navigation menu go? Would it be below this top bar ?
Let me know.
Yes, I will keep a menu that will go below the top bar.
In that case, do this:
1. remove the items from the Top Bar widget area, and place them in the Header Widget.
2. in Customizer > Layout > Header set its Containers to Full Width.
3. in Customizer > Layout > Primary Navigation, set its Location to Below Header
Once thats done let me know, as it will require a little CSS to center the search bar.
Ok, I just did that, but now the widgets are sort of stacked up on top of each other. Should I place them in a container?
Add this CSS to fix that and center the search widget:
.header-widget {
width: 100%;
display: flex;
align-items: center;
}
.header-widget .widget_search {
margin: auto;
flex-basis: 60%;
}
#masthead {
position: sticky;
top: 0;
z-index: 10000;
}Looks better - thanks! But two more things would make it perfect:
1. The search widget is still contained or narrow. Ideally layout would be more like 20% / 60% / 20%
2. Can I make the now header sticky and the navigation not sticky? (ie. the navigation is hides when I scroll down)?
I updated the CSS above above to do that.
And you can then disable the sticky nav in the customizer
Perfect! Thanks so much!
You're welcome