Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Sticky bar after header

  • Hello

    How can I add a sticky bar after the header but without created a “blank” between the header and the beginning of the content ?

    The bar will be just after the header (both in desktop and mobile) and above the content. Even in scrolling

    If I’m using a hook ‘after header’ and make it position-sticy, it’s ok after scrolling but at the beginning, there is a blank

    Is there a way to do this with GP/GB ?

  • Hi there,

    Can I see your site with the solution implemented?

    If I’m using a hook ‘after header’ and make it position-sticy, it’s ok after scrolling but at the beginning, there is a blank

  • Hi Ying

    thanks for your reply. Unfortunatly the site is yet in Figma’s conception, I just make some tests in a local staging site. ^^;

    I’ve come with this code :

    .bar {
      position: fixed; 
      top: 80px; 
      left: 50%; 
      transform: translateX(-50%); 
      width: 100%; 
      z-index: 1000; 
    }

    But I would like this code only on homepage and this one for other pages :

    .bar {
      position: absolute; 
      top: 80px; 
      left: 50%; 
      transform: translateX(-50%); 
    }
    

    My element is hooked “after_header”.

    May I do this two configurations without creating two elements ? (I’ve tried whith a Css’ selector like ‘.home’ or body:not(.home) but like my element is placed on all site, it does not work perfectly. And I would like only one element because I will have to change some text periodically)

  • Hi there,

    in your Element add Container within a Container eg.

    
    Container Block #1
    ---- Container Block #2
    ---- ---- Your top bar in here
    

    Container Block #1 set its Position to Sticky.
    Container Block #2 set its Position to Absolute

    This will make the second container and its content take up no space on the page. But it will remain attached to the sticky container

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