Jump to content

Secondary Navigation Showing Up Behind Primary Navigation

Recommended Posts

Posted (edited)


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

Edited by MoveEm
Link to comment
Posted (edited)
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

image.thumb.png.216a99645a1d1972fd5645b2becd3cee.png

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.