SOLVED: Behavior of Sticky Header

Bugs
21

As Thomas said, the sticky header is using position:sticky for the sticky header and position:absolute for the fixed header.

What you need to do is to use the media query. For example,

@media all and (max-width: insert width for mobile breakpoint) {
class for the stick header {position:relative; or static; }
}

See if it helps.

22

Yep, with static, the header scrolls with the content. If you want it always to stay (sticky) and not be pulled out of the viewport, you just have to set the transform to 0:

@media (max-width: 767px) {
  #brx-header.sticky.slide-up {
    transform: translateY(0);
  }
}

Best regards,
timmse

1 Like
23

thanks for this i applied it and its works

25

i have another question ? can we make two headers in bricks and perform one header to the 1 page and second header to the new page

26

Yep, with conditions @rizwan

1 Like
27

WhatsApp Image 2022-10-18 at 11.03.25 AM
I have a menu button.and when we click it it shows menu in desktop.so i wanted to only click to button to open menu

WhatsApp Image 2022-10-18 at 11.03.50 AM
WhatsApp Image 2022-10-18 at 11.03.50 AM1280×527 17.4 KB

how i do it there is a work pending so please guide me

28

i seen a video there he shows a method about accordian to select menu with icon but i want to show it with the button

29

  • Sticky should be on element level not on header container. this give more control over which elements should be sticky or not.

  • Toggle to activate transparent header, don’t force it absolute top zero, make it optional.

  • Ability to set sticky height

1 Like