Jump to content

Nav Menu Color Issue

Recommended Posts

Hello all!

I am developing a small website and there is a simple CSS issue that I am looking for some help with.

Here is my goal: Create a dropdown navigation menu. When the choices are hovered over, have a blue background with white letters. Like that pictured below.

358444416_Issue1.png.b595ca2693d921ce0fb1ad84eef24b5d.png

 

When I am outside the folder - say I am on the "Meeting Links" page - and then, I drag my mouse over to "Schedules", the dropdown menu works exactly as I like it. Blue background with white letters when hovered over. 

Here's the issue: When I am inside the folder - say on the "Meeting Schedule" page, or another page in that folder - and then I do the same thing, I get a blue background, but no white letters.

How can I fix this so that it looks the same in box situations? Inside and outside the navigation folder?

1163865844_Issue2.png.87096447e362117aea3b7bf8f43a4b35.png

Here is the CSS I am working with:

//Stylized Folder Dropdown Menu
@linkBGColor: #60AABE;
@linkTextColor: #fff;
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 0;
  .header-nav-folder-item {
    padding: .5em 1em;
  }
  .header-nav-folder-item:hover {
    background: @linkBGColor;
    a {
      color: @linkTextColor;
    }
 }
}

Any thoughts would be greatly appreciated. Thank you!

 

Link to comment
  • Replies 3
  • Views 224
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.