Hello there,
I wish I could display submenus of my Superfish main menu by hovering primary links and not clicking on them.
Can you give me hints about it ?
Regards
Thu, 05/28/2015 - 09:35
#1
Superfish submenu showing with hover instead of click
Hi,
You can write a css yourself to edit it, or you can send us your site url, admin and FTP accounts (forum link as well) via this email: [email protected] so we can help you
Ok, I couldn't figure (and still can't) where is defined the click or focus behaviour of this since the superfish menu you include in MD Alpine is a mix of superfish and bootstrap.
Indeed, adding something this works :
.navbar .dropdown-toggle:hover+.dropdown-menu, .navbar .dropdown-menu:hover {
display: block !important;
visibility: visible !important;
}
But I couldn't find a way to make the submenu appear with a transition of some kind.
Thx anyway
There is a suggestion.
In file style.css, insert the following:
@media screen and (min-width: 780px) {
.navbar .dropdown:hover .dropdown-menu{
display: block;
}
}
Your solution won't work for 2 reasons :
- submenus (.dropdown-menu) are hidden two simultaneous way: display: none; and visibility: hidden; So you have to add display: block; but also visibility: visible; to counter that.
- the two css properties are applied as inline styles on .dropdown-menu HTML element, so these styles are applied prior to any properties we define to counter that in a stylesheet like style.css. The only way to make your code applied in priority is to force it with !important instructions like I've done.
To conclude, your code, with my adds, could work only when primary menu item is hovered but as soon as you move the mouse in the submenu, it disappears since you stop hovering the primary link. That's why I apply the same properties on the submenu itself when hovered so that it remains open.
Thanks anyway.
Could you send us your site url, admin account (forum link as well) via email: [email protected]? We would like to help you.
And some screenshots are good too.
I forgot to ask :
Now the submenus are showing on hover.
But the parent menu item link is not working. Do you have an idea to make it work properly ?
So,
Please send us your information to our email. We would like to check it for you.
Have you added anchor yet?
We checked your menu S'inscrine had anchor to #team, but we found no id team on your site.
We think it cause problem your menu not working.
Hello,
You are right, this anchor wasleading nowhere. We removed it but as you can see the problem is still there :
- 'Pros' menu item is a link to a standalone page and works
- '<username>' menu item (showing when your logged) is a link to the /user page, it has a submenu (with 'Deconnexion' link) and does not work
We guess something is blocking the click event, perhaps a jquery event.preventDefault() somewhere, but can't figure where.
The menu was designed to work like that.
Parent menu item which has submenu can not link to other page, because when setting redirect link, children menus can not be appear on mobile.
Understood, thanks for your time