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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...
On 10/10/2023 at 3:14 AM, Dovely2023 said:

Hi @tuanphan we have a client that would like their navigation dropdowns to open above the navigation bar on the home page. Is this possible? Below is the link to the new site. Any insight you have is appreciated. Thank you! https://lime-flower-xcy4.squarespace.com/ the pw to view is: DoveLove2023!

Hi,

I see you already figured it out?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/16/2023 at 11:35 PM, Dovely2023 said:

Hi @tuanphan I did, but now it's covering the links beneath the folder "Design Firm" and "Lifestyle." Do you know how I can push the box up more? I've tried adjusting the current CSS but nothing I'm editing is working. Any thoughts? Thank you!

You can adjust bottom value in your code

image.png.0ae57cc5ba771b5a8e7be2d130efb484.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (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.