Websites- Cloud: Creating and Customizing Navigation Menus

Updating my Navigation Menu Links

Your site's theme has a global site header with your site logo and navigation menu (depending on your theme, you'll have other elements as well). 

Follow these instructions to access and edit Menus on your website theme.

  1. From your Cloud Website, click the CMS icon in the left sidebar and go to Menu tab
    cloud edit menu.gif
     

    • If you have more than one menu on your site, select the correct menu from the Create or select a menu: dropdown. 
       

      Note: Your website theme may have other menus in use, ie: Links in your footer may use a separate menu.

      cloud create or add menu.png
       

  2. From the Pages menu, check the box next to each page you want included and Click Add to Menu.
    cloud add page to menu.png
     
    • All added pages will appear at the end of your menu. Drag and drop the pages in the order you want and indent pages to create dropdown menus.
      cloud drag and drop menu.png
       
  3. Click Save Changes.
     

Adding External Web Pages to Menu

External web pages can be added as a menu item via the Custom Link block 

  1. Select "External URL" from the drop down or the "Custom Link" box from the side menu.  

   2.  With the box checked, select add to menu in bottom of side menu. This will create the Custom link block          and create it as a menu item. 

 3. Select the gear icon on the block. Copy and paste your external website url into the Custom Link or Anchor field. Change the Navigation label to the name you wish the page to appear as in the menu. 

 5. Make sure to Save your changes. 

 

Menus are essential for guiding visitors through a website. In the Cloud Website buider, menu creation and customization are handled through the builder interface, with options varying depending on whether the free or pro version is in use.

Accessing Menu Elements

Within the builder, menu elements are available via the sidebar. Once the menu element is dragged onto the page, the prompt to "Create a Menu" appears—this is the starting point for building navigation.

Creating a Menu in the CMS

To begin, navigate to the CMS section located in the top-left corner of the builder. Select Menus, then use the dropdown to choose Create New Menu. Name the menu (e.g., "Main Demo Menu"), click the plus icon, and select it.

Next, choose the desired pages from the left-hand panel and click Add to Menu. Pages can be reordered by clicking, holding, and dragging them into the preferred sequence. Once the menu is arranged, click Save Changes.

Adding Draft Pages to the Menu

If a page is still in draft mode (e.g., an RSVP or Contact Us page), it must be published before it can be added to the menu. After publishing, return to the CMS > Menus section and add the newly published page to the menu. Save changes and close the menu editor.

Refreshing the Builder to Load the Menu

If the newly created menu does not appear in the menu element options, refresh the browser. After refreshing, the menu (e.g., "Main Demo Menu") will be available for selection and can be loaded into the page.

Styling the Menu Element

The menu element offers extensive customization options:

  • Layout Controls: Adjust padding, margins, and alignment.
  • Link Styling: Each link can be individually styled. Pro users can enable Mega Menu functionality for any link, allowing additional elements to be embedded within the menu.
  • Icons: Icons can be added to links. For example, selecting a "house" glyph for a "Home" link. Icons can be positioned left or right, resized, and spaced accordingly.
  • Typography and Colors: Global typography settings apply to the entire menu. Text color can be set for normal, hover, and active states. For instance, hover color might be teal, while the active page (e.g., RSVP) appears in black.

Advanced Menu Functions

Additional layout options include:

  • Vertical Alignment: Adjust spacing between links.
  • Hamburger Menu: On tablet and mobile views, a hamburger menu appears by default. Clicking it opens a drawer containing the menu.

Styling the Hamburger Menu

To access hamburger menu settings, increase the top padding of the column temporarily. This exposes the hamburger menu for selection. Once selected, the following options are available:

  • Size Adjustment
  • Drawer Position: Choose left or right.
  • Color Customization

After styling, reduce the padding to its original value. The drawer can be opened to further customize individual menu items, including icon selection, typography, text color, background, and border styling. Alignment options include center, left, or right.

 

Related Help Article
Ready to learn more? Check out Brizy Cloud's help article: How to create a Menu and add pages into it


**In our Cloud Websites documentation, you may come across the name "Brizy" or links to articles found on the Brizy website. Brizy is a technology partner that helps us provide an enhanced, user-friendly website editing experience. The Brizy partnership is explicitly designed for ministries, ensuring we offer the best solution to meet your church's website needs.**

Updated

Was this article helpful?

1 out of 1 found this helpful

Have more questions? Submit a request

If you have an issue that requires help or feedback, please Contact Support.