Home Forums Tucson Template How to set a menu as sticky in mobile

This topic contains 7 replies, has 2 voices, and was last updated by  SSANG COOL 1 year ago. This post has been viewed 606 times

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #10026584

    SSANG COOL
    Participant

    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


    #10026595

    Support2
    Keymaster

    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 1 year ago by  Support2.
    #10026609

    SSANG COOL
    Participant

    Hi Rodrigo,

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

    Regards,
    SSANG


    #10026611

    SSANG COOL
    Participant
    This reply has been marked as private.
    #10026619

    Support2
    Keymaster

    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.


    #10026634

    SSANG COOL
    Participant
    This reply has been marked as private.
    #10026654

    Support2
    Keymaster

    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.


    #10026674

    SSANG COOL
    Participant
    This reply has been marked as private.
Viewing 8 posts - 1 through 8 (of 8 total)