Secondary Navigation Showing Up Behind Primary Navigation

Site Password: Stash11
Link: https://sponge-triceratops-7lpf.squarespace.com/

Hello
It has to be obvious -- but I'm losing my mind.  The secondary navigation is showing up behind the primary navigation bar. So even though I have the colors set to BLACK they look like a very light grey. I want the secondary navigation to be in line with - or on top of - the primary navigation. 

Here's the Header Code Injection I'm using: 

<div class="nav nav-secondary-wrapper">
  <nav aria-label="Header Secondary Nav">
    <ul class="nav-secondary">
      <li class="nav-secondary-item">
        <a href="/news">News</a>
      </li>
      <li class="nav-secondary-item">
        <a href="/calendar">Help</a>
      </li>
      <li class="nav-secondary-item">
        <a href="/give">Reports</a>
      </li>
      <li class="nav-secondary-item">
        <a href="/campus-plan">Tools</a>
      </li>
    </ul>
   </nav>
</div>

And the CSS: 

 

.nav-secondary-wrapper .nav-secondary-item a {
  color: #00000;
  font-family: "raleway";
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: 600;
  font-style: normal;
  line-height: 1em;
}
  
.nav-secondary-wrapper .nav-secondary-item a:hover {
  color: #000000;
  }
.nav-secondary-wrapper .nav-secondary-item {  
  display: inline-block;
  padding: 19px;
  cursor: pointer;
  }
.nav-secondary-wrapper {
  text-align: right;
}

Can anybody help straighten this out for me? 

Thanks,

Emily

21 hours ago, MoveEm said:

Site Password: Stash11
Link: https://sponge-triceratops-7lpf.squarespace.com/

Hello
It has to be obvious -- but I'm losing my mind.  The secondary navigation is showing up behind the primary navigation bar. So even though I have the colors set to BLACK they look like a very light grey. I want the secondary navigation to be in line with - or on top of - the primary navigation. 

Here's the Header Code Injection I'm using: 

<div class="nav nav-secondary-wrapper">
  <nav aria-label="Header Secondary Nav">
    <ul class="nav-secondary">
      <li class="nav-secondary-item">
        <a href="/news">News</a>
      </li>
      <li class="nav-secondary-item">
        <a href="/calendar">Help</a>
      </li>
      <li class="nav-secondary-item">
        <a href="/give">Reports</a>
      </li>
      <li class="nav-secondary-item">
        <a href="/campus-plan">Tools</a>
      </li>
    </ul>
   </nav>
</div>

And the CSS: 

 

.nav-secondary-wrapper .nav-secondary-item a {
  color: #00000;
  font-family: "raleway";
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: 600;
  font-style: normal;
  line-height: 1em;
}
  
.nav-secondary-wrapper .nav-secondary-item a:hover {
  color: #000000;
  }
.nav-secondary-wrapper .nav-secondary-item {  
  display: inline-block;
  padding: 19px;
  cursor: pointer;
  }
.nav-secondary-wrapper {
  text-align: right;
}

Can anybody help straighten this out for me? 

Thanks,

Emily

You can try

body:not(.header--menu-open) .header-nav .header-nav-item--folder:hover .header-nav-folder-content:has(a) {
  background: var(--solidHeaderBackgroundColor);
  opacity: calc(66* .01);
}
.header-nav .header-nav-item--folder:hover .header-nav-folder-content {
  opacity: 0;
}

My testing