Bricks Builder has quickly become the go-to page builder for developers and designers who want clean, performant websites. Unlike bloated alternatives, Bricks generates minimal code and gives you complete control over your design.
Today we'll walk through creating custom headers that look professional and work perfectly on all devices.
What Makes Bricks Builder Different
Before we dive in, here's why Bricks stands out. It's built for speed and flexibility. No inline styles cluttering your HTML. No unnecessary wrapper divs. Just clean, semantic code that loads fast and ranks well.
The interface feels more like a proper design tool than a drag-and-drop toy. You get precise control over every element without the performance penalty.
Setting Up Your Header Template
First, you'll need to create a header template that applies across your site.
-
Navigate to Templates Go to your WordPress dashboard → Bricks → Templates
-
Create New Template Click "Add New" and select "Header" from the template type dropdown
-
Name Your Header Give it a clear name like "Main Site Header" or "Desktop Header"
-
Set Template Conditions Choose where this header appears. For a site-wide header, select "Entire Website"
Building Your Header Structure
Now for the fun part. Bricks uses a container-based approach that's intuitive once you get the hang of it.
Step 1: Add the Main Container
- Click the "+" icon to add an element
- Select "Container" from the layout elements
- In the Style tab, set the container to 100% width
- Add some padding - try 20px top and bottom for starters
Step 2: Create the Navigation Layout
Inside your main container, add another container for the navigation elements:
- Add a new Container element
- Set the direction to "Row" (elements sit side by side)
- Use "Space Between" for justify content - this pushes your logo left and menu right
- Set align items to "Center" for vertical alignment
Pro Tip: Use Ctrl+D to duplicate elements quickly. Bricks remembers your styling, saving tons of time.
Step 3: Add Your Logo
- Insert an Image element on the left side
- Upload your logo in the Content tab
- Set a max-height (around 40-60px works well)
- Add alt text for SEO purposes
If you're using an SVG logo, you can paste the code directly into a Code element for better control.
Step 4: Build the Navigation Menu
- Add a Nav Menu element to the right side
- Select your WordPress menu from the dropdown
- Style the menu items in the Style tab:
- Set font weight and size
- Add hover colours
- Adjust spacing between items
Making It Mobile-Friendly
This is where Bricks really shines. The responsive controls are intuitive and powerful.
Desktop, Tablet, Mobile Controls
See those device icons at the bottom? Click between them to adjust styling for each breakpoint. Changes only apply to the selected device size.
Creating a Mobile Hamburger Menu
-
Add a Toggle Element Place this where you want the hamburger icon
-
Style the Toggle
- Choose three horizontal lines
- Set the colour and size
- Position it on the right
-
Configure the Menu In the Nav Menu settings:
- Set "Mobile Menu" to "Toggle"
- Choose "Overlay" or "Slide" animation
- Style the mobile menu background and text
-
Hide Desktop Menu on Mobile Select your nav menu, switch to mobile view, and set display to "None"
Responsive Testing
Use Bricks' built-in preview modes to test each breakpoint. The mobile simulator shows exactly how your header behaves on different screen sizes.
Pro Tip: Set max-width on your main container (around 1200px) and centre it with auto margins for better desktop layouts.
Advanced Header Techniques
Once you've mastered the basics, try these professional touches:
Sticky Headers
- Select your main header container
- Go to Advanced → Position
- Set Position to "Sticky"
- Add a top value of 0
Adding a Search Bar
- Insert a Search element
- Style the input field and button
- Position it in your navigation container
- Hide it on mobile if space is tight
Multi-Level Dropdown Menus
Bricks handles WordPress menu hierarchies automatically. Just build your menu structure in Appearance → Menus, and Bricks will create the dropdowns.
Style them in the Nav Menu element under "Dropdown" settings.
Comparing to Other Builders
If you're coming from Elementor, you'll notice Bricks feels more structured. There's less dragging random elements around and more logical container-based building.
The code output is dramatically cleaner too. Your WordPress website will load faster and perform better in search results.
Common Mistakes to Avoid
Don't skip the container structure. New users often throw elements directly into the template. Use containers to maintain proper spacing and alignment.
Test on real devices. The preview is helpful, but nothing beats checking on actual phones and tablets.
Keep mobile-first in mind. Design for mobile, then enhance for desktop. It's much easier than the other way around.
Performance Considerations
Headers appear on every page, so performance matters. Here are some optimisation tips:
- Use WebP images for logos where possible
- Keep your menu structure reasonable (avoid mega menus)
- Minimise the number of custom fonts
- Consider loading animations - subtle is better
If you need help with overall website performance optimisation, professional maintenance can make a big difference.
Final Thoughts
Bricks Builder gives you the tools to create headers that look great and perform well. The learning curve is gentler than coding from scratch, but steeper than basic drag-and-drop builders.
The payoff is worth it. You get clean, fast websites that don't carry the baggage of bloated page builders.
Start with a simple logo-and-menu setup. Once you're comfortable with the container system, you can build increasingly sophisticated designs.
Need help getting your custom WordPress website set up properly? We're here to help Welsh businesses create fast, professional sites that actually convert visitors into customers.