[Support request] Sticky header and top bar

Home Forums Support [Support request] Sticky header and top bar

Home Forums Support Sticky header and top bar

  • This topic has 6 replies, 3 voices, and was last updated 2 months ago by Ying.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2247127
    Sean

    Hi

    I have a simple header that includes a logo on the left and main nav on the right. Set to sticky.

    There is also a Top Bar element using generate_before_header which I like because of the ability to add anything.

    When scrolling down the page the Top Bar disappears, which I would prefer to stay put.

    2 questions:

    1 – How can both the header and top bar be sticky together, prob exc mobile.
    2 – Is there a better way to achieve this? A new element using Site Header element type presumably gives more design scope? Can the Top Bar content just be included within that element?

    Thank you
    Sean

    #2247157
    Sean

    So this seems to be the kind of thing I need to do:

    https://generatepress.com/forums/topic/sticky-before-header-hook/

    Any suggestions to make sure it’s correctly responsive?

    Thanks

    #2247166
    David
    Staff
    Customer Support

    Hi there,

    can i see the site with the top bar and header ?

    #2247173
    Sean

    Hi

    Here’s the link https://www.respectmortgages.co.uk/cookies/

    Site under development

    I am testing with one new header element at the moment

    Sean

    #2247480
    David
    Staff
    Customer Support

    If you’re going to build the header with a Block Element then you could simply start with a Container Block that is Full Width and build inside that the Top Bar followed by the header.

    Alternatively if the Top Bar was its own block element then you can use the same position: sticky; CSS. You just need to offset the Top position eg.

    .my-top-bar, .site-header {
        position: sticky;
        top: 0;
    }
    .site-header {
        top: 60px; /* height of top bar */
    }
    

    Responsiveness can be a pain. If you can guarantee the topbar height doesn’t change then that method will work fine.

    #2247541
    Sean

    Thanks

    So I’m building inside a container, option 1 above. The sticky bit seems OK now and I have added the logo

    I would like 2 navigation menus:

    1 – On the top a very simple menu, I am currently using 5 buttons for these which seems fine
    2 – Main navigation below – The Primary Nav won’t show here so I have inserted a Nav Menu. But I can’t seem to find a way to style it? ie spacing and dropdown options to make it look better

    Any ideas please?

    Thanks

    #2247626
    Ying
    Staff
    Customer Support

    GP has no control over WP’s navigation block.

    You can either set the style(colors/typography)within the navigation block, or using custom CSS.

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