Change Black text on black drop down menu to white in Forte template

Site URL: https://www.samuelprudden.com

On this website, I'm having an issue with the home page navigation. When first visiting the home page and hovering over "WORK", the black dropdown folder appears but the actual sub nav items are black as well with the link underline showing up in white. This doesn't happen on any other page when trying to navigate to WORK and when a viewer visits another page and then returns to the home page, the sub nav shows up in white. I'm trying to get the initial view on the home page to be white as well. I've included the styles currently being used in the Advanced Page Header Code Injection.  Can anyone help me resolve the issue? 

<style>
 body.collection-type-index .color-weight-dark  #topNav .folder .folder-child-wrapper ul.folder-child li a {
  color: #fff !important;
  }
</style>

<style>
 body.collection-type-index .color-weight-dark  #topNav .folder .folder-child-wrapper ul.folder-child li a {
  color: #fff !important;
  }
.collection-title
{
display: none;
}
</style>

<style>
  .collection-detail-wrapper 
  {
  display: none;
  }
</style>

<style>
 .logo a, .logo-subtitle, #topNav .main-nav li a, #sqs-social a, .sqs-use--icon, .sqs-use--mask, #topNav .folder .folder-child-wrapper .folder-child:before, #mobile-navigation a, .ctrl-button a {
    color: #000 !important;
 }
 </style>

<style>
#sqs-social .sqs-use--icon {
    fill: #000 !important;
}
</style>

<style>
 body.collection-type-index .color-weight-dark  #topNav .folder .folder-child-wrapper ul.folder-child {
    background-color: #000 !important;
}
</style>

Change the backgournd color of the drop down for one page maybe? Stick this in the advanced settings for the one page?

/* Change dropdown menu background */
.header-nav-folder-content {
   background: #febf00 !important;
}

Make a color here: https://www.hexcolortool.com/#000000 and use the #number to replace the one in the code. 

Thanks @derricksrandomviews but unfortunately it's not working. Any other ideas?

It would change for all page nav bars but you this is in design custom css, that is where I have mine. Changed the background from transparent to gray. I have no code to change the drop down anywhere else except to left justify the text in the box. 

#topNav .main-nav .folder-collection

.subnav ul { text-align: left;
 }

I use this to change the box color. I left the text color alone, it changes with header/sub title color style tweak. 

/* Change the navigation drop-downs background colour*/

 #topNav nav .folder-collection ul li a {
   background-color:#F4F4F4;
 }

https://myrandomviews.com/

I have the same issue. it works in the home page but not other page. I removed all of the codes and it still shows black background in other pages. Did you resolve this issue?

On 2/10/2022 at 12:17 AM, Mani said:

I have the same issue. it works in the home page but not other page. I removed all of the codes and it still shows black background in other pages. Did you resolve this issue?

What is site url? We can check easier