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

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

Home Forums Support Menu bar like App Demo Site – Logo / Centered Menu / Buttons

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2019134
    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!

    #2019339
    David
    Staff
    Customer Support

    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.

    #2019516
    Scott

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

    #2019590
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.