menu issues: dropdown behaviour when clicked

Sparkling
1

Dear support,

first of all I want to thank you for this amazing free theme, that allows me to develop my first website and made me learn so much about html and css.

My site is https://www.vezvez.org. I am using the sparkling child theme to edit my individual css-code. No plugins are active on my site.
My problem concerns the navigation bar menu. I added the “dropdown-header” html-attribute to my main menu items and edited the colors via css. The dropdown-menu opens on mouse-hover, which is normal, but when I click on it, the subitems are greyed out. This means that their fontcolor is changed to the color for the mobile menu. That would be normal behaviour for the mobile-menu, but I do not want it to happen when the page has normal size and a user just by accident clicks on the menu items. And also, when clicked, the menu stays open, even when moving the mouse out. Also the menu item keeps the active-color and does not switch back to inactive.

How can I resolve this, so that the main menu items are either not clickable at all or do not show this behaviour?

Another little problem is, that when the mobile menu has been used and one of the submenus has been opened, and then the window is switched back to normal size again, that menu stays open and still has the mobile-menu colors.

I found this to already happen with a clean install of the sparkling theme. Could you help me? With kind regards and thanks in advance,
darjeeling

2

Hi Darjeeling,

I hope you are well today and thank you for your question.

How can I resolve this, so that the main menu items are either not clickable at all or do not show this behaviour?

You can try resolving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

@media (min-width: 768px){
#page .open>.dropdown-menu {
    display: none;
}
#page li.open:hover >.dropdown-menu {
    display: block;
}
#page .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #252224;
}
}
Another little problem is, that when the mobile menu has been used and one of the submenus has been opened, and then the window is switched back to normal size again, that menu stays open and still has the mobile-menu colors.

It will stay open because you have opened it so this is not an issue and mobile menu colors on it so could you please share the screenshot of it?

Best Regards,
Movin

3

Thank you movin, that helped me a lot (please excuse this late reply, this week has been quite busy). Also the second issue is now solved.

As an alternative to the above solution, could you tell me how I can make the menu open only on click, and not on hover, so that is becomes dropdown on click menu?

4

You are most welcome here :slight_smile:

To help us keep support thread separates could you please create new thread for each of your other questions here https://colorlibsupport.com/c/sparkling/ instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.