2

When clicking the profile icon again to get rid of the menu, it doesn't turn back into the navbar color unless you click somewhere else. I think it's an issue with one of the navbar css that controls links but I'm having some trouble finding which one it is.

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>

        <!--probably has to do with the link, clicking it then 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:

.navbar-custom {
    background-color: #586F7C;
}
.navbar-custom a {
    color: #F4F4F9;
}
.navbar-custom a:hover {
    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;
}

Edit: Here's what it looks like. https://i.stack.imgur.com/tvWD0.gif

If you click outside of the navbar to get rid of the menu, it's fine. The problem arises when you click again on the icon to get rid of the menu, and then move your mouse outside of the icon box.

Edit2: ng-include in the file the navbar is referenced in

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

Edit3: 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>

Edit4: The original problem has been fixed! However, now the current issue is that the flash persists if the mouse is held down when clicking out of the menu:

Left
  • 163
  • 2
  • 14
  • This snippet is hard to diagnose as is, have you looked into a:active yet? – Spencer Rohan Mar 21 '16 at 19:11
  • I added a picture to help describe it. And I tried a:active, but I think I'm looking for when it's unactive? – Left Mar 21 '16 at 19:33
  • So here is a fiddle of your code but I can't reproduce the behaviour shown in your gif: https://jsfiddle.net/qkx6etrh/ – d.h. Mar 21 '16 at 19:49
  • If you click once on the profile icon to get the dropdown, then click on the profile icon again and move the mouse elsewhere, then it will exhibit the same behavior. Just tested it in the fiddle, with chrome and firefox. – Left Mar 21 '16 at 19:52

3 Answers3

3

Here is a fixed version of your code:

https://jsfiddle.net/6psjb0c5/

I added the following which seems to fix the behaviour:

.nav>li>a:hover, .nav>li>a:focus {
  background-color: transparent;
}
d.h.
  • 1,206
  • 1
  • 18
  • 33
  • That fixed it! However, now when I click outside of the navbar to close the menu, there is a sudden flash like so: http://i.imgur.com/2tbZ0mh.gifv – Left Mar 21 '16 at 20:00
  • Is there some other css which affects the menu. I can't reproduce that on the fiddle. – d.h. Mar 21 '16 at 20:03
  • There is not, however I am running the navbar through angularjs, using a ng-include to include the navbar on the page. That might be the issue but.. – Left Mar 21 '16 at 20:06
  • Is it happening on the fiddle? Can you post the angular ng-include part? – d.h. Mar 21 '16 at 20:07
  • It's not happening on the fiddle, just tested. On my local file the "flash" is happening if you click somewhere else, if you hold that click then the flash is held as well. It seems like it might be defaulting to the original navbar-static-top colors maybe? And I'll post the angular part in the OP. – Left Mar 21 '16 at 20:11
  • The white flash might be related to this: http://stackoverflow.com/questions/11249768/angularjs-ng-cloak-ng-show-elements-blink – d.h. Mar 21 '16 at 20:29
  • Here is an updated fiddle with your code and ng-include: https://jsfiddle.net/sjq13qrh/ Can you check if the flashing is happening there too? – d.h. Mar 21 '16 at 20:36
  • Hmm, it might be related, however their fix didn't work. Possibly because I also have ng-show redirecting to the page with ng-include, so that might be the problem. I wonder why holding down the click causes the flash to stay though.. – Left Mar 21 '16 at 20:37
  • The flashing is not happening in the fiddle. I will update the OP with the ng-show portion. – Left Mar 21 '16 at 20:38
  • Here is a gif of the flash persisting while held: http://i.imgur.com/P75iTwU.gifv – Left Mar 21 '16 at 20:43
  • I don't know how to integrate that into a fiddle..I am not sure if this is really related to ng-view. Have you tried and added the ng-cloak directive and the css? – d.h. Mar 21 '16 at 20:52
  • Have you tried setting the background-color not to transparent but rather to your desired color? – d.h. Mar 21 '16 at 20:59
  • Yes, I have, and the flashing still happens. Is there some css in bootstrap that controls what happens when you hold a click? – Left Mar 21 '16 at 21:01
  • Might be the :focus pseudo element. You can trigger that via Chrome Dev Tools. – d.h. Mar 21 '16 at 21:02
  • I tried that, but the flashing still occurs, which makes me think that it's somehow related to the bootstrap defaults. – Left Mar 21 '16 at 21:03
  • Could you elaborate a bit on what you mean by triggering it? I've got the dev tools open. – Left Mar 21 '16 at 21:05
  • Maybe this is the selector that causes trouble: .navbar .navbar-nav > li.open > a:hover, .navbar .navbar-nav > li.open > a:focus{ } Have you tried overriding this one? – d.h. Mar 21 '16 at 21:09
  • Here is the part where you can manually trigger element states: http://imgur.com/kvsQQtl – d.h. Mar 21 '16 at 21:13
  • Yes, it's included it in the CSS in the OP. I think the issue might have something to do with a when you initially stop focusing on the navbar? – Left Mar 21 '16 at 21:15
  • It's very hard to give a solution without a fiddle. – d.h. Mar 21 '16 at 21:16
  • This is very true. Thank you so much for all your help though, I really appreciate it. :) – Left Mar 21 '16 at 21:19
  • Your welcome..let me know when you found a final fix to this. And if you liked the answer/help you can upvote it too, – d.h. Mar 21 '16 at 21:20
  • Will do! And I would love to upvote, but it told me I need 15 reputation to upvote, apparently. :( – Left Mar 21 '16 at 21:22
  • I almost forgot to let you know the fix, there was an extra comma in this css: .navbar .navbar-nav > li.open > a, { background-color: #586F7C; }. That was what was causing the "flash". Ended up to be a very silly issue. :P – Left Apr 06 '16 at 19:32
0

Remove: 

.navbar-custom a:hover {
color: #F4F4F9;
}

That should do the trick

andnowchris
  • 149
  • 7
  • Thanks for the catch, that was redundant code from when I originally had the a:hover a different color. However, sadly this does not fix the issue, I edited the OP to include a gif of what the issue looks like! – Left Mar 21 '16 at 19:40
0

well, I'm from Brazil, in case some words do not make sense. I had this same problem but if you inspect the code and perform the click and click actions outside, you will notice that the .open class is added. However, the dropdown menu is a (a) and not a ( li > a). Soon the code is as follows:

.nav .open a, .nav .open a:focus, .nav .open a:active {
 background-color: #2F4550; /*background-color: trasparent;*/
}
João Batista Gomes Silva
  • 1