When designing your website it’s important to choose the right typography (text) in your navigation menu. If the font styles are difficult to read, visitors may leave your site quickly. Choose simple, but stylish, fonts in the menu.

Note: You can change the font type, colour and size for your design at anytime, and as often as you like without removing your website content.

This help article includes information about fonts in the navigation menu. For details about fonts in other areas of your website please view the ‘Font Options’ help article.

How to adjust menu fonts:

  1. From the ‘Edit Theme’ tab, scroll in settings pane on the left to the ‘Menu’ area
  2. Select the font style and colors you’d like applied to your navigation menu

Steps for changing font color

  • Click the color swatch to change the color
    • Choose a preset color from the swatches
    • Click the color wheel and select a new color
    • Enter the hex code for the color you’d like to use

Menu font options

Click the color swatch to adjust the color for the following settings:

  • Menu font color: Color of the text in the site’s navigation menu
  • Menu font hover color: Color that appears when you place your cursor on the menu buttons
  • Submenu background color: Color that appears behind the submenu text
  • Submenu font color: Color of the submenu text
  • Mobile font color: Color of the menu text on mobile devices
  • Menu font: Font style of the menu text
    • Menu font: Click the dropdown and select the font of your choice
    • Font style: Choose the weight of your font
    • Font size: Use the slider to adjust the font size
    • Uppercase: Toggle ON or OFF to apply or remove uppercase lettering
  • Menu bar background color: Color that appears behind the menu buttons
  • Mobile background color: Color that appears behind the menu text on mobile devices
  • Scroll to the bottom of the settings pane and click ‘Save’

Notes:

  • Color: Each template is pre-loaded with its own 9-color palette, but you can customize these selections to suit your style.
  • Font style: The Bandzoogle font selector offers over 100 fonts in different style categories. Custom fonts can also be uploaded through our Pro plan.

Best practices:

  • Avoid using too many colors on your website. Stick to three or four major colors to keep the visuals consistent: a primary ‘brand’ color, one or two ‘complimentary’ colors, and an ‘accent’ color.
  • Eccentric fonts may seem cool, but if they’re hard to read they can discourage site visitors. Fonts with curls, swirls, jagged edges, or stripes can look playful but are unprofessional. Keep bold and italic to a minimum. Also reserve all-caps for titles and headings.