Creating a sticky header in Bricks Builder involves using the built-in options provided by Bricks Builder. Here’s a general guide on how to create a sticky header:
- Launch Bricks Builder: Navigate to the page where you want to create the sticky header. Click on the “Edit with Bricks” button to launch the Bricks Builder interface for that page.
- Design Your Header: In the Bricks Builder interface, design your header section as you normally would. Add your logo, navigation menu, and any other elements you want to include in the header.
- Select Header Section: Click on the section that contains your header elements to select it. You should see options appear in the Bricks Builder panel on the left-hand side.
- Enable Sticky Position: Look for an option labeled “Sticky” or “Fixed” in the Bricks Builder panel. This option may be located under the “Layout” or “Advanced” settings, depending on your Bricks Builder version. Enable the sticky position option for the header section.
- Adjust Sticky Settings (Optional): Depending on your requirements, you may have additional settings to customize the behavior of the sticky header. For example, you might be able to specify the offset distance at which the header becomes sticky, or choose whether the sticky header appears on scroll up or down.
- Preview and Test: Once you’ve enabled the sticky position for your header section, preview your page in Bricks Builder to see how the sticky header behaves. Test scrolling up and down the page to ensure that the header sticks to the top of the viewport as expected.
- Make Adjustments: If necessary, make any adjustments to the layout or styling of your sticky header to ensure that it looks and behaves as desired.
- Publish Your Page: Once you’re satisfied with your sticky header design, save your changes and publish the page. Your sticky header should now be live on your website and remain fixed at the top of the viewport as visitors scroll down the page.
By following these steps, you can create a sticky header in Bricks Builder to improve navigation and user experience on your website. For more details please see – Bricks Template Settings – Header
