Mobile navigation issues

Hello, 

I got some issues with my menu navigation but only on mobile devices…All the navigation links connected to my shop (shop, products categories) don't work. When you click on it, you're directed to an empty page…

This is my website : www.maisonteryel.com

Could you help me with that ? Thanks in advance. N.

After checking the page on mobile, I do see the problem but I can't tell what is happening to cause it. My first inkling is that the animation is causing it. Do you have a site-wide animation turned on? If so, turn it off and see if that helps the issue. If not, do you have custom code in for animations, or any custom code targeting the shop?

Hello, 

Yes, this is all my custom code :

 

CSS

 

@font-face {

font-family: Bookman Old Style;

src: url(https://static1.squarespace.com/static/6526914f318a803a3c6b52f8/t/652fa8d68c27354c6741db24/1697622231225/Bookman+Old+Style+Regular.ttf);

}

 

@font-face {

font-family: modestoopen-inlinefill;

src: url(https://static1.squarespace.com/static/6526914f318a803a3c6b52f8/t/652fa54b40e37169cae7f169/1697621323634/modestoopen-inlinefill.ttf);

}

 

p {

font-family: 'Bookman Old Style';

}

 

// Site Navigation //

.header-nav-item a {

  font-family: 'modestoopen-inlinefill' !important;

  font-weight: 600;

  text-transform: uppercase;

}

 

.thumbnail-image { 

   width: 200px; 

   height: 200px; 

}

 

.header-title { 

  visibility: hidden; 

}

 

 

/*.header-announcement-bar-wrapper {

background-image:url('https://static1.squarespace.com/static/6526914f318a803a3c6b52f8/t/65367559bb60102805261a53/1698067804092/BANDEAUX_WEBSITE_Plan+de+travail+1.png'); 

background-repeat:no-repeat; background-size:cover;

background-position: center;}

 

.header {

background-color:rgba(0,0,0,0)!important

}*/

 

CODE INJECTION

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.2.2/twcsl.js"></script>

<script>

document.addEventListener("DOMContentLoaded",function() {

    const header = document.getElementById('header');

    const firstSection = document.querySelector('.page-section:first-child');

    firstSection.after(header);

});

 

</script>

 

<style>

 

@media screen and (min-width: 768px) {

#header {

  position: sticky;

  top: 0;

  display: none;

  background: white !important;

  margin-bottom: 2em;

  z-index: 99 !important;

  

}

main .page-section:first-child + #header {

  display: block;

}

main .page-section:first-child {

  min-height: calc(50vh - 93px)!important;

}

}

 

@media screen and (max-width: 767px) {

  

#header {

top: 0;

position: sticky;

z-index: 99 !important;

background: white !important ;

}

 

.page-section:first-child {

display:none;

}

  

main .page-section {

margin-top: 0px !important;

}

 

.header-menu-nav-folder-content {

top: -100px !important;

}

  

.header-menu-nav-wrapper .header-announcement-bar-wrapper .header-menu-nav .header-menu-bg theme-bg--primary {

  

}

 

 

}

  

</style>

 

Thanks!

Yeah there's definitely something wrong with the code you're using to target the header on mobile. I don't know what it is, but I'd recommend removing anything you're targeting the #header on mobile with, that should fix it.

I think I just need to find a way to disable the code I am using to have an image above my navigation menu on other screens device, and only on mobile device.