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

Change order of mobile navigation


anna6

Question

Site URL: https://oriole-fox-rana.squarespace.com/config/design/custom-css

Hi there, help please? I have managed to get my sub navigations to show up on mobile view, but I would like to rearrange the order in which they show up.

I would like the "Commercial" and "Residential" to show above "Studio, Journal, Contact"

Here is what's happening at the moment...

1409117411_ScreenShot2021-06-25at11_35_26AM.thumb.png.69c68783b6f9bc1137f118b25d89cc0f.png

 

Here is my code...

 

@media (max-width: 799px){
.header-menu-nav-folder {
    transform: none;
    min-height: 100px !important;
    height: 50vw;
}

.header-menu-nav-folder {
    position: relative; 
    transform: translateX(0);
    min-height: auto;
  }
  
.header-menu-nav-folder a {
    font-size: 2rem;
    line-height: 1.5;
  }
  
 .header-menu-nav-folder[data-folder="root"] {
    position: relative;
    min-height: auto;
    order: 2;
  }
  .header-menu .header-menu-nav a[data-folder-id="/work"] {
    display: none;
}
  
.header-menu-controls-control[data-action="back"] {
    display: none;
  }
}

Thanks in advance :-)

Link to comment

6 answers to this question

Recommended Posts

  • 0
On 7/1/2021 at 4:40 AM, anna6 said:

Sorry @tuanphan I gave you the password to access all my squarespace, try a new one

password: bubbles

Add to Design > Custom CSS

/* Mobile menu order */
@media screen and (max-width:767px) {
nav.header-menu-nav-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
22 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile menu order */
@media screen and (max-width:767px) {
nav.header-menu-nav-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
}

 

Worked a dream! Thank you @tuanphan Love your work!

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...