Jump when scorlling on gallery

carine-k

Hi,

On this page (and 7 others), there's a gallery displaying photos and videos.
It's impossible to have the entire gallery : when you scroll it makes like a jump and photos nore videos are cut at top or at bottom.
It's really annoying.

Do you know what can I do to fix that bug ?

Thanks
Carine

Ninja

carine-k
Hi
The gallery and video on this page not from the template, its a 3rd party gallery extension that show the image and video based on the height you have set. You can check the same with default Joomla template an it will be same.
You have to use same width height for the image to make it same.

Regards

carine-k

OK Pankaj, I'll try something with the height.

Thanks
Carine

Ninja

carine-k
You are welcome!

carine-k

Hi Pankaj,

There's the same jump on page https://sostenutoprod.com/contactez-nous and there isn't any gallery but only map.
So it seems to be the template and not the gallery... or both ?!

Thanks
Carine

Ninja

carine-k
Hi
It seems there is confusion, do you refer the resize of the Header part on scroll?
Its due to sticky behave and resize view of the header. When you scroll it resize and then stick at the top.

carine-k

Hi Pankaj,

Perhaps it's linked but I'm talking about content displaying under top nav. When you scroll it can't be displayed entirely. When top nav is resizing, content below "jump" higher and then we can't see top part of content.
And it's really annoying.

Thanks to help me fix that jump.
Carine

Ninja

carine-k
Hi
It will stick as the menu is sticky when you scroll down.
This is normal if you want to add a transition you can add this code in custom.css

.t3-mainnav.min-mainnav {
    transition: 500ms;
}

carine-k

I'm sorry Pankaj, but I've added this code on custom.css and there's still a jump.
You'll see on screenshot 10 page before scrolling and screenshot 11 when scrolling to try to see map entirely.
When top nav reduces itself, content below are push up under this top nav.
It's really strange.

Thanks
Carine

Ninja

carine-k
Hi
It seems you missed to read my previous replies. The template us sticky navigation when you scroll down there is a point where it will stick to the top of the page so it always visible. At this point it has to be sticked this is not issue.
The transition code i shared above will slow this so you will not feel it a jump.

carine-k

Hi Pankaj,

Sorry for the delay.
I've read your previous replies and for me it's a bug because I've created other website that haven't this problem and a sticky navigation.
Please see https://thesweetspot.fr/ or https://nashconsultingforex.com/
Thanks for your help
Carine

Ninja

carine-k
Hi
Please check the site you sent are not using same template. each template theme has different style used.
Please do a test in demo of muzic template.
Also if you notice you have topbar above the main navigation when the menu is sticky it has to go on the top without topbar, that is why it get fixed.

carine-k

Hi Pankaj,

I' see in the Muzic demo template the same "bug".
So is it possible to enable sticky menu ?

Thanks
Carine

Ninja

carine-k
Hi
Again, it seems you are not reading my replies. Please read it first. The menu is already sticky this is how it works in this template it's not a bug.
If you do not want them menu to stick I can help you to remove this. As the sticky option work like this only. When you scroll down the page it will stick on the top.

Hope it's clear now.

carine-k

Hi Pankaj,

I've read your replies... sorry !
It's the 1st time I see this kind of sticky menu behavior. I understand it's the way the template works.
My previous answer was about disable and not enable sticky menu. Sorry for my dyslexic english !
So yes please how could I disable it ?

Thanks for your answer.
Carine

Ninja

carine-k
To remove sticky
Open template folder/js/script.js find and remove this code

	(function(){
		// Add class for mainmenu when scroller
		  var min = null,
		  	sid = null,
		  	mainnav = $('#t3-mainnav');
		
		  if(mainnav.length){
		    $(window).scroll(function() {
		
				if(min != $(window).scrollTop() > mainnav.outerHeight(true) *0.4){
					min = !min;
		
					min ? mainnav.addClass('affix') : mainnav.removeClass('min-mainnav');
					
					//force reflow
					mainnav[0].offsetWidth;
		
					min ? mainnav.addClass('min-mainnav') : mainnav.removeClass('affix');
				}
		  })
		}
		
		})();

Around line 195 to 217

carine-k

Hi Pankaj,

Thansk for the code, it works perfectly now without sticky nav.
But the "scroll to top" button does'nt work anymore.
I'm not a developer so I won't modify code but I can see "if(min != $(window).scrollTop()" in the code I've put on comments.
Could you please provide me a code with scroll to top button working ?

Thanks a lot
Carine

Ninja

carine-k
Hi
Can you make a separate thread for further new questions/issue as this topic was or gallery and already moved to menu parts.
It also help our community members.

Regards