Docs

[Satchel L]

Hello,

Okay, so this one might be complicated. But I think I know why this is happening. I used the following code to make my nav bar shrink on scroll down. But now when use my sub menu which are all anchor links, there is a gap at the top of the page. It seems the space is the difference of the nav bar height from regular size to scroll down.

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: height 2s, padding-top 2s;
    transition: height 2s, padding-top 2s;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 2s;
    transition: min-height 2s;
}
.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 20px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
max-width: 400px;
padding:0;
margin-top:5px;
margin-bottom:-120px;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
min-height: 60px;
}

if($(this).scrollTop()<=0) {
$('.x-navbar').removeClass('x-navbar-fixed-top x-container-fluid max width');
}

});

});

jQuery(function($) {
 $(window).scroll(function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar-fixed-top .x-brand img').attr('src','/wp-content/uploads/2016/12/LogoMark.png');
   }else{
     $('.x-navbar .x-brand img').attr('src','/wp-content/uploads/2017/01/Logo34.png');
   }
 });
});

Site URL: vitkusortho.com or http://9c4.eb6.myftpupload.com/

[Satchel L]

Screenshot attached

[Paul R]

Hi,

Upon checking, I can see your site is no longer using xtheme.

Please activate xtheme so we can help.

Thanks

[Satchel L]

Should be good to go now

http://vitkusortho.com/

[Rue Nel]

Hello There,

Thanks for updating in! Please have your JS code updated and use this instead:

jQuery(function($) {
 $(window).scroll(function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar-fixed-top .x-brand img').attr('src','/wp-content/uploads/2016/12/LogoMark.png');
     $('.x-navbar-wrap').css("height", "60px");
   }else{
     $('.x-navbar .x-brand img').attr('src','/wp-content/uploads/2017/01/Logo34.png');
     $('.x-navbar-wrap').css("height", "120px");
   }
 });
});

jQuery(function($) {	
	$(document).ready(function(){
		$( '.x-navbar a').on('touchstart click', function(e){
			e.preventDefault();
			var href = $(this).attr('href');
			var hash = href.split('#')[1];
			if ( hash !== undefined ) {
			    var mastheadHeight       = $('.masthead').outerHeight();
			    var navbarFixedTopHeight = $('.x-navbar-wrap').outerHeight();
			    var heightSum            = mastheadHeight - navbarFixedTopHeight;

			    $('html, body').animate({
			      scrollTop: $('#' + hash + '').offset().top
			    }, 850, 'easeInOutExpo');
		    }
		    console.log( $('#' + hash + '').offset().top );
		});
	});
});

We would loved to know if this has work for you. Thank you.

[Satchel L]

Thanks,

None of my nav bar or sub menu bars links are working. You click and nothing happens.

It seems there are some more issues here. When on mobile when I scroll down then scroll back up there is a gap between the slider and the nav. See screenshot.

On desktop when I click this link from the menu bar: http://vitkusortho.com/treatment-options/#damon-braces , it brings me to the correct place, but when on mobile it brings me to the top of the page.

[Satchel L]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in! I have modified the JS code and use this instead:

jQuery(function($) {
 $(window).scroll(function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar-fixed-top .x-brand img').attr('src','/wp-content/uploads/2016/12/LogoMark.png');
     $('.x-navbar-wrap').css("height", "60px");
   }else{
     $('.x-navbar .x-brand img').attr('src','/wp-content/uploads/2017/01/Logo34.png');
     $('.x-navbar-wrap').css("height", "120px");
   }
 });
});

jQuery(function($) {	
	$(document).ready(function(){
		$( '.x-navbar .x-nav-wrap .x-nav > li > a').on('touchstart click', function(e){
			
			var href = $(this).attr('href');
			var hash = href.split('#')[1];
			if ( hash !== undefined ) {
				e.preventDefault();
			    var mastheadHeight       = $('.masthead').outerHeight();
			    var navbarFixedTopHeight = $('.x-navbar-wrap').outerHeight();
			    var heightSum            = mastheadHeight - navbarFixedTopHeight;
			    var location = $('#' + hash + '');
			    var position = location.offset();

			    $('html, body').animate({
			      scrollTop: position.top
			    }, 850, 'easeInOutExpo');
		    }
		    console.log( position );
		});
	});
});

Please check your site now.

[Satchel L]

The links are working but there is still a gap between the top of the page and the first section if you scroll down then scroll back up on mobile. Also there is error code in my heading. I have debug mode turend off in my WP config file.

See screenshot

[Christopher]

Hi there,

Please add this block of CSS :

@media (max-width: 979px){
body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto !important;
}
}

Hope it helps.

[Satchel L]

Thank you, that did help however the last issue has not been addressed:

On desktop when I click this link from the menu bar: http://vitkusortho.com/treatment-options/#damon-braces , it brings me to the correct place, but when on mobile it brings me to the top of the page.

[Rad]

Hi there,

Please change this code,

jQuery(function($) {
 $(window).scroll(function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar-fixed-top .x-brand img').attr('src','/wp-content/uploads/2016/12/LogoMark.png');
     $('.x-navbar-wrap').css("height", "60px");
   }else{
     $('.x-navbar .x-brand img').attr('src','/wp-content/uploads/2017/01/Logo34.png');
     $('.x-navbar-wrap').css("height", "120px");
   }
 });
});

jQuery(function($) {	
	$(document).ready(function(){
		$( '.x-navbar .x-nav-wrap .x-nav > li > a').on('touchstart click', function(e){
			
			var href = $(this).attr('href');
			var hash = href.split('#')[1];
			if ( hash !== undefined ) {
				e.preventDefault();
			    var mastheadHeight       = $('.masthead').outerHeight();
			    var navbarFixedTopHeight = $('.x-navbar-wrap').outerHeight();
			    var heightSum            = mastheadHeight - navbarFixedTopHeight;
			    var location = $('#' + hash + '');
			    var position = location.offset();

			    $('html, body').animate({
			      scrollTop: position.top
			    }, 850, 'easeInOutExpo');
		    }
		    console.log( position );
		});
	});
});

to this

jQuery(function($) {
 $(window).scroll(function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar-fixed-top .x-brand img').attr('src','/wp-content/uploads/2016/12/LogoMark.png');
     $('.x-navbar-wrap').css("height", "60px");
   }else{
     $('.x-navbar .x-brand img').attr('src','/wp-content/uploads/2017/01/Logo34.png');
     $('.x-navbar-wrap').css("height", "120px");
   }
 });
});

jQuery(function($) {	
	$(document).ready(function(){
		$( '.x-navbar a').off('touchstart touchend').on('click', function(e){
			
			var href = $(this).attr('href');
			var hash = href.split('#')[1];
			if ( hash !== undefined ) {
				e.preventDefault();
			    var mastheadHeight       = $('.masthead').outerHeight();
			    var navbarFixedTopHeight = $('.x-navbar-wrap').outerHeight();
			    var heightSum            = mastheadHeight - navbarFixedTopHeight;
			    var location = $('#' + hash + '');
			    var position = location.offset();

			    $('html, body').stop().animate({
			      scrollTop: position.top
			    }, 850, 'easeInOutExpo');
		    }
		    console.log( position );
		});

var current_hash = window.location.href.split('#')[1];
var deviceClass = $(window).width() <= 979 ? '.mobile' : '.desktop' ; //just to make sure to only trigger the scrolling once
$( '.x-navbar ' + deviceClass + ' a[href*="#' + current_hash + '"]').trigger('click');

 

	});
});

But it will still not work because you have two sections with the same ID. You have one section displayed on desktop with the ID of damon-braces and another section displayed on mobile with the same ID of damon-braces. You should only create one section with one ID. Example

[section id="damon-braces"]
[row desktop]content for desktop[/row]
[row mobile]content for mobile[/row]
[/section]

Don’t follow the sample as is, I just provided it to demonstrate the hierarchy of section, rows, and visibility that you should use. You can inspect a section and manage its layout, you’ll see the row there and you can add more, and even inspect the row for visibility. The main idea is to have one section wrapped them all with only one ID.

Thanks!

[Satchel L]

Okay, then what would be the best method to serve a second menu based on mobile? Since they are navigating from the main nav bar. Add a class to the menu item and hide using media queries?

[Lely]

Hello Satchel,

No need to serve a second menu for mobile. It is fine to have same menu, same link. As you can see from the previous example, damon-braces is a section that holds the content for both desktop and menu. Visibility is set on the ROW which is the content inside the section. So damon-braces is always visible and that is where the links scroll. It is the content inside that is hidden per screen view.

Hope this clarifies.

[Satchel L]

Okay, I’ve updated the JS and changed the structure so the links are now correctly directing to the right sections of the pages. HOWEVER, the new JS has caused the sub menu not to work! The same problem from https://community.theme.co/forums/topic/anchor-link-landing-position/#post-1375552

[Author]

Posts