Choose container to stick within sticky header

Feature Requests / Improvements
21

Thank you for this. I would love to have something to control this in Bricks itself, unless there is a way now that I’m not aware of?

The header element id is now brx-header for anyone looking to use the code.

I nearly have it working, but the the content seems to jump when the sticky class is added. Can you advise how to prevent this from happening?

22

I have this working on your template now. Needed it to also add a sticky class to the main content, then move the script to the footer, and update it give the main content padding equal to the height of the entire nav. Still trying to get it working smoothly on mobile on my own header. But this works on the template earlier in the thread

<script>
  
    const content = document.getElementById('brx-content');
    const header = document.getElementById('brx-header');

  window.onscroll = () => {
		// change the value (200) according your #logo-wrapper height
    if (window.scrollY > 200) {
      content.classList.add('sticky');
      header.classList.add('sticky');
    } else {
      content.classList.remove('sticky');
      header.classList.remove('sticky');
    }
  };  
	


</script>

<style>

  #navbar {
    transition: background-color 0.35s ease;
  }

  .sticky #navbar {
    background-color: rgba(255, 99, 0, 0.9);
    position: sticky;
    top: 0;
  }
  
  /* Move #logo-wrapper up by its height */
  .sticky #logo-wrapper {
    margin-top: -200px;
  }
  
    /* Add margin equal to the height of the entire header to the content */
  #brx-content.sticky {
    margin-top: 259px;
  }
  
  /* Change the color of the links when sticky */
  .sticky .bricks-nav-menu > li a {
    color: white;
  }
</style>
23

Two years later and still no support for 2+ row header structures… I said in another thread reaarding this issue. This utterly stupid solved in Bricks… The element just sticks in the real estate of the header template… Same setup just works in Elementor without needing to search for the unique decision of bricks in their forum.

1 Like
24

I found using the CSS option would cause a lot of stuttering as the change in height when hiding the top header would switch from scrolling and not-scrolling and looks really bad especially when using the scroll wheel.

So, my better solution was fairly simple, I saved the top header as a separate section template, no longer part of the header template, I then set its template conditions to entire website and set the hook:name to “bricks_before_header”, this places it above the header but it is not affected by the sticky header function.

1 Like
25

The template solution works only if you don’t have any SVGs in your topbar area. If you do, when on mobile, you will see the unsized svgs loading before anything else.

26

simple way

#brx-header.scrolling {
    transform: translateY(-40px);  /* height of the top bar */
}
27

This works, but then causing overflow issues.

28

Hey guys, here the realy simple and working solution to make a separate part of header stiky on scroll: How To Create an On Scroll Fixed Header

29

This doesn’t work with the Bricks header, as any element you add in the header will have the header as the parent, not the body, which would be needed for that sticky positioning to work (sticky positioning only makes something sticky within it’s parent element, not the whole page).