How can I add a scroll to my website to accommodate my long dropdown menu?

Hi guys! 

My website is below:

producedbybeckert.com (password is "BRANDED")

You'll notice that if you click on "Conversations," and you're on a standard macbook laptop- you can't even scroll down to see all of the links that appear under the "Conversations" dropdown link. 

my question is: how do I fix this? how do I add the ability to keep scrolling? Right now my website is fixed on my page, so i can't scroll down to the bottom of the dropdown menu. 

Add to Design > Custom CSS

.main-nav .subnav ul {
    max-height: 500px;
    overflow-y: scroll;
}

@MichaelTwizzlers, @tuanphan

Hi, did you get this to work? I'm facing the same issue, on desktop

On 6/8/2023 at 6:04 PM, wearequbit said:

@MichaelTwizzlers, @tuanphan

Hi, did you get this to work? I'm facing the same issue, on desktop

 

What is your site url?

Thanks, @tuanphan, site is: frowndocs.co.uk

On 6/11/2023 at 2:52 PM, wearequbit said:

Thanks, @tuanphan, site is: frowndocs.co.uk

Use this CSS

div.header-nav-folder-content {
    max-height: 300px;
    overflow-y: scroll;
}

Looks perfect, thank @tuanphan👊

It'll be a few days before I get a chance to try it out but I'll get back to you either way 

@tuanphan marvellous - thank you, thank you 🙏

is it possible to target a specific folder (i.e. Conditions)? I thought adding :nth-child(5) would do it ('home' is hidden on desktop), but no luck...

On 6/13/2023 at 10:14 AM, tuanphan said:

Use this CSS

div.header-nav-folder-content {
    max-height: 300px;
    overflow-y: scroll;
}

Remove code I sent & Use this (for Conditions)

div.header-nav-item:nth-child(5)>div.header-nav-folder-content {
    max-height: 200px !important;
    overflow-y: scroll !important;
}

I just knew you'd nail it, @tuanphan

❤️‍🔥

On 6/12/2023 at 11:14 PM, tuanphan said:

Use this CSS

div.header-nav-folder-content {
    max-height: 300px;
    overflow-y: scroll;
}

This didn't seem to work for me so wondering if it's just for 7.1? If so, how can I do this on 7.0? Thanks!

18 hours ago, ashleemundywebsitede said:

This didn't seem to work for me so wondering if it's just for 7.1? If so, how can I do this on 7.0? Thanks!

Each template in 7.0 will have a different structure so need a different code

If you share site url, we can check & give code easier

Using @tuanphan code: 

div.header-nav-folder-content {
    max-height: 300px;
    overflow-y: scroll;

we were able to add the ability to scroll. Thanks @tuanphan

Can anyone assist with guidance to add force the scroll bar appear when first selecting the drop down? See "Artist" on site: https://www.union.gallery

Many thanks

On 9/18/2023 at 5:26 AM, NOLAGallery said:

Using @tuanphan code: 

div.header-nav-folder-content {
    max-height: 300px;
    overflow-y: scroll;

we were able to add the ability to scroll. Thanks @tuanphan

Can anyone assist with guidance to add force the scroll bar appear when first selecting the drop down? See "Artist" on site: https://www.union.gallery

Many thanks

 

I see you figured it out on union site?

Hello @tuanphan

Apologies for the slow reply. I was not able to force the scroll bar to appear immediately when the drop down is selected. As it is now, a user must first scroll down for the bar to show. Thanks you for your help here. 

When I hover Dropdown Title >> It shows this

To see other items, I will scroll down

and now you want?

Hi. Can anyone assist with code for the Bedford template, please? We have a long dropdown under the Clinicians nav and are unable to scroll to see the entire list. Thanks for any code assistance. https://www.midtownpsychotherapy.org/

17 hours ago, sheswired said:

Hi. Can anyone assist with code for the Bedford template, please? We have a long dropdown under the Clinicians nav and are unable to scroll to see the entire list. Thanks for any code assistance. https://www.midtownpsychotherapy.org/

Solved with the code, you can adjust number 300

div.subnav {
    max-height: 300px;
    overflow-y: scroll;
}

I have the same problem with my Diary section. I have no idea how to fox this as I don't understand anything about adding code to my site. 

https://switnphoto.squarespace.com/

On 8/22/2024 at 10:11 PM, switn said:

I have the same problem with my Diary section. I have no idea how to fox this as I don't understand anything about adding code to my site. 

 

https://switnphoto.squarespace.com/

 

 

You can use this to Website Tools > Custom CSS

div.header-nav-folder-content {
    max-height: 400px;
    overflow-y: scroll;
}