- This topic has 9 replies, 2 voices, and was last updated 3 years, 2 months ago by
.
-
Posts
-
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 = fullANDInner Width = fullANDAlignment = 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.
Customer Support
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 HeaderOnce 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 customizerPerfect! Thanks so much!
You’re welcome
- You must be logged in to reply to this topic.
