Join Jen Kramer for an in-depth discussion in this video Adding products, moving the main menu, and configuring a dropdown menu, part of Joomla! 3 Essential Training.
The next thing that I'd like to do is I'd like to show you how dropdown menus work inside of Protostar. Oh my goodness! Isn't that a wonderful thing? Yes, Protostar ships with dropdown menus, it's the first Joomla! template that's shipped with Joomla! that has dropdown menus built into it. And we can thank the Bootstrap framework for the presence of those dropdown menus. So I would like to show you how to configure that. Before we get started with that I need to add one more a menu item; that is our Products menu, we haven't added that yet.
I am going to go ahead and build out that products part of this Main Menu first and then I will show you how to start configuring those dropdowns. So here in the back end of Joomla! I'm going to start by going to Menus>Main Menu. And I am actually just going to use this Add New Menu Item over here that flies out right over on the side, that will put me right into the screen where I can start adding menu items. And I am going to select an article, just a single article, and this will be our products page. So I'm going to select my article. Incidentally, now my list of articles here is getting a little bit long.
Notice, I have all these nice filters that show up here across the top, I'm just interested right now in my products, so I can choose products right here from the list. And there is just my product pages, that's the ones I need to link to, so I am going to pick my Products page here, give this a title of products. And that will go right there on the very top level and same level as home for my Web site and I am going to say Save a New. I am going to add my next item, I am just going to hit my Select button, Articles>Single Article, all of these products pages are all going to be single articles.
And I'm just going to link to this list and I am just going to start here at the top with energy bulbs and I am going to work my way on down the list. And I am going to make my menu title the same as my article title, so that K-Eco Energy Bulbs. And remember the one thing that's different with this one is that my parent item is not the menu root, my parent item is now products. And it will be products for all of these additional items and I'm sliding in here underneath products. So I am going to click Save a New again.
I am going to repeat this process for the remaining products items and I'll see you on the other side. And there we go, I have just configured my last item here, I am going to go ahead and Save & Close. And now here in my Menu structure you see that I have products, I have my four products listed underneath. And when I go to the frontend of the Web site and I hit Refresh, I have my Products link that shows up, when I click on it I wind up with my additional pages listed underneath, the Energy Bulbs, the Low-Flow Shower Head, the Mini Panel and the Solar Mug, terrific.
So the next thing I would like to do is I would like to move this main menu from its location here on the right side of the screen up to the top and somewhere around in this general area there is a spot for modules called Navigation, where I can put this navigation bar and it will show up going horizontally. And that's exactly what I want to do. So what I need to do to move the location of a menu on the page, remember, goes through the modules. So the modules are located here in the back end of Joomla! under Extensions>Module Manager.
And inside of the Module Manager we have our module called Main Menu, it's currently in position seven. And I will show you how to find where those positions are how they are mapped out on the page here in a later video. But for right now just click on Main Menu to edit it. And here for the position right now it's located on the right. What I would like to do is change that, I am going to change it to Navigation. So I am going to go ahead and select Navigation from the list, and say Save & Close. When I refresh the front end of the Web site, my module will have moved from over here on the right side of the screen up to the top.
And you'll see that we have some dropdowns. Hey! Look at that, how cool is that? And that dropdown is only showing up here in the Products page. Interestingly, that's because we're within the Products section of the Web site. If I go back to home, you will notice that that dropdown for Products disappears. We know we have sub-navigation for About when I click on the About link, I have a dropdown that appears here. But again no dropdown for Products. So why is this happening? Well, remember when this module was displayed on the right side of the site, we had the sub-navigation show up, when we were on the specific areas.
What we like to do now though is, we would always like to have those dropdowns available, no matter where we in the Web site. The other thing we need to have happen is we need to have this navigation bar go horizontally across the page rather than stacked in a vertical manner the way it is right now. So, here's what we need to do, let's go back into Main Menu and let's fix this dropdown issue first. We want to have the dropdowns available on every page of the Web site all the time. So what we are going to do to have all of our menu items show in a dropdown menu and have them show on every page of the Web site all the time, here in our Basic options we are going to go to this item here called Shows Submenu Items, right now that's set to No.
And the way that that works is the behavior we are seeing when this module was on the right side of the page. When you are the Products section, you saw the sub navigation for products, but you didn't see the sub navigation for About. What we are going to do now is, we are going to say Show Sub-menu Items all the time, by setting this to Yes. When you set this to Yes, if this module was on the right of the screen, you'd always see the sub navigation all the time, which doesn't necessarily work for that display. But it works great for a dropdown menu because whenever you roll your mouse over About or Products the dropdown menu will appear.
Go ahead and just say Save and when we refresh the front end of the Web site, now we'll see the drop downs appear for About and the dropdowns will appear for Products right here. So that's really cool. Of course, we also have a dropdown for News & Info. None for home because we don't have any sub-navigation for home. So the last problem we need to solve is how do we make this navigation bar go horizontally across the page? Fortunately, that is a property that's built-in to Bootstrap. Bootstrap has a style that's built into its stylesheet called Nav-pills and this particular class formats navigation bar to go horizontally across the page.
So to configure this, all we need to do is now go to our Advanced Options. And here where you have got a menu class suffix, what I would like for you to type in is the following, a space followed by nav-pills. Why the space first? Well, what's going to happen in this particular text, nav-pills will be put into the class attribute inside of the appropriate HTML tag, and there may be already be some other classes present, in fact there are in the back end of Joomla!.
And if you just put in nav-pills without the space in front of that you'll wind up running this into making a whole new class names. So it will be something like menunav-pills. What we want to have is the class of menu separate from the class of nav-pills and that's why we put a space in front of this. So go ahead and save one more time and when we refresh this page, our navigation is now going horizontally across the page and we have dropdowns which all work really, really well and of course we can now navigate freely around the Web site skipping about to whatever page we want to go to without necessarily visiting the top-level page first.
This same formatting here that I just put up here on the top for this nav-pills we can now apply down here to the bottom to the Footer menu. So let's go ahead and take care of that while we're here, we will go ahead and say Save & Close. And now down here in the Footer menu, we will do exactly the same thing. If we go to the Advanced Options to the Menu Class Suffix space nav-pills and say Save & Close. And if we refresh the front end of the Web site, now our navigation is going horizontally down here on the bottom as well.
So that's pretty cool, we've added a new navigation item, the products with all of its sub navigation, we moved our menu module to appear at the top of the screen and we configured our dropdown menus all at the same time.
- What is Joomla!?
- Completing Joomla! installation
- Planning your website
- Organizing content in Joomla!
- Creating categories, articles, and menus
- Formatting text and images
- Using modules and components
- Identifying and installing good-quality third-party extensions and templates
- Supporting multiple languages with Joomla!
- Managing users and their permissions
- Changing the look of the site with templates
- Launching your site