Navbar transition when scroll

Bo Frilund

• January 22, 2026 13:13

Dear Brizy
What are the steps to add a scroll effect to the navbar, where the navbar shoud be transparent, and softly transition to having a solid backgorund color when scroling down?

Thanks in advance

Best regards

Paula

0

• 

  Ariel H.

  • January 22, 2026 14:45

  Hi Paula,

  Thank you for reaching out.

  You can do this by first designing your header as a normal block. Then add a Header element and copy your header design into it, making sure the background color is removed so it stays transparent.

  After that, enable the Sticky option. Scroll down until the sticky bar appears in the editor, then copy the same header design into the sticky bar and apply a solid background color there.

  This is demonstrated on this screencast - https://streamable.com/rqzbj6

  If you have any other questions, please feel free to let us know.

  Kind regards,  
  Ariel H.

  1
• 

  Bo Frilund

  • January 23, 2026 11:00

  Dear Ariel

  Thank you very much for the great explanation. 

  Best regards

  0
• 

  Bo Frilund

  • January 23, 2026 11:09

  Oh sorry one more question, is there a way to soften the downwards motion of the non transparent navbar?

  0
• 

  Ariel H.

  • January 23, 2026 11:38

  Hi Paula,

  At the moment, there’s no built-in option in Brizy to control the animation speed for the sticky header transition. However, this can be achieved with a small custom CSS snippet.

  You can add the following CSS by going to Appearance → Customize → Additional CSS in your WordPress dashboard:

  .brz .brz-section__header--animated {
      transition: transform 0.8s ease-out,
          opacity 0.8s ease-out;
  }

  You may adjust the transition duration if needed, but 0.8 seconds is generally a good balance for a smooth, natural effect.

  Best regards,  
  Ariel H.

  0

Please sign in to leave a comment.