CODEWITHSUNDEEP
htmlcsszurb-foundation
Shamoon
Shamoon

Reputation: 43491

How do I make the nav bar always at the top?

I'm using Foundation by ZURB and trying to get the nav bar to the top.

Upvotes: 15

Views: 82355

Answers (6)

Alex Wayne
Alex Wayne

Reputation: 186984

I have no idea what those 2 things are, but this is how you fix something in place regardless of window scroll position with CSS:

#navbar {
    background: red;
    position: fixed;
    top: 0px;
    width: 100%;
}
<div id="navbar">NavBar!</div>

<p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor <p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor <p>lorem ispum dolor sit amet.</p>sit amet. sit amet<p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor <p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor <p>lorem ispum dolor sit amet.</p>sit amet. sit amet<p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor <p>lorem ispum dolor sit amet.</p>sit amet.<p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor <p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor <p>lorem ispum dolor sit amet.</p>sit amet. sit amet<p>lorem ispum dolor sit amet.</p><p>lorem ispum dolor <p>lorem ispum dolor sit amet.</p>sit amet.

Upvotes: 30

mackenziesoftware
mackenziesoftware

Reputation: 596

Firstly, import ActivatedRoute:

import { ActivatedRoute } from "@angular/router";

Then in your constructor you can pull the parameter. For example:

constructor(private route: ActivatedRoute) { 
    this.route.queryParams.subscribe(params => {
        let myparam = params['myparam'];
        console.log(myparam); // Print the parameter to the console.  
    });
}

See https://www.mackenziesoftware.com/2020/06/how-to-get-param-from-url-in-angular.html for info.

Upvotes: 1

Timar Ivo Batis
Timar Ivo Batis

Reputation: 1996

Adding to Alex Wayne's answer:

I found it necessary to add a z-index with a high enough number for the navbar to appear always on top of other elements.

#navbar {
   z-index: 10000;
   position: fixed;
   top: 0px;
   width: 100%;
}​

Upvotes: 7

Grez.Kev
Grez.Kev

Reputation: 277

You can also use the class designed by bootstrap.

  <nav class="navbar-fixed-top">

Upvotes: 1

Matt Clark
Matt Clark

Reputation: 28589

use the style:

position:fixed;
top:0px;

Upvotes: 3

vinknee
vinknee

Reputation: 147

If you're using foundations, you can use:

<nav class="top-bar fixed"></nav>

Upvotes: 14

Related Questions