Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Nav Menu Color Issue



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!


Edited by GarrettW123
Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

Create an account or sign in to comment

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

  • Create New...