Moving Brizy Cloud Fixed Header to bottom

David Hurley

• October 13, 2022 19:02

This isn't a question but help for anyone else who wants to move their fixed header to the bottom of the site instead of the top. A reason you might want to do this is if you have anchors in your pages, the fixed header will cover the area you have anchored to. Here is a video example of the final result - https://nimb.ws/d3BP60

To achieve this:

In the header row, add the CSS class - stickbottom
In the footer row, add the CSS clas - footer-row

Then add this custom code to your website:

.stickbottom .brz-section__header--animated{
  bottom: 0 !important;
  top: auto;
}
.brz .brz-section__header--animated{
  -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
.brz .brz-section__header--animated-opened{
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.footer-row {
    margin-bottom: 72px !important;  //THIS SHOULD MATCH HEIGHT OF STICKY ROW
}

1

• 

  KC George

  • October 14, 2022 05:03

  Thank you David for sharing this.

  0

Please sign in to leave a comment.