A fixed header stays at the top of the screen as users scroll down the page. This is especially useful for keeping navigation links, logos, or call-to-action buttons visible at all times—improving usability and conversion rates on long landing pages.
This article shows you how to make the first row of your CamBuildr page behave as a sticky, fixed header using just a few lines of CSS.
Step 1: Apply Fixed Positioning to Row 1
CamBuildr assigns a CSS class to each row based on its position in the layout (e.g., .bee-row-1 is the first row). You can fix this top row by adding the following custom CSS:
<style>
.bee-row-1 {
box-shadow: 0px 10px 30px -6px rgba(0, 68, 73, 0.07); /* subtle shadow for separation */
z-index: 999; /* ensures it stays above other content */
position: fixed; /* makes the row stick to the top */
width: 100%; /* prevents layout shifting */
}
</style>
You can add this code in any HTML block at the top of your page.
Step 2: Prevent Overlapping with the Next Row
Since the header is now removed from the normal flow of the page (position: fixed), it will overlap the second row unless you manually add spacing below it.
To avoid this, insert a spacer block (or padding) on top of your second row. The height of the spacer should match the height of your header—typically 80 to 120 pixels, depending on your design.
Combine this with smooth scrolling for anchor links (see smooth scroll article) to ensure content doesn’t get hidden beneath the fixed header.
You can customize the shadow, background color, or add animation on scroll for more advanced effects.