Loading...

Knowledge Base
Home 
 
/
 CD Website Builder | Customising Your Site Navigation Header
Categories: Sitebuilder

CD Website Builder | Customising Your Site Navigation Header

The navigation header is the top section of your website that appears on every page. It typically displays your logo and main menu, making it easy for visitors to browse your site and find key pages like About, Contact, or Shop.

 

This article will guide you through customizing your navigation header to match your website’s style and branding.

 

On this page

 

Changing your navigation header

The following are the steps on how to replace your existing navigation header:

  1. On the Side Menu of your Website Editor, click Add Section. 
  2. On the Section Panel, scroll down and click Navigation Header. This will display the pre-defined navigation headers in the Section Panel. 
  3. Select the pre-defined navigation header that you like and "drag and drop" it to your website's navigation header.

 

Changing background color

The following are the steps on how to change the background color of your navigation header: 

  1. Click the navigation header. The section menu will appear in the upper right corner. 
  2. Click Layout. This will open the Section Layout and Design window. 
  3. Click DESIGN. 
  4. In the BACKGROUND row, click the square icon to open the color palette. 
  5. Select the color that you want, then click APPLY.

 

Changing the items color

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. This will open the Section Layout and Design window. 
  3. Click DESIGN. 
  4. In the ITEMS COLOR row, click the square icon to open the color palette. 
  5. Select the color that you want, then click APPLY. 
  6. You can do the same thing in the HOVER COLOR settings. 

 

Adding borders

To add borders, follow these steps: 

  1. Click the navigation header. The section menu will appear in the upper right corner. 
  2. Click Layout. This will open the Section Layout and Design window. 
  3. Click DESIGN. 
  4. In the TOP BORDER row, do the following actions: 
  5. Drag the slider to set the border width or thickness. 
  6. Click the square icon to open the color palette and change the border color. 
  7. You can do the same thing for BOTTOM BORDER. 

To remove the border, simply drag the border slider to zero.

 

Resizing the height of your navigation header

The following are the steps on how you can resize the height of your navigation header: 

  1. Click the navigation header. A drag icon will appear at the bottom of the header section. 
  2. Drag it up or down to resize the height of your navigation header.

 

Making your navigation header stick to the top

The following are the steps to make your navigation header stick to the top of the page, keeping your page menu visible at all times as you scroll down:

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

 

Rearranging the items in your navigation header

The following are the steps on how you can rearrange the items in your navigation header:

  1. Click the navigation header. The section menu will appear in the upper right corner. 
  2. Click Layout. This will open the Section Layout and Design window. 
  3. On the LAYOUT tab, you can drag up or down the items to arrange them.

 

The following are the steps on how you can upload your logo in your navigation header: 

  1. Click on your logo, then click the edit/ pencil icon. 
  2. Click the IMAGE.
  3. A popup window will appear, then follow prompt to upload your logo.

 

Loading...