Jump to content

Custom CSS for Removing Folder Dropdown Menu / Create Horizontal Sub Navigation Menu within Main Folder Page

Recommended Posts

Hello, so I have the goal of creating a horizontal "sub-navigation" menu within a main "folder" page, instead of using the clunky folder dropdown menu that is automatically created with using a folder. I want to achieve this all within the "WORK" page that you can see on my screenshot. I have already found a custom css that allows me to directly click into the folder, which is what I want, to then have a set horizontal sub-navigation within that page. Attached are two screenshots. One is an example of what I am trying to achieve with the horizontal sub-navigation, and the other is what my site currently looks like with the dropdown menu. 

Additionally, in the event that creating this horizontal sub-navigation is not possible, is there any setting in Site Styles for 7.1 to change dropdown menu styles? I cannot seem to find any options for changing what the dropdown looks like. 

Screenshot 2023-03-20 at 11.59.10 AM.png

Screenshot 2023-03-20 at 12.05.28 PM.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 3/25/2023 at 7:44 PM, harvestfilmco said:

Hey, here is the link: vuvuzela-smilodon-cj4f.squarespace.com

Let me know any thoughts. Thanks.

Add to Design > Custom CSS

/* Nav dropdown */
.header-nav-folder-content {
    width: 100% !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    left: 50% !important;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}
.header-nav-folder-content div {
    margin-right: 20px;
}
.header-nav .header-nav-item--folder {
    position: static;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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.