Wix Header Setup: A Complete Guide to Building Your Website Header
Your website header is the first thing visitors see when they land on any page of your Wix site. It establishes your brand identity, provides navigation to your key pages, and sets the overall tone for the user experience. Getting the header right is one of the most important steps in Wix website setup. This guide walks you through every aspect of configuring your Wix header — from adding your logo to enabling a sticky scroll effect.
Step-by-Step: How to Set Up Your Wix Header
Step 1: Access the Header in the Wix Editor
Open your site in the Wix Editor. The header is the horizontal section at the very top of your page. Click anywhere within the header area to select it. A blue label reading 'Header' will confirm your selection. Like the footer, the header is a global element — any changes you make will appear on every page of your site.
Step 2: Add Your Logo
Your logo is the centrepiece of your header. If your template already has a placeholder logo, click on it and select Change Logo or Change Image to replace it with your own. If starting fresh, click Add Elements (+) then Image, and upload your logo file (PNG format with a transparent background is recommended for best results). Resize and position the logo to the left of the header, which is the most conventional and recognisable placement. Link your logo to your homepage by selecting the logo, clicking the Link icon, and choosing your homepage.
Step 3: Set Up Your Navigation Menu
The navigation menu in your header is how visitors move between the main sections of your site. Click on the existing menu element in the header to select it. Click Manage Menu to open the menu manager, where you can add, remove, rename, and reorder menu items. Each menu item should correspond to a key page on your site. Common header navigation items include Home, About, Services, Portfolio/Work, Blog, and Contact. Keep the menu concise — too many items overwhelm visitors.
Step 4: Add a Call-to-Action Button
One of the most effective things you can add to your header is a prominent call-to-action (CTA) button. This might be 'Book Now', 'Get a Quote', 'Contact Us', or 'Shop Now'. The button should stand out visually from the rest of the header — use your brand's primary accent colour. Place it on the right-hand side of the header, adjacent to the navigation menu. Ensure the button links to your most important conversion page.
Step 5: Configure the Header Background
Click on the header area and select Change Header Background. Choose a solid colour, gradient, image, or transparent background. A transparent header (also known as an overlay header) allows the hero image or video below it to show through, creating a dramatic, full-screen first impression. If using a transparent background, ensure your logo and navigation text remain legible against whatever is below.
Step 6: Enable the Sticky (Scroll-Fixed) Header
A sticky header remains visible at the top of the screen as visitors scroll down the page, keeping your navigation and CTA permanently accessible. To enable it in Wix, click the header to select it, then click the Settings icon (or right-click and select Header Scroll Effects) and toggle on the Scroll Effects or Sticky Header option. A sticky header significantly improves usability on long pages.
Step 7: Adjust the Mobile Header
Switch to the Mobile Editor by clicking the mobile icon at the top of the Editor. On mobile, the full navigation menu is typically replaced by a hamburger menu (three horizontal lines) to save space. Check that your logo is correctly sized, the hamburger menu works correctly, and any phone number or CTA button is prominently displayed. The mobile header is often the most-viewed header as the majority of web traffic comes from mobile devices.
Step 8: Preview and Publish
Preview your site on both desktop and mobile. Navigate through several pages to confirm the header looks consistent and professional across your entire site. Test all navigation links, the CTA button, and the logo link. Once satisfied, click Publish.
SEO Best Practices for Your Wix Header
Your header navigation plays an indirect but important role in SEO. Well-structured navigation helps search engines understand your site's hierarchy. Ensure your most important pages are accessible from the header navigation. Add descriptive alt text to your logo image (e.g., 'WIX SOLUTIONS — Web Design Agency Fleet Hampshire'). Use clear, descriptive menu item names rather than vague labels.
Common Mistakes to Avoid
Using too many navigation items — A header with 10 or more navigation items is confusing. Keep your main navigation to 5–7 core items and use dropdowns for subcategories.
Not linking the logo to the homepage — Visitors expect clicking the logo to take them to the homepage. This is an internet-wide convention — follow it.
Poor contrast on transparent headers — A transparent header over a light-coloured hero image can make white text invisible. Always test contrast carefully.
Neglecting the mobile header — The desktop header and mobile header behave differently. Always check the mobile version independently.
Practical Tips
Keep the header height compact on mobile — A tall mobile header pushes your content below the fold. Keep it as slim as possible while keeping the logo and CTA visible.
Use a contrasting CTA button colour — The CTA button in your header should use a colour that contrasts with both the header background and the navigation text so it stands out clearly.
Display your phone number in the header — For service businesses, displaying your phone number prominently in the header (with a click-to-call link) makes it effortless for visitors to contact you immediately.
Wix Header Setup Checklist
☑ Logo uploaded and positioned (with link to homepage)
☑ Navigation menu set up with correct page links
☑ CTA button added and linked to conversion page
☑ Header background colour or style configured
☑ Sticky header enabled (if appropriate)
☑ Logo alt text added for SEO
☑ Mobile header checked and adjusted
☑ All navigation links tested in Preview mode
☑ Header verified on multiple pages
☑ Site published after completing header setup
Frequently Asked Questions
1. Does my Wix header appear on every page?
Yes. Like the footer, the header is a global element in Wix. Any changes you make to the header will automatically appear on every page of your site. You can choose to hide it on specific pages (such as landing pages) via the page settings.
2. Can I make the Wix header sticky (fixed) as users scroll?
Yes. You can enable a sticky or fixed header in Wix that remains at the top of the screen as the visitor scrolls down the page. This is configured within the header's scroll effect settings. A sticky header is excellent for usability, keeping navigation always accessible.
3. Can I have dropdown menus in my Wix header navigation?
Yes. Wix supports dropdown navigation menus. In the menu manager, you can create sub-pages under any main menu item. When a visitor hovers over a main menu item with sub-pages, a dropdown menu appears showing the sub-items. This is useful for organising services, product categories, or sub-topics.
4. What is the best logo format to use in the Wix header?
For the best results, upload your logo as a PNG file with a transparent background. This ensures the logo displays cleanly against any header background colour without a white or coloured box around it. SVG format is also supported for scalable, sharp logos at any size.
5. Can I have a different header colour when the page is scrolled vs. when it is at the top?
Yes. Wix supports header scroll effects where the header can start transparent (at the top of the page) and change to a solid colour as the user scrolls. This creates an elegant effect where the hero section appears full-screen at first, and then a solid, branded header 'fades in' as the visitor scrolls down. Configure this under the header's scroll settings.