getJETsetTER getJETsetTER - 4 months ago 6x
AngularJS Question

Why does the navbar menu flash when using a ng-click on an anchor?

I thought I was being smart when i put:

<li><a ng-click="navCollapsed = !navCollapsed" href="#/">Home</a></li>

as my navigation list items - in order to automatically close the menu (while on a small device).

This worked very well, except that when you are not on a small device, the navigation flashes (reloads).

Does anyone know why? Is there a way around it?

JSfiddle of the Problem HERE - Re-size the html output window...


It's setting height to zero as part of the collapse process, then resetting it with a transition. It's also changing side padding. You may need to incorporate media queries to force height and padding to remain consistent.

Here's a start. There may be a more programmatic way to do it, but it works.

@media (min-width: 768px) {
    .navbar-collapse {
        height: auto !important;
        padding-left: 0 !important;