Drop down menu not appearing correctly

Site URL: https://round-algae-fj2m.squarespace.com/

Hi, I have added a folder to allow a drop down menu to appear under "Services" in my header. This works fine, apart from when I've clicked on one of the pages that appear in this drop down list. They disappear, although the dropdown box is still visible. I already have some code in place that allows for a pill shaped background to appear on hover and to stay behind a menu title when you're on that specific page. I'm not sure if this is causing the issue? Any ideas how to resolve this? I have attached a screengrab below to show what I mean.

URL is: round-algae-fj2m.squarespace.com

 Password is: WaveTest

Thanks

Nicola

Hi. Try adding this code to Design > Custom CSS

/* fix dropdown items color */
.header-nav-item.header-nav-item--folder.header-nav-item--active .header-nav-folder-content a {
    color: white !important;
}

Hi Tuan, that works thanks! Is there a way to make the text in the drop down section turn blue when it's clicked on and when you're on that specific page?  At the moment nothing changes so it's hard for users to tell what page they're on. 

Thanks

Nicola

19 hours ago, NMcMurray said:

Hi Tuan, that works thanks! Is there a way to make the text in the drop down section turn blue when it's clicked on and when you're on that specific page?  At the moment nothing changes so it's hard for users to tell what page they're on. 

Thanks

Nicola

Try this CSS

.header-nav-folder-item.header-nav-folder-item--active a {
    background-color: #a8dbf0 !important;
    color: #1c2d4d !important;
}

Hi Tuan, thanks for this, it worked perfectly, however what code would I use to just change the text colour, I don't think I need the blue pill shaped background for the 2 links in the drop down section, it's too much. 

Thanks

Nicola

On 8/5/2021 at 7:32 PM, NMcMurray said:

Hi Tuan, thanks for this, it worked perfectly, however what code would I use to just change the text colour, I don't think I need the blue pill shaped background for the 2 links in the drop down section, it's too much. 

Thanks

Nicola

You can remove background color on above code

    background-color: #a8dbf0 !important;

Hi Tuan,

Removing the above code did work, however when one page is selected in the dropdown menu, the other isn't visible. For instance, when I select "Education Settings" and am on that page, the text is shown as blue, which is what I want, but the other page isn't shown (or is shown in the navy blue colour so not visible). I would like the unselected page to still be visible but perhaps in white. I can't work out a way of making this possible. Any ideas? I've attached a screenshot of what I mean. 

Thanks

Nicola