How to set a menu as sticky in mobile

[SSANG COOL]

Hi team,

Can I ask you something? For desktop, main menu is sticky when we scroll down, but for mobile, hamburger menu is not sticky. How should we set a hamburger menu as sticky for mobile (phone and tablet)?

Thanks,
SSANG

---

[Support]

Hello,

To do that, just add the code below in (js/custom.js):

$.extend(theme.StickyMenu.defaults, {
    stickyEnableOnMobile: true
});

Please try that and let me know if you need further assistance.

Kind Regards,

Rodrigo

---

• This reply was modified 7 years, 7 months ago by Support.

[SSANG COOL]

Hi Rodrigo,

Thank you so much for your quick workaround. It works!!!

Regards,
SSANG

---

[SSANG COOL]

This reply has been marked as private.

[Support]

Hello Sang,

1) Just add the code below in (css/custom.css):

#header {
	padding: 10px 0px !important;
}

#header .logo {
    padding-bottom: 10px !important;
    padding-top: 10px;
}

.logo img {
	width: auto !important;
	height: auto !important;
}

body.sticky-menu-active #header {
	top: 0;
}

@media(max-width: 991px) {
	.btn-responsive-nav {
		margin-top: -7px;
	}
}

2) Tucson doesn’t come this functionality by default, but you can easily add with the code below at (js/custom.js):

$(window).on('click touchend', function(e){
	var target = e.target;

	if( !target.closest('#header') ) {
		$('.nav-main-collapse').collapse('hide');
	}
});

Please, try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[SSANG COOL]

This reply has been marked as private.

[Support]

Hello Sang,

1) Change the JS code to:

var flag = false;
$('.btn-responsive-nav').on('click', function(){
	if( !flag ) {
		$(window).on('click touchend', function(e){
			var target = e.target;

			if( !target.closest('#header') ) {
				$('.nav-main-collapse').collapse('hide');
			}
		});
	}

	flag = true;
});

2) Sorry but unfortunately this feature isn’t with fixed menus (that is the case of sticky menu on mobile).

Kind Regards,

Rodrigo.

---

[SSANG COOL]

This reply has been marked as private.

[Author]

Posts