4 ways customize Weebly header (2022)

By David Nge • Last Updated: March 09, 2022

Here's a step-by-step tutorial on how to customize the header on your Weebly site

There are several ways to customize the header.

In summary, we'll go over:

By the end of this tutorial, you will be able to successfully edit and customize your Weebly header one way or the other.

Let's get into it.

Before you start, it's assumed that you've login to your Weebly account and have chosen a site to edit.

Choose a site from the Weebly dashboard to edit
Choose a site from the Weebly dashboard to edit 

In the main editor, hover your mouse over the title area. You will see a floating menu with 3 options:

  1. Off — Hide the title
  2. Text — Changing the title into text
  3. Logo — Add/Change an image logo
Hover over the site title to edit
Hover over the site title to edit

To change the header title to a logo, select the logo option. You'll see a pop up requiring you to upload an image from your computer.

Change the site title to a logo image
Change the site title to a logo image

Select your logo and the header title will automatically be updated.

Upload a logo from your computer
Upload a logo from your computer
Updated logo on site
Updated logo on site

Alternatively you can hide the logo or change it back to a title text instead.

Note: Weebly doesn't allow you the add both a logo and a title by default.

2. Customizing header navigation

Navigation is a crucial part of the header.

At the most basic, you can add new pages and sub pages with a drop down menu to your Weebly site's navigation.

You can also change the header background color, customize the navigation font size, color, spacing between the navigation links, and more.

First, head to the code editor by clicking Theme ➞ Edit HTML/CSS.

Head over to the code editor
Head over to the code editor

Before we can customize the navigation, we need to find the specific code that belongs to the it.

Here's how to do that in your browser.

Right click on one of the navigation links and select Inspect. You will see a new panel in your browser with the HTML code.

Right click to inspect element
Right click to inspect element

If you look closely, the navigation link that you right click is highlighted in the HTML code.

Look for the code for the navigation link
Look for the code for the navigation link

Look for the class keyword in the highlighted code and copy the name of the class.

Look for the class name
Look for the class name

In this example, the name of the class is:

wsite-menu-item

Now back in the Weebly text editor, select the _nav.less file (if you don't see this, then select the main.less file) and search for the class name.

Locate the navigation CSS in the code editor
Locate the navigation CSS in the code editor

You should now see the code section that customizes the navigation.

Edit the navigation CSS code
Edit the navigation CSS code 

While teaching HTML/CSS is out of scope for this article (here's a great resource instead), you can customize a few things that are fairly easy:

Changing the header navigation in CSS
Changing the header navigation in CSS

You can even change the custom font (font-family) in the header! Just make sure you've added a new custom font in Weebly prior.

Making the right aesthetic changes may take a couple tries but understanding the basics of HTML and CSS will get you further along in the future.

Once you're satisfied with the changes, hit Save and Publish.

Save and Publish your changes
Save and Publish your changes

You've just customized the outlook for the navigation, sweet.

Updated header navigation!
Updated header navigation!

3. Change header background color

First, head to your website Theme and select Edit HTML/CSS.

Head over to the code editor
Head over to the code editor

Important: Make a note whether your website is currently using the light or dark theme, this will affect how you update your header.

Check if your website is using the light or dark theme
Check if your website is using the light or dark theme

If your website is using a light theme, then click the variables_light.less file on the sidebar. If your site is using a dark theme instead, then click on variables_dark.less.

Since the website in this demo is using a light theme, we'll select the variables_light.less file.

Editing the light theme css file
Editing the light theme css file

Next is to update the color code for for the header.

Look for the first line in the code editor which should consist @bg followed by a 6-digit color code.

Update the background color setting
Update the background color setting

The existing color code is #ffffff which is white. You can change it to whichever color you like.

If you have no idea which color to choose then just use #fffa00 (yellow) for practice. Alternatively,  head to this color picker website to identify the closest color to your preference.

Update the color code for the header
Update the color code for the header

The Weebly code editor will show a preview of the color change on your header. Be sure to click SAVE to update the changes.

Save your header color change
Save your header color change

You've now successfully updated the header color!

4. Customize the search icon

Some Weebly themes have the search feature enabled by default.

And for those themes you can customize whether to show or hide the search icon in the header.

In the main editor, hover your mouse to the search icon.

Hover over to the search icon
Hover over to the search icon

You will see a floating menu with the options to show or hide the search icon.

Click the Hide button to disable search on your site.

Click hide to disable search
Click hide to disable search

Remember to Publish your site to view the changes live.