Jump to content

Recommended Posts

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.

Link to comment

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?

Link to comment

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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.