[Resolved] Merging header and navigation in GP Premium

Home Forums Support Merging header and navigation in GP Premium

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #259281
    NBC

    Not to be dense, but I’ve read this support documentation several times and cannot find some of the corresponding settings in GP Premium. Additionally, the UI of the Page Header add-on looks very different from the Customizer setup in Premium.

    What am I missing here, besides the proverbial boat?

    #259336
    Leo
    Staff
    Customer Support

    Hi there,

    Can you make sure both GP (1.3.41) and GP Premium (1.2.92) are both up to date?
    Let us know.

    #259382
    NBC

    Can you make sure both GP (1.3.41) and GP Premium (1.2.92) are both up to date?

    Absolutely.

    Version parity is the first thing I always verify.

    The documentation examples do not look like the Customizer screens I see.

    #259439
    Tom
    Lead Developer
    Lead Developer

    The Page Header options aren’t in the Customizer. You can find them when adding or editing a new page/post. More information here: https://docs.generatepress.com/collection/page-header/

    #259452
    NBC

    Hi, Tom:

    I wasn’t looking for a page-specific solution. Sorry that I misunderstood.

    What I’m trying to accomplish is easier to describe than to do, I’m afraid.

    I’m trying to stack a logo atop a right-side menu, and have all the page or post content start at the top of the window next to that sidebar.

    Here’s a simplified example.

    I can accomplish all of this except for the vertical position of the content.

    #259453
    Tom
    Lead Developer
    Lead Developer

    Ah, so assuming the navigation is already set to a sidebar, upload a navigation logo in Customize > Layout > Primary Navigation.

    It should appear above your sidebar menu.

    Then you can hide the header with some CSS:

    .site-header {
        display: none;
    }
    #259467
    NBC

    I originally inserted the logo in Site Identity. I moved it to Primary Navigation. Now it’s no longer showing up. Everything else is working.

    Any place in particular that I should look for the problem? This is running under localhost, so I can’t post a link.

    I have set Navigation and Inner Navigation widths to “Contained,” if that helps.

    #259468
    Tom
    Lead Developer
    Lead Developer

    Make sure the navigation logo position is set to Sticky + Static.

    #259470
    NBC

    But now the logo’s in the menu instead of above it.

    #259485
    Tom
    Lead Developer
    Lead Developer

    That’s the easiest way to get that kind of look.

    The alternative is removing the navigation logo and adding in a logo using GP Hooks in the “Before Left Sidebar Content” hook:

    <div class="sidebar-logo">
        <img src="URL TO YOUR LOGO" alt="" />
    </div>

    Then this would be your CSS:

    .site-header {
        display: none;
    }
    
    @media (max-width: 768px) {
        .site-header {
            display: block;
        }
        .sidebar-logo {
            display: none;
        }
    }
    #259490
    NBC

    Thanks, Tom!

    You know what they say about “careful what you wish for”?

    Now I either have to scrap the whole idea or find a way to make the logo sticky.

    Worse yet, I did not realize that sticky menus reverted to a menu bar across the screen even if the primary nav was set to fall in the sidebar.

    <sigh>

    Back to the drawing board.

    #259534
    Tom
    Lead Developer
    Lead Developer

    If you choose the “None” option for the sticky navigation effect, the sidebar nav will stay in the same position and not revert to a horizontal nav.

    #259552
    NBC

    Thank you, Tom!

    I would love an option that retains stickiness and also keeps the nav system in a sidebar. For now, I’ve gotten where I was trying to go in this test.

    #259632
    Tom
    Lead Developer
    Lead Developer

    That is possible as long as the sticky effect is set to “None”.

    Glad you got something working 🙂

    #299205
    Sri

    I am sorry to be so newbie, but I keep reading, use this CSS code, whenever people ask for a solution.

    What really lost me is WHERE exactly do you put the css code in the page?

    I am using GP Premium 1.2.96 and Elementor. (still in the very early stages of learning 🙂 )

    Also, what are GP hooks? How do we use them? When do we need them?

    Btw. I am also trying to get a transparent header with some text on it for the page I am building. I am still grappling in the dark now, not sure how to achieve that.

    I’d be grateful if someone can point me to the right direction.

    Thank you,

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.