Sticky Header Only For Visitors in Bricks

A user asked:

Anyone know if its possible to make the sticky of the header conditional only for logged out users?

This Pro tutorial shows how the header can be made sticky only for visitors that are not logged in in Bricks.

Logged in users will continue to see the non-sticky header.

Step 1

Set up a sticky header by editing the Header Template with Bricks → Settings (gear) icon → TEMPLATE SETTINGS → HEADER → STICKY HEADER.

Step 2

Add the following at Bricks → Settings → Custom code → Custom CSS or in your child theme’s style.css:

#brx-header.sticky,
#brx-header.sticky.on-scroll {
  position: static;
}

#brx-header.sticky.slide-up {
  transform: none;
}

body #brx-header.sticky.scrolling > .brxe-section,
body #brx-header.sticky.scrolling > .brxe-container,
body #brx-header.sticky.scrolling > .brxe-block,
body #brx-header.sticky.scrolling > .brxe-div {
  background-color: transparent;
}

body:not(.logged-in) #brx-header.sticky {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: background-color 0.2s, transform 0.4s;
  width: 100%;
  z-index: 998;
}

body:not(.logged-in) #brx-header.sticky.on-scroll {
  position: sticky;
}

body:not(.logged-in) #brx-header.sticky .bricks-nav-menu > li > a,
body:not(.logged-in) #brx-header.sticky > .brxe-container,
body:not(.logged-in) #brx-header.sticky > .brxe-div,
body:not(.logged-in) #brx-header.sticky > .brxe-section {
  transition: inherit;
}

body:not(.logged-in) #brx-header.sticky.slide-up {
  transform: translateY(-100%);
}

body:not(.logged-in) #brx-header.sticky.scrolling > .brxe-section,
body:not(.logged-in) #brx-header.sticky.scrolling > .brxe-container,
body:not(.logged-in) #brx-header.sticky.scrolling > .brxe-block,
body:not(.logged-in) #brx-header.sticky.scrolling > .brxe-div {
  background-color: rgba(247, 247, 247, 0.9);
}

Replace rgba(247, 247, 247, 0.9) with the value of your Scrolling background color.

We are essentially unsetting the values Bricks writes for the sticky header and re-applying them only if the body element does not have the logged-in class i.e., for visitors.