Explore the options for creating a beautiful and functional navigation menu on your website.
Want to learn more about Ontraport and grow faster?
Our next Bootcamp and Certification courses are October 14–18!
Home > Ontraport for marketing > Pages > Navigation for pages
Navigation for pages
Course Instructor
- How to create a customizable navigation menu
- How to set up your navigation to improve usability, accessibility and SEO
- Options for nested sub-navigation
- How to make your nav fully mobile responsive
Comments
[Block//Author//First Name ##cap_first] [Block//Author//Last Name ##cap_first] on [Block//Date Added %F j, Y g:i a%+0d0h0m]
[Block//Comment]
Leave your comment
14-day free trial. No commitment.
Related resources
[Block//Resource Type]
[Block//Resource Description ##ellipsis(166)]
Transcript
In this video, I’ll give you a tour of a special element in the page editor called Navigation for pages. You can use this element to create a fully functional navigation menu on your website. This is basically a map that easily guides users to the information they need.
A well-designed nav menu can simplify the website experience, making it easy for users to explore and interact with the site. This is especially important if your website contains a lot of pages or sections.
Now, we’re going to explore the navigation element’s functions and how it works on a page. We’ll view a few examples, and then publish our own to make it live. Let’s dive in!
The navigation element is easy to use and powerful, giving you full control over the appearance to create the menu you want! Let’s take a look at the palette in the page editor. Navigate to your Pages collection, then click Add New Page, or open up an existing page – that’s what I’ll do. Now, add a block to the page.
Scroll down to the Advanced elements section. Here you’ll find the Navigation element. Drag and drop it into the new block on your page. I left one block with a nav menu already created and styled, so you can compare that to what it looks like while you’re editing one.
Now, take a look at the navigation template we have here. You'll see some common navigation items like "Home," "Features," "Pricing," "FAQ," and "Contact." You can customize them to fit your website's needs.
When you click into the element, you'll see the different navigation items in the palette on the left. Hover over any of these items to add, rearrange, edit, or delete them. To add more items, simply click on "Add." You can then drag them to whatever order you like or nest them under another item to create sub-navigation dropdowns.
For example, instead of "Features," you could have "Products" as an option to showcase your different offerings. You can also add a "Contact Us" option for easy customer communication.
Maybe you’ll have a “Resources” navigation item, with “FAQs”, “Community forum” and “Blog” nested within. They’ll become sub-navigation dropdown menu options.
Click on an item to see the editing options. You can change the navigation type, name, link URL, or even add subtext. For example, the subtext below the main navigation item, “Products” could be something like, “Shop our featured collections”.
In the Settings section, you have more display options for your page navigation.
The top two versions are for the desktop version of your page. The first setting lets you choose if you want to always show the sidebar menu or hamburger menu, the iconic three-line symbol. You can also determine whether the page darkens when the sidebar opens, adding a bit of design flare to your website.
The following settings apply to both your desktop and mobile versions of your page. The first ensures that all your sub-navigation items appear in your sidebar. The second adds a logo to your sidebar.
If you want more flexibility with your styling, you can add Custom HTML. You can choose where you place your custom code.
One cool thing about navigation menus is that they're fully responsive on mobile devices. They become hamburger menus, and when clicked, they open up a sleek slideout menu that's perfect for phones and tablets.
Now that we've made all these edits, let's publish them and see how it all looks on our website.
And that's how you create an awesome navigation menu using the Navigation for pages element. You can use it on individual pages, membership sites and dynamic pages. Make them global to use all over your site! It's a versatile tool that optimizes your customers' browsing experience. Your visitors will never get lost on your website again!
If you want to learn more about other page elements and their functions, be sure to check out our lesson on Page elements.
A well-designed nav menu can simplify the website experience, making it easy for users to explore and interact with the site. This is especially important if your website contains a lot of pages or sections.
Now, we’re going to explore the navigation element’s functions and how it works on a page. We’ll view a few examples, and then publish our own to make it live. Let’s dive in!
The navigation element is easy to use and powerful, giving you full control over the appearance to create the menu you want! Let’s take a look at the palette in the page editor. Navigate to your Pages collection, then click Add New Page, or open up an existing page – that’s what I’ll do. Now, add a block to the page.
Scroll down to the Advanced elements section. Here you’ll find the Navigation element. Drag and drop it into the new block on your page. I left one block with a nav menu already created and styled, so you can compare that to what it looks like while you’re editing one.
Now, take a look at the navigation template we have here. You'll see some common navigation items like "Home," "Features," "Pricing," "FAQ," and "Contact." You can customize them to fit your website's needs.
When you click into the element, you'll see the different navigation items in the palette on the left. Hover over any of these items to add, rearrange, edit, or delete them. To add more items, simply click on "Add." You can then drag them to whatever order you like or nest them under another item to create sub-navigation dropdowns.
For example, instead of "Features," you could have "Products" as an option to showcase your different offerings. You can also add a "Contact Us" option for easy customer communication.
Maybe you’ll have a “Resources” navigation item, with “FAQs”, “Community forum” and “Blog” nested within. They’ll become sub-navigation dropdown menu options.
Click on an item to see the editing options. You can change the navigation type, name, link URL, or even add subtext. For example, the subtext below the main navigation item, “Products” could be something like, “Shop our featured collections”.
In the Settings section, you have more display options for your page navigation.
The top two versions are for the desktop version of your page. The first setting lets you choose if you want to always show the sidebar menu or hamburger menu, the iconic three-line symbol. You can also determine whether the page darkens when the sidebar opens, adding a bit of design flare to your website.
The following settings apply to both your desktop and mobile versions of your page. The first ensures that all your sub-navigation items appear in your sidebar. The second adds a logo to your sidebar.
If you want more flexibility with your styling, you can add Custom HTML. You can choose where you place your custom code.
One cool thing about navigation menus is that they're fully responsive on mobile devices. They become hamburger menus, and when clicked, they open up a sleek slideout menu that's perfect for phones and tablets.
Now that we've made all these edits, let's publish them and see how it all looks on our website.
And that's how you create an awesome navigation menu using the Navigation for pages element. You can use it on individual pages, membership sites and dynamic pages. Make them global to use all over your site! It's a versatile tool that optimizes your customers' browsing experience. Your visitors will never get lost on your website again!
If you want to learn more about other page elements and their functions, be sure to check out our lesson on Page elements.
Features
© Ontraport 2024
playlist_add_check
PCI DSS, Level 1
security
Privacy Shield Certified