Dropdown user menu not fixed - Forum | JoomShaper
Awaiting an answer Helix Framework

Dropdown user menu not fixed

Asked by Anthony m 4 years ago Last activity 4 years ago

Hi everyone,
I have a little problem with the helix ultimate template's default login module.
As you can see from the video, when the mouse passes the dropdown of the user menu opens but it does not remain open permanently, so it is not possible to click on the menu items, profile or logout.
To the class I added a "margin-top: 20px" as from a smartphone without it it was so sensitive that it made the first menu item open directly, it was impossible to select anything else.
Now from the desktop, however, if I click on the username, as you can see, the dropdown menu does not remain open, it only works on hover, and therefore is unusable.
Is there a way to make it work not on hover but only if clicked? and above all that once clicked it remains open fixed?
here a demonstration:
https://drive.google.com/file/d/1d6bKixwWX8Q1JtRw-RrpAFMwO8poUvYL/view?usp=sharing

I add:
If clicked on a smartphone, the pop-up remains open, but on a computer it does not, it works only when the mouse is hovered over
Thank you.

5 replies

Oldest first Newest first Most helpful
Paul Frankowski Senior Staff
4 years ago · edited

Ciao,

Unfortunately, but this cannot be done only from the template settings, it requires using extra code.

I am pretty sure that solution shared by Pavel should help. But implemenation is on your hands. It's beyond support.

BTW

You can disable animation for MegaMenu and using CSS move Submenu box higher, it should help a little bit.

Anthony m Asked this
4 years ago

Thanks for the answer to both of them, I just needed the point to see where to act .. obviously with the additional code it will be in my hands.
Could you just help me find the file in which that function is included? so then that I can modify it with my own code.
I just need the path to the file

Pavel
4 years ago · edited

If you edit the code in the template files, you will lose all changes after the update. Use сustom.css and сustom.js files.

To disable hover behavior you should add following code to custom.css

.sp-profile-wrapper:hover .sp-profile-dropdown {
    display: none !important;
}

And then write your code in custom.js for on click event.

Or you can use jQuery (in custom.js) to just connect Bootstrap Dropdown via adding data atributes to the desired elements, and not write the entire functionality from scratch. That will be much easier.
https://getbootstrap.com/docs/5.0/components/dropdowns/

Anthony m Asked this
4 years ago

Thanks Pavel for your advice and your commitment.
I went both ways, tried various js solutions, but couldn't get it to work. I have been many hours trying to configure it but unfortunately without success. it is my limit unfortunately. I'll play it again even if I think I'll have to give up.
thank you

Log in to reply.