VD Website Builder | Customize Your Site Navigation Header

This guide will walk you through how to customize your website’s navigation header using Website Builder. By following the steps below, you’ll be able to adjust the design, layout, and functionality of your header—helping you create a more professional look and improve how visitors navigate your site.

 

On this page

• What is a navigation header
• How to change your navigation header
• How to update the header background color
• How to change the menu item colors
• How to add borders to your header
• How to adjust the header height
• How to keep the header fixed while scrolling
• How to rearrange items in your header
• How to upload or change your logo

 

What is a navigation header

The navigation header is the top section of your website that appears across all pages. It usually includes your logo and main menu, making it easy for visitors to access important pages like About, Contact, or Shop.

 

How to change your navigation header

To replace your current navigation header:

1. In the Website Editor, go to the Side Menu and click Add Section. 
2. Scroll through the Section Panel and select Navigation Header.
3. Browse the available pre-designed headers.
4. Drag and drop your preferred design into your website header area.

 

How to update the header background color

To modify the background color of your header: 

1. Click on the navigation header section. The section menu will appear in the upper right corner. 
2. Click Layout to open the Section Layout and Design window.
3. Open the DESIGN tab. 
4. Under BACKGROUND, click the color box. 
5. Choose your preferred color and click APPLY.

 

How to change the menu item colors

The items color settings can only be applied to the page menu element: 

1. Click the navigation header. The section menu will appear in the upper right corner. 
2. Click Layout to open the Section Layout and Design window.
3. Open the DESIGN tab.
4. Find ITEMS COLOR and click the color box.
5. Choose the color that you want, then click APPLY.

You can do the same thing in the HOVER COLOR settings.

 

How to add borders to your header

To add borders: 

1. Click the navigation header. The section menu will appear in the upper right corner. 
2. Click Layout to open the Section Layout and Design window.
3. Click DESIGN. 
4. Under TOP BORDER, do the following actions:
   • Use the slider to adjust border thickness.
   • Select a color from the palette.

Repeat the same steps for the Bottom Border. To remove a border, drag the slider to zero.

 

How to adjust the header height

To resize your navigation header:

1. Click the navigation header section.
2. Locate the drag handle at the bottom of the header.
3. Drag it up or down to increase or decrease the height.

 

How to keep the header fixed while scrolling

To make your navigation header stay visible at the top of the page:

1. Click the navigation header. The section menu will appear in the upper right corner. 
2. Click the Settings (gear icon) to open the Section Settings window. 
3. Enable the FIXED MENU option.

This ensures your menu stays accessible while visitors scroll.

 

How to rearrange items in your header

To change the order of elements in your header:

1. Click the navigation header. The section menu will appear in the upper right corner. 
2. Click Layout to open the Section Layout and Design window.
3. On the LAYOUT tab, drag and reposition the items (such as logo or menu) based on your preferred layout.

 

How to upload or change your logo

To update your website logo:

1. Click on your logo, then click the edit/ pencil icon. 
2. Click the IMAGE.
3. A pop-up window will appear. Follow the prompts to upload your logo.

 

You’re all set!

That’s it! Your site should now look more polished and be easier for visitors to navigate. Any updates you make will automatically reflect across all pages, keeping your website consistent and professional.