How to hide expanded Hamburger menu after selection

Support
#1

Hi There, this is probably a simple fix but I can’t seem to figure out how.

In mobile-view I have a hamburger menu that folds out upon clicking (as it’s supposed to do). However, after selecting a menu option, that expanded menu stays fixed, quite annoying. Only when you click in the hamburger icon itself does it fold. I would like the expanded menu to have the same fold properties so that after you make a menu selection, the expanded menu folds back in.

Hopefully, you can help me. Looking forward to your answer.

#2

Hi @Vectorific_Design,

Please try adding the following code under Theme Options > JS:

jQuery(document).ready(function($) {
	$('.x-navbar .mobile .x-nav li>a').on('touchend click', function(){
		$('.x-btn-navbar').trigger('click');
	});
});

Hope it helps :slight_smile:

#3

Thanks a bunch! That sure did the trick!

#4

One small other thing, I want the hamburger menu to be outlined in the middle (not center) of the header. Now it’s touching the bottom. So basically moved it up a bit. Can you tell me how?

#5

Hey @Vectorific_Design,

Please add this code in X > Theme Options > CSS:

body .masthead-inline .x-btn-navbar {
    margin-top: 12px;
}

Hope this helps.

#6

Thank you, thank you! That did the trick! Hate to trouble you again, but while we’re at it, is it also possible to also move the expanded menu a bit up, because there’s quite a distance now between the hamburger icon and the expanded menu itself.

Also, and this is really the last thing, can I give the expanded menu items a black outline (1px) so it’s more distinguished from the background?

Thanks again!

#7

Hey @Vectorific_Design.

Please add this code as well:

.x-navbar .mobile .x-nav {
    margin-top: 0;
}

.x-nav-wrap.mobile {
    top: 81px;
}

.x-navbar .mobile .x-nav li>a {
    border: 1px solid #000;
}

Here are some related links for further reading:

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Hope this helps.

#8

Thanks you for your extended help Jade! Saved the day :slight_smile:

#9

Glad we could help.

Cheers!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.