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.



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?


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
  • Created
  • Last Reply


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.