I'm getting to grips with the LittleBoy template now, and I have a question which our client has asked.
Currently, in the top navigation, submenus are pulled down through a mouseover. Our client has requested that they would prefer submenus to be accessed when the user clicks the respective top nav item.
Open the templates "bootstrap_extend.css" file and search for:
/* Displays Dropdown Menus also by Mouse over */
li.dropdown:hover ul {display:block;}
.dropdown-menu {margin: -1px 00;}
Delet it.
But please note: It just makes sense if you use a "text separator" link type instead of real working system links in your main menu.
If you have a working main menu link with submenu items and someone click on the main menu item to see the submenu Joomla will load the reference page and you will see the drop down just for a moment till the new page comes up.
So make sure you use "text separators" (<- just text, no link) as main menu item before you add submenu links to it.
Great to hear from you and thanks for your help - as always
That's wonderful, thank you.
However, implementing this change has thrown up a different issue.
I was using Menu Heading for my parent menu links. Changing them to Text Separator changes their styling and I cannot click them.
Do you know as to whether there is a place somewhere template code, where I can change the "Text Separator" type for it to look and act the same as "Menu Heading"?
Basically you can style the separator like a link. But it will stay a normal text and will not act like a link. You can change the coursor appearance so that it "feels" like you should click on it to make sure a user will do that to see the submenu.
The class to style a text separator in the main menu is:
.logo_area_wrapper .navbar .nav > li > span.separator
For example add this at the bottom of your templates style.css:
.logo_area_wrapper .navbar .nav > li > span.separator {line-height:40px;padding:0 10px;cursor:pointer;}
.logo_area_wrapper .navbar .nav > li > span.separator:hover {color:#fff;}
Especially with the "cursor:pointer" command the mouse cursor will look like if you point it on a link.
