Menu
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.
281
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.
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
