How to edit menu and create drop-down menus

Your site’s menu is the roadmap that guides visitors to key sections like your store, membership area, and support pages. A well-structured menu makes navigation seamless and enhances the overall browsing experience. 

In this guide, we’ll walk you through the steps to build a menu that works for you and your audience!

Editing the header menu

• The header menu is the one located at the top of your site.
• It displays key navigation pages for your site, such as Home, Browse All, About Me, Membership, etc.
• You can edit which pages appear on your header by going to Layout > Header > Edit menu to add, remove, or reorder the pages on your header.

Editing the footer menu

• The footer menu is found at the bottom of your site.
• It contains links like Returns & FAQs, Contact, and Terms of Service. You can read more here about your site's TOS and Privacy Policy.
• You can edit which pages appear on your footer by going to Layout > Footer > Edit menu to adjust its content. We recommend keeping the default pages as these are required by law. 

Adding an item to your menu

There are three options that you can add to your menu: a page, an external link, or a collection. 

Page

The Page option adds a fully customizable page to your site. You can use this page for whatever you need. We have seen creators use it to create a direct page to the donation option, an about me section on our site, for newsletters, a gallery, etc.

Creating a new page

To add a custom page to your site, go to Site designer > select the Pages tab and click "Create custom page." This will prompt you to give that page a title, and then it will take you into edit mode for that specific page. 

Viewing All Pages

• To see all pages on your site, go to Site designer > select the Pages tab. This tab allows you to view, manage, and organize all the pages listed on your site to improve navigation and structure.
• You can also view all pages by going to the Layout tab and clicking the dropdown next to Home (see image below). This dropdown lets you switch between pages and create a new page as needed.

Link

The Link option allows you to link to an external URL within your menu. You can use this to link to another site outside of Fourthwall (i.e., ticket site for your meet-up, your cooking blog, etc.)

1. To add a link, go to Site designer > select Header or Footer and click Edit menu. There you will see your existing pages in the header or footer. Scroll to the bottom and click on the "Add menu link" in the menu editor.

2. Enter the external URL, give it a title (e.g., “Blog” or “Shop”), and click "Save." For example, I can call it "Blog" and link my external blog from here. We recommend you keep the naming/titles in your header/footer short with a max of two words names. 

After you have added the menu link, anyone who clicks on it will be redirected to the page you linked. 

Collection

After you have created a collection, you can link them directly to your header. You can link a specific collection or just show all the products you have available. When you click to add a collection, it will prompt you to select from the drop-down menu between All Products and the collections you have already created.

After you select the collection you want to add to your menu, it will take you to an edit screen where you update the title/name shown in the menu and also give you the option to update the collection selected if you wish.

Creating drop-down menus

A drop-down menu is when you nest multiple menu items under one main item. You can use drop-down menus to group collections or pages together and make it easier for supporters to navigate your site. For example, if you have a lot of products, then you might want to add them to collections and use a drop-down menu to organize the collections.

Drop-down menus are created by changing the hierarchy of the menu items by clicking and dragging the dots on the right side of the menu item you want to move under another one. You then drag under that item and move to the right; you will see the item will show as indented. See the GIF below for an example.