Archived topic
Menu bar like App Demo Site - Logo / Centered Menu / Buttons
3 replies · Started by Scott on November 24, 2021
Hello,
I'm wondering how you would go about configuring a header bar like in your APP Site demo:
https://generatepress.com/site-library/ (App - The green app demo site)
Left: logo
Center: Main menu
Right: Buttons
Would I need to disable the normal menu and then just build this with the Header widget? and add my own CSS to align each item? Or is this functionality already built into Generatepress?
- I tried some options but I'm bit confused so far.
Thank you!
Hi there,
the App site header is setup like so:
1. Customizer > Layout > Header --> set Navigation as Header.
2. Add this CSS to create the layout logo / menu / menu-bar-items
/* Navigation padding */
.main-navigation .inside-navigation {
padding: 10px;
}
/* Center main nav */
@media (min-width: 1300px) {
.main-navigation .inside-navigation .main-nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}3. Add the Buttons using a Block Element:
https://docs.generatepress.com/article/block-element-overview/
Select the Hook: menu_bar_items to add the buttons in the correct position.
That's very helpful, I'll try that, thank you!
You're welcome
