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

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. 

Hi,

I remember I used to help a similar case. If you share link to your site, we can check easier

9 hours ago, tuanphan said:

Hi,

I remember I used to help a similar case. If you share link to your site, we can check easier

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

Let me know any thoughts. Thanks.

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

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!

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?

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!

Hi @tuanphan just following on the above. Thank you!

Hi @tuanphan just following up on the above. Thank you!

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

On 10/21/2023 at 6:31 AM, tuanphan said:

You can adjust bottom value in your code

Thank you @tuanphan. I promise I tried that last week and it didn't work, but it's working now. LOL Appreciate the help!