The navigation menu are used to organize web pages by important topics, usually internal site pages. There are two ways to reach the navigation settings.
The first way is when you are logged into your Tendenci website as a Superuser, hover over the navigation bar, you should see a prompt with a tab and link to Edit the Navigation.
Note: If you do not see the Edit Nav option on hover, you may have a more advanced nav that needs to be edited in the theme editor. OR you may need to use the navigation link under Layout in your admin menu:
Example of hover - top left corner:
Click on "Edit Nav", from here you will see the drag and drop navigation screen.
The second way to access the navigation setting is from the "Apps" drop down on the Admin tool bar on the top of the screen. Then look for "7. Layout" and click on "Navigations":
From here, you can drag and drop to rearrange the items in the navigation. Click the arrows left or right to indent or outdent the items to change their priority as the main nav or sub nav.
To Create a Subnavigation
To add something as a Subnavigation (Secondary Nav), indent the item underneath what should be its primary item by clicking on the arrows (Right for main nav and left for subnav). For example:
To Edit Items
- Label: Name of the nav item.
- Title Attribute: alternative name for the label.
- CSS Class: this will permit the user to extract a code snipplet that will change the action of the item.
- Page: this column permits the user to look for pages that have already been made (note: this is optional if a page has been set).
- URL: set the URL the label will be linked to. This is mostly used for external links not in your site (note: this is optional if a page has been set). Make sure to use your slug here, i.e. everything after yoursite.com (yoursite.com/slug).
To move the items from row, just drag and drop the rows as soon as the arrows appear.
To Add New Items to Your Navigation
To add a new item to the navigation tabs, scroll to the bottom and click on "Add Another Nav Item":
A new row will appear as soon as it is clicked. Add the information needed.
Publish Your Changes
When you have completed your changes to the navigation, be sure to click the "Save All Changes" button to publish your changes live. Note, it is best to hit "Save and Continue Editing" at this step, because your newly added item will appear by default at the very top.
Then click anywhere on the item you want to move and move it in the appropriate order (i.e. underneath another top-level menu item), then use the blue arrows to indent it - this makes it a sub navigation item.
More! FeatureVideo: Editing your Site's CMS Navigation
Video Transcript
In this video I want to show you how you can make changes to your Navigation Menu on your website. Your Main Navigation Menu is in the header of your site and it will be on every page of your site with links to your news, events, calendar. And as you add new content this video will show you how can add that to your menu as well, so site visitors can find information and content on your site.
I'm logged into the site as an admin so when I mouse over the menu here I get this "edit main navigation" menu button which I click on to come to the editor. Inside of your navigation editor you'll be able to look at a visual representation of your menu right here with these easy drag and drop buttons, for example I can hold the left mouse key down, drag "News" down there, and when I save it, I've now put (the "News" link) right here.
We'll go back to edit it and you'll be able to see we also have the ability to create sub menus, which are menus underneath, for example events has the sub menus for calendar and event photos and the way it looks here is calendar and event photos are indented. If I wanted "Calendar" to come out I would click the left arrow button and save it and now calendar is a main menu item with event photos underneath it.
You can do a couple of other things to add new menu items and on the left side over here we have our pages list. When you add a new page to your site it will automatically show up over here. To add it to your menu you just simply check the box and hit add selected and you see it pops up over here. You can move it to wherever you would like to have it and save it. And now you've got new page for menu video. You can see that the template dynamically expands to make room for larger menu items.
So if you wanted to have a really large menu it would just keep coming down. However, maybe you don't want it to look quite like that so you can edit it again and you'll click on the box here, come to the label and we'll just call this new page and we'll hit save. And now it says new page and that's how you change the way the name of it is. That drop down as you can see here when I click this to uncollapse it, it has the URL for title attributes if you wanted to add a CSS class and if you wanted to remove it you would simply click the remove and save...and now it's not on the menu again.
And if you come back here you can see the page still exists when you remove it, it's just doesn't keep it here in the navigation. You can add custom item, so if you want it to link to an outside website, for example, you would enter the URL, what you wanted to call it and hit save. And now you've got another one that links to an external site.
So it's pretty simple to make changes to your navigation and add things to it. I showed you a little bit about the custom, how to remove, moving them around, and how to create the different tiers by using our indent feature. And hopefully you'll have a lot of fun using this to create a great menu for your site visitors to get around in Tendenci.