Tutorials

loading...

How can I change my navigation font color, size or location?

The font size, color and location of the navigation menu is set by the template you have chosen. With the Style Designer, you can change the color and font style of your navigation links.

Here's how to change the color:

1. Click Style > Designer.
 
User-added image

2. In the "Colors" section, there are four options:
  • Navigation - This is the color of text displayed on your navigation menu.
  • Navigation Background - This is the color displayed for your navigation menu bar.
  • Navigation (Selected) - This is the color displayed after your visitor has clicked the navigation link.
  • Navigation (Hover) - This is the color displayed when visitors hover over the navigation link.
User-added image

3. Click on the element you want to change and a Color Picker dialog box will open up. 

4. You can select a new color or enter a hex color code in the color picker.
 
User-added image

5. Click Save at the bottom of the Style Designer console box.


Follow these steps to customize your font:

1. In the "Font" section, click Navigation.
 
User-added image

5. You'll see the following options:
  • Font Family
  • Font Weight
  • Font Size
  • Text Decoration
  • Letter Spacing
  • Line Height
  • Text Transform
  • Text Alignment
User-added image

6. Click on the element you wish to edit. This will bring up the various options from which to select. The change will be reflected on your page.

7. When you're happy with the changes, click Save on the bottom of the Style Designer console box.


Change navigation location:

The location of the navigation menu is set by the template you have chosen. If it's not working for you, you may need to consider changing templates. You can do this easily by clicking Style > Change Template in the Sitebuilder and scrolling through our extensive collection in the Responsive, Free or Premium categories. Please note, if you use the Responsive templates, the navigation can either be above or below your banner. If you wish to explore this, please follow these steps:

1. Go to Style > Change Template.
 
User-added image


2. Click Responsive and select a template. For this tutorial, we will select Super Flat.

User-added image

3. Now go to Style > Designer.
 
User-added image

4. Scroll down until you see "Layout".

5. Click Navigation Position and select Top or Bottom.
 
User-added image

6. Click Save on the bottom of the Style Designer console box.

Please note: If the Responsive template does not offer a Navigation Position option, you can click on Header Alignment and select Top or Bottom.

You also have the option to create your own navigation using either text or image links. Take a look at the following tutorials: Alternatively, you can upgrade to Yola Silver or Yola Gold. Either of these packages offer you the best value, total website building and hosting solution for your business site. Upgrading to one of these packages gives you access to the Site CSS, submenu features and unlimited Premium templates. This means you can make these changes, add second-level menus easily and you also have access to a wider range of templates!

It's easy to take your business online with Yola.