Split menu + Top Bar?
Can the Header Builder create a top bar with phone & email icons on the left, social & account/ecommerce icons on the right, and below that a split menu - centered logo with menu links on either side? A bonus would be having the menu sticky but dropping the logo, and the top bar not sticky.
Comments
Yes, it is possible to achieve such a display with the Header Builder.
In the following video tutorial you will find how to use this tool:
https://support.muffingroup.com/video-tutorials/header-builder-2-0/
Thanks
I finally created a centered single Main Menu split on either side of the logo in the middle. Main Menu 1 and Main Menu 2 then assign them to either side of the logo.
https://ayf2.hawkfeather.com/
However I don't see in the header builder or the demo video how to add the action bar above the split menu. I'd like the phone & email on the left, and the search, login/out, user account and cart on the right.
You need to add a new section above the existing one, and put the icons there.
Thanks
Got it. A couple more problems: https://ayf2.hawkfeather.com/
1) the cart icon breaks the layout
2) there is no login/logout icon. I added the custom icon (too bold) but that won't toggle to logout.
Sorry for all the questions, this builder isn't as intuitive as I'm used to.
Also the built menu is using the Lato body font and not Merriweather header font from my theme option settings. I can override that with custom CSS.
No problem. I am here to help you.
1) Please open the cart icon options and change the icon position to left or right.
2) You already have the login/logout icon added. It is the one that presents a person next to the wishlist icon.
When you have logged in, it also shows the logout option.
3) You can set the font family for the menu in Style -> Menu -> Typography. Look at the following screenshot for a better understanding:
Thanks
I'm getting things sorted out. Last issue I hope: both the top bar and the menu section are set to 1/3, 1/3, 1/3 but the layout isn't doing equal thirds across the full width.
The wraps in the Header builder use flexbox, so their width depends on the content they have inside them.
If you want to have three wraps with equal width, open the wrap options Advanced -> Dimensions, choose Width: Custom, and set the width to 33.3% for each.
Thanks