PoupeeFlash

@tuanphan I finally found another way to fix it!

Hey @tuanphan, 

Actually, all the links from the NOTRE CATALOGUE folder nav are broken…and only on mobile device. 😞

 

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.

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!

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.

Hey, 

I finally find a way to fix it. 🙂

But now, only on mobile device, all those nav links (see screenshots) don't work. I don't understand why cause it's only happening on mobile device. Could you help me with that. 

Thanks.

N.

 

Yeah that's weird…

This all that i got in my 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;
}
main .page-section:first-child + #header {
  display: block;
}
main .page-section:first-child {
  min-height: calc(0vh - 93px)!important;
}
}

@media screen and (max-width: 767px) {
  .page-section:first-child {
    display:none;
  }
  .page-section:nth-child(2) {
    margin-top: 90px !important;
  }
}
  
</style>

 

This is all that i got in my 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; 
}

Ah i don't why it's still not working from my side…

Unfortunately it's stil the same thing :The mobile menu is still hidden. 😞

Hey, 

Same result than my last screenshot.

The mobile menu is still hidden.

Thanks. N.

yes : 

Private link : https://www.maisonteryel.com/

Password : gp/U02w?@7BIw1

 

Thanks!

Alright ! 

I taped this : 

@media screen and (max-width: 767px) {
.page-section:first-child {
display:none;
}
}

But now, my menu disappeared (see screenshot). Thanks a lot for your help ! N.

 

Hey there, 

Back to you cause I want to delete this banner only on mobile device.

I used this code : 

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

.page-section:first-child {
visibility: hidden;
}

}

But there is an big empty white space instead of the banner (see screenshot). How could I delete it?

Thanks a lot!

N.

Hey there, 😀

Hope you guys are well, I sent you the link. Did you get it?

Thanks.

N.

Hey, 

For now the site is not published yet, how could I do that ?

Maybe I can send the css code to you?

Thanks.

Hi, 

Anyone of you guys know how could I add a specific image instead of each category products title?

Example, instead of the title "Les Cookies du Monde", I would like to add a specific image just for that category products page.

Best!

N.

Thanks a lot!

Now it works! 😀

Hello !

As you can see i don't have this option from my side :

And also, I need this banner to appear in each page of my website, how could i do that?

Thanks a lot!

Nadège

Hey Ziggy!

 

Thanks a lot it works, I just got a huge space write know

How could I rectify it?

Thanks a lot!

N.

Hi everyone,

Does anyone know how could I add a single banner image above my navigation menu?
From now, my banner image is under my navigation menu (see pic attached).

Thanks a lot in advance. 😀

Nadège

Wow it works! Thanks a lot Paul.

N.

Hello, 

Paul code doesn't doesn't work from my side…And I don't understand why…Could you help me with that?

See the first product on my e-shop page: https://www.mlb-mode.com/e-shop

Thanks a lot for your help.

N.

Hello, 

This is my site url : https://www.marinmontagut.com/

The messy problem from the navigation menu only appears when you switch to another language like english, japan or korean. The french version is working good.

Thanks in advance.

N.

Hello, 

I am currently working for a client that is using Weglot.
Weglot dunnot support <span> so basically my submenu actually appears in a messy way like this : https://en.marinmontagut.com/dcoration

I found the right code to fix this design problem by replacing the <span> by some <div>. My only issue right now is that i can change this custom code only page by page. But is there a way to add this simple code in the advanced settings CODE INJECTION without adding it page by page? I just need to set up this code to fix the menu and so then it will appear on my all website. But maybe some lines code are missing and that's why it wasn't working when i tried to add it in the Code Injection header part…

Thanks in advance for your help. N.

PS: This is the code that i changed to fix the menu issue and that needs to work for my all website:

 

              <nav class="Header-nav Header-nav--primary" data-nc-element="primary-nav" data-content-field="navigation">

                

  <div class="Header-nav-inner">

    <div class="Header-nav-item Header-nav-item--folder">

 

      <a href="/porcelaine" class="Header-nav-folder-title" data-controller="HeaderNavFolderTouch">PORCELAINE</a>

 

      <div class="Header-nav-folder">

            

              <a href="/eshop-porcelaine" class="Header-nav-folder-item">TOUT</a>

          

            

              <a href="/eshop-porcelaine?category=Assiettes" class="Header-nav-folder-item">ASSIETTES</a>

            

 

            

              <a href="/productspocelain-2" class="Header-nav-folder-item">BONBONNIÈRES</a>

            

 

            

              <a href="/porcelaine-3?category=Coupelles" class="Header-nav-folder-item">COUPELLES</a>

            

            

              <a href="/eshop-porcelaine?category=Carafes%20et%20Pichets" class="Header-nav-folder-item">CARAFES ET PICHETS</a>

            

            

              <a href="/productspocelain-2?category=Ex-voto" class="Header-nav-folder-item">EX-VOTO</a>

            

            

              <a href="/productspocelain-2?category=La%20Tour%20Eiffel" class="Header-nav-folder-item">LA TOUR EIFFEL</a>

 

            

              <a href="/productspocelain-2?category=Palette" class="Header-nav-folder-item">PALETTE</a>

            

            

              <a href="/productspocelain-2?category=Petite%20Cloche" class="Header-nav-folder-item">PETITE CLOCHE</a>

          

            

              <a href="/eshop-porcelaine?category=Plateaux" class="Header-nav-folder-item">PLATEAUX</a>

            

 

              <a href="/porcelaine-3?category=Ramequins" class="Header-nav-folder-item">RAMEQUINS</a>

            

            

              <a href="/productspocelain-2?category=Sculpture" class="Header-nav-folder-item">SCULPTURE</a>

            

            

              <a href="/eshop-porcelaine?category=Tasses" class="Header-nav-folder-item">TASSES</a>

            

 

            

              <a href="/productspocelain-2?category=Th%C3%A9i%C3%A8re" class="Header-nav-folder-item">THÉIÈRE</a>

            

 

              <a href="/productspocelain-2?category=Vase" class="Header-nav-folder-item">VASES</a>

            

            

              <a href="/productspocelain-2?category=Vide-poche%20coeur" class="Header-nav-folder-item">VIDE-POCHE CŒUR</a>

            

 

      </div>

    </div><div class="Header-nav-item Header-nav-item--folder">

 

      <a href="/verrerie" class="Header-nav-folder-title" data-controller="HeaderNavFolderTouch">VERRERIE</a>

 

      <div class="Header-nav-folder">

 

            

              <a href="/eshop-verrerie-peinte-la-main" class="Header-nav-folder-item">VERRERIE PEINTE À LA MAIN</a>

 

            

              <a href="/eshop-verrerie-peinte-la-main?category=Verre%20%C3%A0%20vin%20peints%20%C3%A0%20la%20main" class="Header-nav-folder-item">VERRES À VIN PEINTS À LA MAIN</a>

            

          

            

              <a href="/eshop-verrerie-peinte-la-main" class="Header-nav-folder-item">VERRES PEINTS À LA MAIN</a>

 

            

              <a href="/eshop-verrerie-peinte-la-main" class="Header-nav-folder-item">CARAFES PEINTES À LA MAIN</a>

 

            

              <a href="/eshop-verrerie-peinte-la-main?category=D%C3%A9canteurs%20peints%20%C3%A0%20la%20main" class="Header-nav-folder-item">DECANTEURS PEINTS À LA MAIN</a>

 

            

              <a href="/eshop-verrerie-peinte-la-main" class="Header-nav-folder-item">VASES PEINTS À LA MAIN</a>

 

            

              <a href="/eshop-verrerie-illustre?category=Verres%20illustr%C3%A9s" class="Header-nav-folder-item">VERRERIE ILLUSTRÉE</a>

 

        

      </div>

    </div><div class="Header-nav-item Header-nav-item--folder">

 

      <a href="/dcoration" class="Header-nav-folder-title" data-controller="HeaderNavFolderTouch">DÉCORATION</a>

 

      <div class="Header-nav-folder">

        

          

            

              <a href="/eshop-decoration" class="Header-nav-folder-item">TOUT</a>

            

          

        

          

            

              <a href="/eshop-decoration?category=Assiettes%20D%C3%A9coratives" class="Header-nav-folder-item">ASSIETTES DÉCORATIVES</a>

            

          

        

          

            

              <a href="/eshop-decoration?category=Bijoux" class="Header-nav-folder-item">BIJOUX</a>

            

          

        

          

            

              <a href="/eshop-decoration?category=Bougies" class="Header-nav-folder-item">BOUGIES</a>

            

          

        

          

            

              <a href="https://www.marinmontagut.com/eshop-decoration?category=Bouteilles" class="Header-nav-folder-item">BOUTEILLES</a>

            

          

        

          

            

              <a href="/eshop-decoration?category=Bo%C3%AEtes%20et%20Coffres" class="Header-nav-folder-item">BOÎTES ET COFFRES</a>

            

          

        

          

            

              <a href="https://www.marinmontagut.com/eshop-decoration?category=D%C3%A9coration%20de%20No%C3%ABl" class="Header-nav-folder-item">DÉCORATIONS DE NOËL</a>

            

          

        

          

            

              <a href="/eshop-decoration?category=Globes" class="Header-nav-folder-item">GLOBES</a>

            

          

        

          

            

              <a href="/eshop-decoration?category=Livres%20%C3%A0%20Secrets" class="Header-nav-folder-item">LIVRES À SECRETS</a>

            

          

        

          

            

              <a href="/eshop-decoration?category=Miroir" class="Header-nav-folder-item">MIROIR</a>

            

          

        

          

            

              <a href="/eshop-decoration?category=Planches%20Murales" class="Header-nav-folder-item">PLANCHES MURALES</a>

            

          

        

          

            

              <a href="/eshop-decoration?category=Savon" class="Header-nav-folder-item">SAVON</a>

            

          

        

          

            

              <a href="https://www.marinmontagut.com/eshop-decoration?category=Sculptures" class="Header-nav-folder-item">SCULPTURES</a>

            

          

        

          

            

              <a href="https://www.marinmontagut.com/eshop-decoration?category=COUPELLE" class="Header-nav-folder-item">VIDE-POCHES MARBRÉS</a>

            

          

        

          

            

              <a href="/eshop-decoration?category=Vitrines%20%C3%A0%20Merveilles" class="Header-nav-folder-item">VITRINES À MERVEILLES</a>

            

          

        

      </div>

    </div><div class="Header-nav-item Header-nav-item--folder">

 

      <a href="/textiles" class="Header-nav-folder-title" data-controller="HeaderNavFolderTouch">TEXTILES</a>

 

      <div class="Header-nav-folder">

        

          

            

              <a href="/eshop-textile" class="Header-nav-folder-item">Tout</a>

            

          

        

          

            

              <a href="/eshop-textile?category=Cachemire" class="Header-nav-folder-item">Cachemire</a>

            

          

        

          

            

              <a href="/eshop-textile?category=Foulards" class="Header-nav-folder-item">Foulards</a>

            

          

        

          

            

              <a href="/eshop-textile?category=Coussins" class="Header-nav-folder-item">Coussins</a>

            

          

        

          

            

              <a href="/eshop-textile?category=Essuie-mains" class="Header-nav-folder-item">Essuie-mains</a>

            

          

        

      </div>

    </div><div class="Header-nav-item Header-nav-item--folder">

 

      <a href="/papeterie" class="Header-nav-folder-title" data-controller="HeaderNavFolderTouch">PAPETERIE</a>

 

      <div class="Header-nav-folder">

        

          

            

              <a href="/eshop-papeterie" class="Header-nav-folder-item">Tout</a>

            

          

        

          

            

              <a href="/eshop-papeterie?category=Aquarelles" class="Header-nav-folder-item">Aquarelles</a>

            

          

        

          

            

              <a href="/eshop-papeterie?category=Carnets" class="Header-nav-folder-item">Carnets</a>

            

          

        

          

            

              <a href="/eshop-papeterie?category=Stylos" class="Header-nav-folder-item">Stylos</a>

            

          

        

      </div>

    </div><div class="Header-nav-item Header-nav-item--folder">

 

      <a href="/personnalisation" class="Header-nav-folder-title" data-controller="HeaderNavFolderTouch">PERSONNALISATION</a>

 

      <div class="Header-nav-folder">

        

          

            

              <a href="/eshop-personnalisation" class="Header-nav-folder-item">Tout</a>

            

          

        

          

            

              <a href="/personnalisation-verrerie" class="Header-nav-folder-item">Verrerie</a>

            

          

        

          

            

              <a href="/eshop-personnalisation?category=Livres%20%C3%A0%20Secrets" class="Header-nav-folder-item">Livres À Secrets</a>

            

          

        

          

            <a href="/votre-mur-a-merveilles" class="Header-nav-folder-item" data-test="template-nav">Votre Mur À Merveilles</a>

          

        

      </div>

    </div>

  </div>

 

              </nav>

 

             

Hey I finally almost made it !

My only issue now is that I want my sticky menu to start appearing only under my first homepage section (like in this homepage : https://www.lepiceriedesenvirons.com/)  For now it appears in my header…

Here is my code :

<!DOCTYPE html>
<html>
<head>
<style>

.stickymenu {
    width: 100%;
    background-color: none;
    top: 0px;
    position: fixed;
    left: auto;
    z-index: 1;
    margin-left:-25vw;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    color:#334F55;
    position: fixed;
}

.stickymenu {
    list-style-type: none;
}

.stickymenu {
    float: left;
    width: 10%;/*100% divisé par le nombre d'éléments de menu*/
    text-align: left;/*Centre le texte dans les éléments de menu*/
}

/*Evite que le menu n'ait une hauteur nulle*/
.stickymenu::after{
    content: "";
    display: table;
    clear: both;
}

.stickymenu a{
    display: block; /*Toute la surface sera cliquable*/
    text-decoration: none;
    color: black;
    border-bottom: 2px solid transparent;/*Evite le décalage des éléments sous le menu à cause de la bordure en :hover*/
    padding: 10px 0px;/*Agrandit le menu et espace la bordure du texte*/
}

.stickymenu a:hover{
background-color:#CCB92C;
}

</style>
</head>
<body>
<nav class="stickymenu">
  <ul>
    <li><a href="#">Sélection Fraîcheur</a></li>
    <li><a href="#">Tenter le Zéro déchet</a></li>
    <li><a href="#">Des petits producteurs</a></li>
 </ul>
</nav>
</body>
</html>