8

I'm having an issue with the navbar where a "flash" appears when you click outside the menu to close the menu. The flash persists if the mouse is held down when clicking out of the menu as shown here:

I'm thinking it might have something to do with angular, and not css, mainly because others have failed to replicate it on fiddle. Previous question here.

HTML:

<nav class='navbar navbar-default.navbar-static-top navbar-custom'>
  <div class='container-fluid'>
    <ul class='nav navbar-nav navbar-left'>
      <li><a href="dashboard.html">Dashboard</a></li>
      <li><a href="/grades">Grades</a></li> 
      <li><a href="/classes">Classes</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-right'>
      <li><a href="/messages"><i class="fa fa-envelope fa-lg"></i></a></li>

        <!--has to do with the link, clicking it and clicking it again-->
      <li><a class="dropdown-toggle dropdown-custom" data-toggle="dropdown" href="/profile"><i class="fa fa-user fa-lg"></i></a>
        <ul class="dropdown-menu">
          <li><a href="/profile.html">Edit profile</a></li>
          <li><a href="/settings">Edit Preferences</a></li>
        </ul>
      </li>
      <li><a href="/logout"><i class="fa fa-power-off fa-lg"></i></a></li>    
    </ul>

  </div>
</nav>

CSS:

[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}
.navbar-custom {
    background-color: #586F7C;
}
.navbar-custom a {
    color: #F4F4F9;
}
.navbar-custom .nav > li > a:hover {
    background-color: #2F4550;
}
.navbar .navbar-nav > li.open > a, {
    background-color: #586F7C;
}
.navbar .navbar-nav > li.open > a:hover,
.navbar .navbar-nav > li.open > a:focus {
    background-color: #2F4550;
}
.nav >li > a:hover, .nav > li > a:focus {
  background-color: #586F7C;
}

ng-include in the file the navbar is referenced in

<div ng-include="'html/navbar.html'"></div>

portion of index.html where it references the file that the navbar is ng-included in

<body>
 <div class="view-container">
     <div ng-view class="view-frame"></div>
 </div>
</body>

I'm thinking the issue might be with the ng-view or ng-include, however so far none of the fixes in the previous question worked.

Community
  • 1
  • 1
Left
  • 163
  • 2
  • 14

3 Answers3

2

One quick hack may be adding this to your css

.nav >li > a:hover, .nav > li > a:focus {
    background-color: #586F7C;
}

Edit: I just realized you've already seen such a solution in another thread, but I was able to replicate "your bug". Here is a bootply, just try to comment out the css and the bug will be present, with css it's working as expected.

Buksy
  • 11,571
  • 9
  • 62
  • 69
  • I actually already have that exact css in my stylesheet, but it somehow doesn't fix the flashing on my end. :( – Left Mar 30 '16 at 19:22
0

The issue was here:

.navbar .navbar-nav > li.open > a, {
    background-color: #586F7C;
}

That extra "," was the problem. So it ended up to just be a syntax error, how embarrassing haha. No wonder it seemed like everything should be working, it was just a little comma in the wrong place!

Left
  • 163
  • 2
  • 14
0

A little jQuery will solve the problem. Just add the following for the anchor tags which are flashing.

```

  $('.navbar-custom .navbar-nav li a').on('mouseup', function(){
      $(this).blur();
  });

```

Naeem Rind
  • 5
  • 1
  • 8