If you’re building a website with Hostinger’s Website Builder, your header is one of the most important elements to get right. It’s the first thing visitors see, and it sets the tone for the entire site. In this tutorial, I’ll show you exactly how to customize your website header in Hostinger — from layout and spacing to fonts, buttons, and even AI-powered logo creation.
Step 1: Access the Hostinger Website Builder
To begin, log in to your Hostinger account at hostinger.com, go to the “Websites” section, and click “Edit Website” next to the project you want to update.
Step 2: Edit Header Settings
Click directly on the header area, then click “Edit Header.” Here are your main options:
Sticky Header
Toggle the sticky header option to keep your header visible as users scroll.
Spacing
Adjust the spacing between navigation links, shopping cart icon, and overall top/bottom padding. Compact headers typically look cleaner and more modern.
Layout
You can customize the order of elements in the header. Want a centered logo? Want your links grouped closely together? It’s all easily adjustable.
Step 3: Show or Hide Elements
Under the “Elements” tab, toggle the visibility of:
- Logo
- Social icons
- Shopping bag
- CTA button
It’s a good practice to include a strong call-to-action button linking to your most important page, like a newsletter signup or product page.
Step 4: Customize the Logo
Choose between using an image or text logo. Hostinger even offers an AI tool to help you generate a logo using your credits. You can also upload your own or create a clean text-based logo directly in the builder.
Step 5: Edit the Shopping Cart
In ecommerce-focused websites, it’s useful to have a cart icon. Customize its size and position to match your branding.
Step 6: Header Styling
Navigate to the “Style” tab to change:
- Background color or transparency
- Text font and color
- Button color, hover effects, and size
- Corner radius for buttons
You can follow color psychology here — for example, orange buttons are often used for high-converting CTAs (Amazon-style).
Step 7: Customize the Top Bar (Announcement Bar)
Double-click on the top bar to add or edit text, change its font, color, size, or add a link. You can also set its background color and choose to show or hide it on mobile or desktop.
Final Thoughts
After applying your changes, preview your site to see your header updates live. A well-designed header can improve your site’s usability and conversion rate, so don’t overlook it!
If you have any questions, feel free to drop them in the comments of the video, and don’t forget to like and subscribe for more Hostinger tutorials.
📖 Want more in-depth training? Get the free Hostinger course and join my academy for exclusive content.