Edit Your Website's Navigation Design

Edit Your Website's Navigation Design

The Navigation settings in the Design panel lets you manage the appearance of your your website's navigation bar, menu items, and drop-down menus. You can choose separate settings for how your navigation menu appears on desktop and mobile devices. These are sitewide settings, so any changes you make here will apply to every page on your website.

Note: These settings will apply to all desktop versions of your site's navigation. The navigation bar will display differently on mobile devices. Here is how you can edit your mobile navigation settings.


Edit your website's navigation menu design

  1. Click Design at the top of your Websites app to open the Design panel.
  2. On the right-hand sidebar, navigate to the Sitewide tab and select Navigation.

 

List of available navigation design settings

You will have the option to modify the following settings:

Layout

You can modify the appearance of the navigation menu items, edit the spacing between items, and choose to create a "sticky nav" that stays at the top of the window as users scroll.

For the Mobile navigation settings, you can modify the icon (commonly known as the "hamburger menu" that users click to access the navigation items.

Text

This section lets you edit the appearance of the text on navigation menu items. You can change the text size, spacing, and text colors.

Buttons If you utilize a Button Navigation Item page type, then you can edit the appearance of the buttons here. You can edit the color, shape, and shadow effects of the buttons.
Expandable Menus If your navigation uses drop-down menus, then you can modify the appearance of the text and menu background colors here.
Container In the Container section, you can choose a background or "fill" color navigation. You can also add Padding, which adds extra empty space above or below the navigation menu items.
Border You can choose to add a border around your Header.
    • Related Articles

    • Add a Restaurant or Bar Menu to Your Website

      If you want to add a menu to your website, you have a few different options. You can: Create a dedicated "Menu" page using the platform tools. Upload a PDF menu. Embed a third-party menu widget. Option 1: Create a Standalone "Menu" Page Creating a ...
    • Edit Your Footer Layout and Design

      The Footer settings in the Design panel control the layout, text settings, social icon designs, and design settings of your website's Footer. This is a sitewide setting, so any change you make here will apply to every page on your website. To find ...
    • Edit Your Website Layout

      The Layout settings in the Design panel control the position of your website's Navigation bar and Footer in relation to the rest of your website. To choose or change the layout of your website: Click Design at the top of your Websites app to open the ...
    • Edit Your Website Styles

      The Styles settings in the Design panel control the appearance of various elements of your website, such as text, images, buttons, links, and more. This is a Sitewide settings, so any change you make here will edit all instances across your website. ...
    • Edit Your Website's Header & Logo

      The Header & Logo settings in the Design panel lets you manage your website's logo, favicon, and edit the spacing and border of your website's Header. These are Sitewide settings, so any changes you make here will apply to every page on your website. ...