Customize the navigation on your website

The navigation on your public website is like a table of contents that shows your visitors and customers what information is available on your site. Since the navigation links appear on every page of the site, they make it easy to browse the site, discover information, and return to previously viewed pages. As you build your public website, you want to make sure the site navigation is clear and simple for your users. With your public website in Office 365, you can easily create, edit, and delete the links that appear in your site navigation. Watch the video below for a quick demo. The rest of this article appears below the video.

In this article


About the website navigation

The links that appear on the left or top of your website are generally referred to as the site navigation. By default, there are four links in the navigation – Home, About us, Contact us, Directions, and Blog. When you create new pages on the website, a new link is created and associated with that page. You can rename these links, rearrange them, add new ones, make sublinks, and so on. You can also create links that go to other websites if you like.

You can customize the navigation directly from the website editor. You can also customize the location of the navigation by using a different site layout. Lastly, you can enhance the navigation using your own Cascading Style Sheets.

Top of Page Top of Page

Customize the navigation links

New links are automatically created each time you create a new page on the website. Follow these steps to create additional links or links to other websites.

Add a new link

   
  1. From the Site tab, choose Edit Menu.
  2. Click the LINK option that appears below or to the right of the navigation.
  3. Enter a name for the link and a target location, making sure you precede it with http://.
  4. Click Save.

You can rename links using the Edit Menu option directly from the website editor. Renaming a link does not affect the corresponding page that the link references.

Rename a link

   
  1. From the Site tab, choose Edit Menu.
  2. Click directly on the link you want to rename and start typing the new name.
  3. When finished, click Save.

You can change the order of the navigation links by dragging and dropping them to a new position.

Change the order of links

   
  1. From the Site tab, choose Edit Menu.
  2. Select the link that you want to move and drag it to its new position in the navigation.
  3. Repeat these steps for each link you want to move.
  4. When finished, click Save.

You can change the hierarchy of the navigation by moving one link under another link, making it a sublink.

Change the hierarchy of the navigation

  1. From the Site tab, choose Edit Menu.
  2. Select the link that you want to move and drag it onto the link you want to put it under.
  3. Repeat these steps for each link you want to move.
  4. When finished, click Save.

You can always remove a link from the navigation, which is something you might want to do if the page is needed on the site but not in the navigation.

Remove a link from the navigation

   
  1. From the Site tab, choose Edit Menu.
  2. Click the X below the link to remove it from the navigation.
  3. Click Save.

Top of Page Top of Page

Change the location of the navigation

To change the location of the navigation on your website, you choose a different site layout. This positions the navigation on the top or the left side of each page on the site. You do this from the Change the Look page as described below.

Change the location of the site navigation

  1. From the Site tab, choose Change the Look.
  2. On the Change the Look page, select the Current design (the one you’re already using).
  3. Under Site layout, choose the layout that positions the navigation on the top or the left side of the page, which you see in the preview area.
  4. Click Try it out and on the next page choose Yes, keep it.

This takes you to your website with the new layout applied. To learn more about this feature, see Change the look of your website.

Top of Page Top of Page

Change the navigation look and feel

If you want to further customize the navigation, for example, change the color, add underlines, or include navigation graphics, you’ll want to use your own Cascading Style Sheet, or CSS. By creating your own style sheet, you override the default navigation styling with your own.

Customize the navigation with CSS

   
  1. From the Site tab, click Edit Style Sheet.
  2. Add your own custom CSS to the box provided.
  3. Learn more in the article Customize your website using CSS.

Top of Page Top of Page

Learn more

See Public Website help for Office 365. Also, learn about creating a whole new website design with Design Manager.

Top of Page Top of Page

 
 
Applies to:
Office 365 Enterprise admin, Office 365 Midsize Business admin, Office 365 operated by 21Vianet - Enterprise admin, Office 365 operated by 21Vianet - Midsize Business admin, Office 365 operated by 21Vianet - Small Business admin, Office 365 Small Business admin, SharePoint admin center, SharePoint Online Enterprise (E1), SharePoint Online Enterprise (E3 & E4), SharePoint Online Midsized Business, SharePoint Online operated by 21Vianet - Enterprise (E1 & E2), SharePoint Online operated by 21Vianet - Enterprise (E3 & E4), SharePoint Online operated by 21Vianet - Midsized Business, SharePoint Online operated by 21Vianet - Small Business, SharePoint Online operated by 21Vianet - Website, SharePoint Online Small Business, SharePoint Online Website, SharePoint operated by 21Vianet - admin center