CODEWITHSUNDEEP
cssangularnavigation
Willem van der Veen
Willem van der Veen

Reputation: 36620

Sticky header not working Angular5

Hi guys having trouble with implemting a a sticky navbar in my Angular application.

This is my app component:

<div class="master-wrapper"> 
    <div class="master-container">
        <app-online-header></app-online-header>
            <div class="sticky">
                <app-navigation></app-navigation>     
            </div>
        <div class="background">
            <router-outlet></router-outlet>
        </div>
    </div> 
</div>

My goal is to have the <app-navigation> component sticky. Here is how it looks like:

enter image description here

What I tried so far is in my app-component CSS file:

.sticky{
    position: sticky;
    top: 0;
}

Question:

Why doesn't this make my <app-navigation> component sticky?

Upvotes: 2

Views: 3241

Answers (1)

Richard Pariath
Richard Pariath

Reputation: 160

The problem is the class is defined in the <div> tag. The class="sticky" needs to be defined inside the <nav> or <div> tag that's placed inside the <app-navigation> component

Example:

HTML code:

<nav class="sticky">
  <ul class="menu">
    <!-- Insert client logo here -->
    <li class="css_logo">Monte</li>
    <!-- Insert your page navigation here -->
    <li class="css_link"><a [routerLink]="['Concept']" [routerLinkActive]="['active']">Concept</a></li>
    <li class="css_link"><a [routerLink]="['Fusion']" [routerLinkActive]="['active']">Fusion</a></li>
    <li class="css_link"><a [routerLink]="['Home']" [routerLinkActive]="['active']">Home</a></li>
  </ul>
</nav>

CSS code:

.sticky {
  width: 100%;
  height:72px;
  margin:0;
  left:0;
  right:0;
  top:0;
  background-color: white;
  overflow: hidden;
  display: block;
  position: sticky;
  position: -webkit-sticky;
  z-index: 5;
}

Angular ts file

<!-- Common site Navigation bar -->
<app-navigation-bar></app-navigation-bar>
<!-- Application's Router sequence -->
<router-outlet></router-outlet>

Upvotes: 1

Related Questions