Dropdown User Menu Not Fixed
Anthony m
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.
Pavel
Accepted AnswerHi. You should use your own js to make it. You can take js part from here https://www.w3schools.com/howto/howto_js_dropdown.asp and adapt it
Paul Frankowski
Accepted AnswerCiao,
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
Accepted AnswerThanks 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
Accepted AnswerIf 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
Accepted AnswerThanks 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