Jump to content

Displaying links on mobile that are hidden by code used on the desktop version

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://gc5.squarespace.com

Hi Everyone:

the website: https://gc5.squarespace.com

I used the code below to create the different navigation for the website in English and Portuguese:

.header-nav-list>.header-nav-item:nth-child(even) {
    display: none;
}
.header-menu-nav-folder-content>.header-menu-nav-item:nth-child(even) {
    display: none;
}

The problem is that I can find a solution for the code not to be applied for folders in the mobile version.

 

Any ideas?

Link to comment
5 hours ago, diegomoura said:

Site URL: https://gc5.squarespace.com

Hi Everyone:

the website: https://gc5.squarespace.com

I used the code below to create the different navigation for the website in English and Portuguese:


.header-nav-list>.header-nav-item:nth-child(even) {
    display: none;
}
.header-menu-nav-folder-content>.header-menu-nav-item:nth-child(even) {
    display: none;
}

The problem is that I can find a solution for the code not to be applied for folders in the mobile version.

 

Any ideas?

I saw you already solve it right?

image.png.618e2bd8b951f02c4841daae15ff8e5d.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution
1 hour ago, diegomoura said:

Hi:

Sorry, I should have been much more specific.

The links that are missing, are the ones inside the folder "Sobre GC5" or "About GC5 in the English version.

I attached the piece of the code where you can see I'm talking about.

 

1927901139_ScreenShot2020-06-17at7_47_48AM.thumb.png.62aafdb3b658b3e52dd12cc6366aadef.png

I believe it is


@media screen and (max-width: 800px) {
  .header-menu-nav-folder:not([data-folder="root"]) .header-menu-nav-folder-content .header-menu-nav-item {
    display: block !important;
  }
}

image.png.704d749dfcf097509afdae27bd07ac93.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
Just now, diegomoura said:

Thank you very much! It works perfectly.

I was thinking of a way to reference the data-folder, but never used [ ] with CSS before. Going to research it!

Glad it helps, you can mark it solved to help other people

Here is reference site of the css3 selector

https://www.w3schools.com/cssref/css_selectors.asp

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 year later...
1 hour ago, Christian_kas said:

Hello,

I have the same problem on my site. But can't really fix it, with the script that has been shared (maybe I'm not using it well). The website is this one: https://anneclairemeret.com/

I have folder called "Coaching" it lists two pages. The first page is not appearing on Mobile. 

Any idea on how to solve this? 

162303348_Screenshot2021-11-17at09_41_40.thumb.png.b9e51fde31dd08a6e1139493ad695862.png

You can try adding to Home > Design > Custom Css

@media screen and (max-width: 1024px) {
  #header
    .header-menu-nav-folder:not([data-folder="root"])
    .header-menu-nav-item {
    display: block;
  }
}

Let me know how it works on your site

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
12 minutes ago, Christian_kas said:

@bangank36

yea! Finally. 

Thank you very much! 

It's good to know, bro!

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.