[Support request] Top Bar is set to full width, but is contained

[Philip]

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.

[David]

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.

[Philip]

Yes, I will keep a menu that will go below the top bar.

[David]

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.

[Philip]

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?

[David]

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;
}

[Philip]

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)?

[David]

I updated the CSS above above to do that.
And you can then disable the sticky nav in the customizer

[Philip]

Perfect! Thanks so much!

[David]

You’re welcome

[Author]

Posts