CODEWITHSUNDEEP
htmlangularbootstrap-4navbar
seclearner
seclearner

Reputation: 41

Navbar sticky top not working when inside an angular app

Im building a web application with a sticky navbar on top. The navbar is in such a way that there exists a brand logo above the navbar. So when the page loads initially, the user sees a brand logo, below that is the navbar. When a user scrolls, the logo div moves up (out of the viewport) and only the navbar should stick at the top. I was able to achieve this with the code below : 


<!-- Content Within Body -->

<!-- Brand Logo -->
<div class="container-fluid">
    <a class="navbar-brand" href="#">
        <img src="" width="150" height="30" class="d-inline-block align-top" alt="" style="margin: 20px;margin-left:0px;">
    </a>
</div>

<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top navbar card-bordered sticky-top navbar-expand-lg navbar-light pb-0 pt-0">

    ....
    ....

</nav>

When the same thing above is put into an angular component, the navbar is not sticky anymore. I looked into it and found that angular adds a tag before and after the html so the new structure would be:

<!-- Notice the newly added tag -->
<app-navbar>

    <!-- Brand Logo -->
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <img src="" width="150" height="30" class="d-inline-block align-top" alt="" style="margin: 20px;margin-left:0px;">
        </a>
    </div>

    <!-- Navbar -->
    <nav class="navbar navbar-default navbar-fixed-top navbar card-bordered sticky-top navbar-expand-lg navbar-light bg-alt-lvl2 pb-0 pt-0">

        ....
        ....

    </nav>
</app-navbar>

And this prevents the navbar from being sticky. When I used chrome console and moved the navbar outside the app-navbar tag, it behaves correctly i.e it now is sticky. Is there something I'm missing ?

Upvotes: 0

Views: 4758

Answers (1)

nitin9nair
nitin9nair

Reputation: 598

This happens when the parent CSS is different than the child.

Add a custom CSS class to the app-navbar tag

HTML:

<app-navbar class="logo-container">

<!-- Brand Logo -->
<div class="container-fluid">
    <a class="navbar-brand" href="#">
        <img src="" width="150" height="30" class="d-inline-block align-top" alt="" style="margin: 20px;margin-left:0px;">
    </a>
</div>

<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top navbar card-bordered sticky-top navbar-expand-lg navbar-light bg-alt-lvl2 pb-0 pt-0">

    ....
    ....

</nav>
</app-navbar>

style.css

.logo-container {
    position: sticky;
    display: block;
 }

Upvotes: 3

Related Questions