Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Hide Folder on Mobile


I have created two folders, one I wish to display on the nav bar on desktop and one I want to display while on mobile. 

Does anyone know what custom CSS is required to display the folders based on screen size?

I've found examples online for displaying blocks based on size but nothing related to the navbar folders/links. 

Share this post

Link to post

4 answers to this question

Recommended Posts

  • 0
24 minutes ago, AprilRains said:

https://www.aprilrainsphotography.com/ - Right now only one folder is enabled (Featured Collections) but I want this hidden on mobile and then I would set up the site to display another folder in it's replacement. 

Add this code to Home > Design > Custom CSS

@media screen and (max-width:640px) {
nav.Mobile-overlay-nav.Mobile-overlay-nav--primary .Mobile-overlay-nav-item:nth-child(2) {
    display: none;

Create another folder to the right of Featured. Because if you create on the left, the code will need to be changed to nth-child(3)

Share this post

Link to post

Create an account or sign in to comment

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

  • Create New...