Step 7: Customize the navigation bar

Create two new images for the sub-menu of the navigation bar. Select Tools -> Image Editor from the main menu.

Click this button and select New Image -> Blank. Set the size of the image to width = 10 and height = 30 (the height of the sub-menu). For background color, select Custom and set the color to #5F0B01 which is the red color we have created in the previous steps. It can be found at the custom colors of the Color Dialog.

Uncheck the option "Exit editor after insertion" as we are going to create two images.

 

Click the button "Insert to Site" and select the image type PNG. Enter the name nb-sub-hover.png or another name that you like. Click OK to create the image.

Click this button to open the Fill Color Dialog. Set the fill color to #141414. Click OK to fill the image with this color.

Change the opacity to 75. The opacity is at the bottom of the Layers pane.

Click the button "Insert to Site" and select the image type PNG. Enter the name nb-sub-item.png or another name that you like. Click OK to create the image.

Click Cancel to exit the Image Editor.

Double click the navigation bar on the template page to edit it in the Navigation Bar Editor.

At the Navigation Bar Editor, click on the "Style tab" and then the "Background tab". Select "Sub-menu items" from Item type. Select the "Image" option. Select the image "nb-sub-item.png" we have just created at "Website file". Select "repeat-x" for Repeat as we want it to fill the whole area of the sub-menu item. Set the position to "Left" for horizontal alignment and "top" for vertical alignment.

Now change the State to "Hover". Uncheck the Color option on the right as we will replace it with an image. Select the "Image" option. Select the image "nb-sub-hover.png" we have just created at "Website file". Select "repeat-x" for Repeat as we want it to fill the whole area of the sub-menu item. Set the position to "Left" for horizontal alignment and "top" for vertical alignment.

Click on the "Text tab". Select "Main items" from Item type. Select "Hover" from State. Select the Color option. Set Color to #FFFFFF.

Select "Active" from the State. Select the Color option. Set the Color to #FFFFFF.

Select "Sub-menu items" from Item type. Select "Hover" from State. Set the color to #FFFFFF.

Click on "Border tab". Select "Hover" from State. Set the border color to #FCBA58 or select it from the custom colors.

Still at the "Border tab", select "Active" from State. Set the border color to #AF1402 or select it from the custom colors.

Still at the "Border tab", select "Sub-menu items" from Item type. Select "Normal" from State. Set the colors of the top, right and left borders to #FCBA58 or select it from the custom colors of the Color Dialog.

Select "Sub-menu last item" from Item type. set the color of the bottom border to #FCBA58 from select it from the custom colors of the Color Dialog.

Press the Refresh button at the top left corner and set the background color to #141414 (the background color of the page). Click OK to save these settings and return to the template page.

Find this image "right-arrow.gif" within the Website Explorer. This is an arrow image which is used in the sub-menu. The color of it is still green.

Double click it to load it into the Image Editor.

Select this button to open the Fill Color Dialog. Set the fill color to #FFFFFF. Click OK to apply this color to the image.

Click "Insert to Site". You may set the number of colors to a lower figure to create a smaller size image.

Click OK to write that image. When prompted whether the original file should be overwritten, click "Yes" to overwrite the image.

The navigation bar will look like this.

Move it to the left a bit so that it's end is now at 940 pixels from the left.

Click this button to save all pages.