CODEWITHSUNDEEP
htmlcssangularjstwitter-bootstrapnavbar
Fabry
Fabry

Reputation: 1650

AngularJs hidden NavBar

I want to hide the navBar when the route is "/"

I succeeded to hide/show the navbar but the problem is that, when the navbar is hidden, the "app-body" div has 50px of padding top (where should be the navbar)

This is my html code

<body ng-app="myApp"  ng-controller="MainController" ui-prevent-touchmove-defaults>

    <div class="app">
        <!-- Navbars -->
        <div ng-hide="isActive('/')" ng-controller="NavBarController">
        
            <div class="navbar navbar-app navbar-absolute-top">
                <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
                    Mobile Angular UI
                </div>
                <div class="btn-group pull-left">
                    <div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle">
                        <i class="fa fa-bars"></i> Menu
                    </div>
                </div>
                <div class="btn-group pull-right" ui-yield-to="navbarAction">
                    <div ui-toggle="uiSidebarRight" class="btn">
                        <i class="fa fa-comment"></i> Chat
                    </div>
                </div>
            </div>
        </div>

        <!-- App Body -->

        <div class="app-body">
            <ng-view class="app-content"></ng-view>
        </div>
    </div>
</body>

This image shows the layout when the navbar is visible enter image description here

This image shows the layout when the navbar is hidden

enter image description here

As you can see in the second image there is a grey section at the top. Am I dooing something wrong?

Thank you

Upvotes: 1

Views: 1081

Answers (2)

fedorqui
fedorqui

Reputation: 289725

I solved my issue with the following html code

    <div class="app">
        <!-- Navbars -->
        <div ng-if="!isActive('/')" ng-include="'navBar.html'" ></div>

        <!-- App Body -->
        <div class="app-body">
            <ng-view class="app-content"></ng-view>
        </div>
    </div>
</body>

Upvotes: 0

Noah Wallace
Noah Wallace

Reputation: 118

In addition to this comment above

Try changing the ng-hide to an ng-if. ng-if should remove the element altogether if true.

Use ngClass to set a conditional class for your layout

Upvotes: 1

Related Questions