[Resolved] Menu bar like App Demo Site – Logo / Centered Menu / Buttons

[Scott]

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!

[David]

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.

[Scott]

That’s very helpful, I’ll try that, thank you!

[David]

You’re welcome

[Author]

Posts