Jump to content

Changing mobile navigation drop down menu not showing

Go to solution Solved by creedon,

Recommended Posts

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
 

308115150_1080018922658428_4602943064359247421_n.jpg

307807819_1126063758346615_7595530522136990009_n.jpg

Edited by lisapastore
i made a change in the codes and now it is worse
Link to comment
  • 1 month later...
  • 3 months later...
  • Solution
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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.