Home Forums Porto Template Hamburger menu Navlink with data-section-scroll-title

This topic contains 7 replies, has 2 voices, and was last updated by  idirlogistica 6 days, 1 hour ago. This post has been viewed 99 times

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

    idirlogistica
    Participant

    Hello again,
    I’m trying to modify my website according to the index-portfolio-5 template.

    I’ve attached here my url with my test.

    I was able to change the submenu navigation (the dots on the right).

    Now I got a question. Is possible to use alsothe hamburger menu to navigate inside it.

    I’ll try to explain myself …. I want to open the hamburger menu and after a click on “how” (for istance) I’d like my hamburger to close and get me to that section ( just like the side navigator does …. it’s a replication but I need it).

    Any idea?

    Thx


    #10028992

    idirlogistica
    Participant
    This reply has been marked as private.
    #10028993

    idirlogistica
    Participant

    Sorry for spam but I’ve just noticed that it works but after I use hambuger menu I cannot navigate anymore with scroll mouse ….. I still need help 😛


    #10028996

    Support2
    Keymaster

    Hello,

    To fix those issues in your customization, please follow the steps below:

    1) Change the overlay menu HTML to this:

    <ul class="nav nav-pills" id="mainNav">
    	<li class="">
    		<a class="nav-link" href="#" data-nav-id="0">
    			Home
    		</a>
    	</li>
    	<li class="">
    		<a class="nav-link" href="#" data-nav-id="1">
    			Incentive 2019
    		</a>
    	</li>
    	<li class="">
    		<a class="nav-link" href="#" data-nav-id="2">
    			Location
    		</a>
    	</li>
    	<li class="">
    		<a class="nav-link" href="#" data-nav-id="3">
    			Come partecipare
    		</a>
    	</li>
    </ul>

    * 0 is the first section.
    * 1 is the second section.
    * etc….

    2) Change your custom script code to:

    $(document).ready(function(){
      	$('.nav-link').click(function(){
    	    $("#header").addClass("side-header-hide");
    	    setTimeout(function(){
    	    	$("html").removeClass("side-header-hide");
    	    }, 500);
    	});
    });

    3) Add in (js/custom.js):

    $.extend(theme.PluginSectionScroll.prototype, {
    	dotsNavigation: function() {
    		var self = this;
    
    		var dotsNav = $('<div class="section-scroll-dots-navigation"><ul class="list list-unstyled"></ul></div>'),
        		currentSectionIndex = self.getCurrentIndex();
    
        	if( self.options.dotsClass ) {
        		dotsNav.addClass( self.options.dotsClass );
        	}
    
        	for( var i = 0; i < $('.section-scroll').length; i++ ) {
        		var title = $('.section-wrapper').eq( i ).find('.section-scroll').data('section-scroll-title');
    
        		dotsNav.find('> ul').append( '<li'+ ( ( currentSectionIndex == i ) ? ' class="active"' : '' ) +'><a href="#'+ i +'" data-nav-id="'+ i +'"><span>'+ title +'</span></a></li>' );
        	}
    
        	$('.body').append( dotsNav );
    
        	$('a[data-nav-id]').on('click touchstart', function(e){
        		e.preventDefault();
        		var $this = $(this);
    
        		$('.section-scroll').css({
        			opacity: 0,
        			transition: 'ease opacity 300ms'
        		});
    
        		self.$header.css({
    		    	opacity: 0,
    		    	transition: 'ease opacity 500ms'
    		    });
    
        		setTimeout(function(){
            		self.moveTo( $('.section-wrapper').eq( $this.data('nav-id') ).offset().top )
    
    	   			$('.section-wrapper').removeClass('active');
    		   		$('.section-wrapper').eq( $this.data('nav-id') ).addClass('active');
    
            		$('.section-wrapper').eq( self.getCurrentIndex() ).find('.section-scroll').css({
            			opacity: 1
            		});
    
            		setTimeout(function(){
    	        		$('.section-scroll').css({ opacity: 1 });
    
    	        		$(window).trigger('section.scroll.change.header.color');
            		}, 500);
    
            		self.changeDotsActiveState();
        		}, 500);
        	});
    
    		return this;
    	}
    });

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

    Kind Regards,

    Rodrigo.


    #10028997

    idirlogistica
    Participant
    This reply has been marked as private.
    #10029000

    idirlogistica
    Participant

    Just last info. This seems not working on mobile (tested with iphone and xiaomi).
    Is this a problem of media query? I think I’ll display:none the hamburger on mobile but now I just wonder why this give all this problems! 🙂
    You can check with any mobile (i think)


    #10029001

    Support2
    Keymaster

    Hello,

    We did a test with iPhone and it’s working properly.
    Try to clear your smartphone browser cache.

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

    Kind Regards,

    Rodrigo.


    #10029002

    idirlogistica
    Participant

    Hi Rodriguo,
    everything is fine now!

    Thanks again.


Viewing 8 posts - 1 through 8 (of 8 total)