Join Jen Kramer for an in-depth discussion in this video Configuring horizontal main navigation and vertical secondary navigation, part of Joomla! 3 Essential Training: 1 Working with Content.
- So currently on our website here, we have an About Us link that has some subnavigation with Other Locations and History as those subnavigation items. Right now, when you're on the About Us page, you see that subnavigation. If you're on a page like Home, let's say, you don't see that subnavigation. What if you wanted to split up this Main Menu, so that, perhaps, you had your main navigational items like Home, About Us, and Local Attractions going horizontally across the page, and then when you come to the About Us portion of the website, perhaps these subnavigation items show up in a little menu over here on the side? This is completely possible to configure with Joomla!.
Remember what I have told you before, that your Menu Manager in the back end of Joomla! is responsible for creating all of these menu items. Whereas, the Menu Module is responsible for how those are displayed. One of the common mistakes that people new to Joomla! make is they'll create a second separate menu under the Menu Manager that contains your sub-navigation, basically duplicated. And what happens then is you wind up with multiple URLs pointing to the same piece of content which is a big search engine optimization no.
So if you do wind up splitting up your menus like this, there's a proper way of doing that, and it comes from leveraging these Modules. So, I'll show you how to do that right now. So, here in the back end of Joomla!, we're going to go to Extensions, Module Manager. And as you know, we have a Module right here called the Main Menu which is displayed in a specific position in our template. The template is the portion of Joomla! that's responsible for the look and feel of the website, all the colors, the layout, and so forth.
And you can program as many or as few of these Module Positions into a template as you want. So, how do we find out what our Module Positions are inside of our Joomla! template? Well, that's pretty straight forward. We're going to go to Extensions, Template Manager. And before we do anything, go up here to Options and say, "Preview Module Positions, Enabled". You should only have to do this once. But, if you'll do that, you'll notice that we get some little eyeballs that appear here next to the names of our various templates.
Right now, there's two templates in use on this Joomla! website. One is the Protostar template which is a website template, in other words, for the front end. And we have Isis which is an Administrator template, which is in use for the back end of the website. So, Protostar is the one that's of interest to us. If you click on the eyeball right here, this will show you all of the Module Postions that are available right now inside of Joomla! So, we probably want to take this Main Menu which is currently over here in position-7.
And we'd like to move it up here to position-1 where we have a nice Module Position that goes all the way across the page. So, let's go ahead and make that happen first. We'll go to the back end of Joomla! here and we'll go back to Extensions, Module Manager. We'll go to our Main Menu and over here on the side where it says, "Position", we'll change this to... If you look under Protostar, you'll notice that it actually has a specification of Navigation in position-1.
In other words, it's designed, actually, for the navigation to go there. Go ahead and choose that and say, "Save". And if you Refresh the front end of your website, you'll notice that you get your navigation showing up here on the top of the web page. So, right now, what we have is our navigation. In this case, these are stacked on top of each other. Notice we do have a drop-down that's appearing here for About Us, as well. We probably don't want this navigation stacked like this. So, we need to make another adjustment here inside of our Modules.
The way we can do that is go to the Advanced tab here in our Module. And here, where it says, "Menu Class Suffix", type the following, space followed by n-a-v, as in nav, hyphen, pills, okay. So," nav-pills". For those of you who know something about CSS, this is adding a class of nav-pills to a portion of our HTML. The space in front of it will make this a separate class rather than running nav-pills into whatever additional classes might be assigned on this particular HTML tag.
And if you go ahead and say, "Save", what we'll have now, on the front end of the website, is our horizontal navigation. And this has actually got our drop-downs here, as well. So, that's how you would set this up with drop-downs. What if you actually wanted to break off this navigation and set it up as a separate module over here on the side? That can also be done. Go back here to your Module that you've been working on. And what we're going to do is change the end level here to 1.
So, what we're going to do is we'll have our Start Level and our End Level, both at 1. In other words, we're going to show only one level of navigation. Go on ahead and say, "Save" again, and Refresh your web page. And now, you should not see that subnavigation here at all, okay. So now, we have just our standard navigation, top level only. So, we've filtered out these drop-downs and we've filtered out a second level of navigation. To get that back and appear as a separate subnavigation Module over here on the left side, here's what we're going to do.
Go ahead and say, "Save & Close" for this module, then put a check mark next to it and say, "Duplicate". So, this will make a copy of this Module. Go on ahead and click on it to Select it. And we're going to change the Title here to right subnavigation. And we're going to Hide the Title. We'll set the Position back to position-7. So, Protostar, Right [position-7]. We'll set our Status to Published.
And this time for our Start Level, we're going to set that to 2. In other words, to our second level of navigation. And our End Level will just be All. So, if we have 3 or 4 or 5 levels of navigation, all of it will show up over in this right-side Module. But, not the top level of navigation. So, let's go ahead and say, "Save". And if we come back to front end of the website and hit Refresh, we won't see that Module here on the Home Page because there is no subnavigation for Home.
But, if we go to the About Us page, we'll see the subnavigation show up here with our two additional navigation items. So maybe, this isn't looking so good just by itself hanging out here, as Other Locations and History. People may not be clear what that is. So, we could have the Title Show. But, the Title that would Show would be this right subnavigation, not necessarily the best user experience. Perhaps, we could say something like, "In this section...", and say, "Save", and Refresh.
And so now, this is a little bit more clear of what's going on. This is some subnavigation that's happening within this section of the website. So that's how you would take your main navigation and split this into a separate subnavigation on the side of your website.
Note: For installation and setup instructions, see the course Installing and Running Joomla! 3: Local and Web-Hosted Sites.
- Touring the Joomla! interface
- Creating and editing categories
- Adding links and images to articles
- Creating basic menus
- Adding version control and keywords
- Configuring category lists
- Creating a dropdown menu
- Changing display settings
Skill Level Beginner
Q: This course was updated on 05/30/2018. What changed?
A: We added a chapter on the new features in Joomla 3.8.6.