Replace the "hover" in the mega menu to "click"

[kuroski]

Hello, thank you for this theme, just one of the best!!

Sorry for my English, I’m using a tool to assist me in the translation.

I wonder if you can I remove the “hover” in the mega menu. And make it open with a click instead.

Thanks again =D

---

[Support]

Hello, great, thanks for opening the ticket, here’s my suggestion:

(css/custom.css)

#header nav ul.nav-main li.dropdown:hover > ul {
	display: none;
}

#header nav ul.nav-main li.mega-menu-item.opened > ul {
	display: block !important;
}

#header.flat-menu nav ul.nav-main li.mega-menu-item.opened > a {
    background-color: #fbae3b !important;
    color: #fff;
}

html.boxed #header.flat-menu.single-menu nav ul.nav-main ul.dropdown-menu {
	margin-top: -1px;
}

#header nav.mega-menu ul.nav-main li.mega-menu-item.opened ul.sub-menu li a {
	border: 0 !important;
	background: transparent !important;
}

#header nav ul.nav-main li.dropdown.opened ul.dropdown-menu li > a.mega-menu-sub-title {
    font-size: 14px;
    font-weight: bold;
}

JS
(js/custom.js)

$('#header .mega-menu-item .dropdown-toggle').on('click', function() {
	$(this).parent().toggleClass('opened');
});

Kind Regards.

---

[kuroski]

Thanks for the reply, this is basically what you sent.

I only had to make two changes

custom.css

#header nav ul.nav-main li.dropdown > a {
  border-top-width: 4px !important;
}

#header nav ul.nav-main li.dropdown:hover > a {
  margin-bottom: 0 !important;
}

custom.js

$(document).click(function(){
  $('#header .mega-menu-item .dropdown-toggle').parent().removeClass('opened');
});

$('#header .mega-menu-item .dropdown-toggle').parent().click(function(e){
  e.stopPropagation();
});
$('#header .mega-menu-item .dropdown-toggle').on('click', function() {
	$(this).parent().toggleClass('opened');
});

Is there a better way for me to do this?

For all I did was:

• Fix the edge of the menu, when you pass the mouse over the menu, it gives a “bounced” up and down
• Changed mega menu to close when click away

---

[Support]

Hello, that’s great, yes, it’s perfect the way you did.

I just tested it here and it’s looking good.

Let me know if you need further assistance.

Kind Regards

---

[kuroski]

Thank you for your help ^^

---

[Author]

Posts