Changing mobile navigation drop down menu not showing

lisapastore · September 24, 2022

Site URL: https://www.perlamoredielda.com/

Hello everyone. I have two folders on my site. One is called Inspiration and the other the folder named "Ispirazione". They are identical however Ispirazione is not displaying the dropdown menu when clicked on, on mobile devices. I asked squarespace for help and they told me the problem was code related and could not help.

The only code I have is page head code injections because my site is bilingual so I put the bellow code to hide English or the Italian respectively.

I changed the order of my layout and instead of page numbers in the code I used to odd/even. Now both drop down menus are not working properly. In English I see music and in Italian I see nostri libretti and attività gironaliere. Before I had my layout pages 1-7 in English and 8-14 in Italian. in the code instead of odd and even I put the actual page numbers.

<style>

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

#header .header-menu-nav-item:nth-child(odd){

display:none

}

#header .header-menu-nav-item:nth-child(even){

display:none

}

I was given this code to input for folders but I cannot seem to get it to work. English is odd pages, Italian are even pages.

<style>

.Mobile-overlay-nav-item:nth-child(odd){
display: none;
}

.Mobile-overlay-nav-folder[data folder="root"]>.Mobile-overlay-nav-folder-content>div:nth-child(even){
display: none;
}
</style>

Any suggestions would be appreciated

Edited September 24, 2022 by lisapastore
i made a change in the codes and now it is worse

creedon · October 31, 2022

It appears to be working for the most part to me.

florgodoyf · February 11

Hi! I have the same issue in this site:
https://www.headwaytranslations.com/

Have you found a solution?

creedon · February 11

7 hours ago, florgodoyf said:

I have the same issue in this site

The issue is that SS menus are a bit complex. There are two menu structures in a site. One for desktop and one for mobile. The mobile one is complex in itself because of it's panel like presentation.

Using the .header-nav-item class alone is not going to work. Use the following code which is more explicit about what is happening where and removes the need for media queries.

<style>

  /* spanish navigation, hide english */
  
  /* desktop */
  
  .header-nav .header-nav-item:nth-child( 6 ),
  .header-nav .header-nav-item:nth-child( 7 ),
  .header-nav .header-nav-item:nth-child( 8 ),
  .header-nav .header-nav-item:nth-child( 9 ),
  .header-nav .header-nav-item:nth-child( 10 ),
  .header-nav .header-nav-item:nth-child( 11 ),
  
  /* mobile */
  
  .header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 6 ),
  .header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 7 ),
  .header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 8 ),
  .header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 9 ),
  .header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 10 ),
  .header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 11 )
  
    {
    
      display : none;
      
      }
      
  </style>

<style>

  /* english navigation, hide spanish */
  
  /* desktop */
  
  .header-nav .header-nav-item:nth-child( 1 ),
  .header-nav .header-nav-item:nth-child( 2 ),
  .header-nav .header-nav-item:nth-child( 3 ),
  .header-nav .header-nav-item:nth-child( 4 ),
  .header-nav .header-nav-item:nth-child( 5 ),
  .header-nav .header-nav-item:nth-child( 12 ),
  
  /* mobile */
  
  .header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 1 ),
  .header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 2 ),
  .header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 3 ),
  .header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 4 ),
  .header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 5 ),
  .header-menu [data-folder="root"] .header-menu-nav-item:nth-child( 12 )
  
    {
    
      display : none;
      
      }
      
  </style>

Note my use of the [data-folder="root"] selector. That targets the mobile menu top level elements leaving the sub elements alone.

Let us know how it goes.

florgodoyf · February 12

@creedon Thank you so much! That worked.

Changing mobile navigation drop down menu not showing

Recommended Posts

lisapastore

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

creedon

florgodoyf

Posted Images

creedon

Link to comment

florgodoyf

Link to comment

creedon

Link to comment

florgodoyf

Link to comment

Create an account or sign in to comment

News

creedon

florgodoyf

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources