Step 1: Navigate to Header Builder
- Go to Unlimited Addons for Elementor > Header & Footer Builder.
- Click Add New.
- Name your template “Header” and set the type to Header.
- Under Display Rules, set it to show on the entire website.
- Click Publish, then Edit with Elementor.
Step 2: Add a Container
Drag in a container to start.
Click the 6 dots (container settings).
Set the layout to:
Boxed
Width: 1200px
Direction: Row (horizontal)
Justify Content: Space Between
Align Items: Center
Gap: 10px
Step 3: Add the Logo
Drag in an Image widget (this will be your logo).
Select the white version of your logo.
You won’t see it yet because it’s white on white.
Go back to the container settings and under Style, temporarily change the background to black so you can see it.
Set the logo width to 240px under Style > Width.
Step 4: Style Your Buttons
Drag in a Navigation Menu widget.
It should automatically pull in your Primary Menu.
Style it:
Text Color: White
Hover Color: Yellow
Active Color: Orange
Under Typography:
Size: 16px
Weight: Normal
Letter Spacing: 0.6
Step 5: Adjust Menu Spacing
Horizontal Padding: 0
Vertical Padding: 15
- Space Between Items: 40
Step 6: Set Transparent Header with Overlap
- Go back to the container background color and set opacity to 0.
- Go to Advanced > Margin, and adjust the bottom margin to a negative number until the white disappears (around -173px).
- This creates an overlap effect with the content below.
- Set the Z-Index: Still in the container settings, go to Advanced > Z-Index and set it to 9999 to ensure the header always stays on top.
Step 7: Responsive Design: Tablet
Switch to Tablet View.
Set background back to black temporarily so you can see what you’re doing.
Click on the menu icon.
Go to Content > Layout and:
Set Breakpoint to Tablet
Enable Full Width
Align the menu to the Right
Style the toggle menu:
Set Toggle Icon Color to White under Style > Menu Trigger
Adjust spacing so dropdown doesn’t overlap the logo:
Increase Top Distance in Style > Dropdown
Step 8: Responsive Design: Mobile
- Switch to Mobile View.
- Make sure container is still Row Horizontal.
- Click on the menu, then set Width to 40px (custom).
- Resize logo to about 155px for better balance.
- Adjust dropdown position again in Style > Dropdown > Top Distance to around 10px.
- Adjust bottom margin of the container to about -64px.
Step 9: Final Touches
Set final transparency back to 0% so your background is fully transparent.
Click on your logo, go to Content, and set a custom link to your home page (use
/homeor your actual home URL).Click Publish.
Visit your site to confirm everything looks correct on desktop, tablet, and mobile.
Homework & Action Items
- Check your site on desktop, tablet, and mobile views
- Adjust margins, padding, or logo size if things don’t line up perfectly
- Make sure your header is transparent and sits on top of the page content
- Ensure the logo links back to the homepage
- Customize your menu colors to match your brand