Portfolio Project: Navigation Bar Help

I can’t seem to figure out how to make a navigation bar (or menu bar?). I’m trying to make it:

  1. Fixed to the top
  2. Each menu tab is linked to an anchor (?) on the same page (since everything is on a single page).
  3. The current/selected tab is indicated (changes color, “pressed in” etc.)

Or in other words, is there a certain type of navbar (or combination) that I should be looking for? For example, starting with “Fixed-to-Top”:

<nav class="navbar navbar-default navbar-fixed-top">
>      <div class="container">
>         ...
>      </div>
> </nav>

And then adding "Pills’?:

<nav class="navbar navbar-default navbar-fixed-top">
>      <div class="container">
>          <ul class="nav nav-pills">
>               <li role="presentation" class="active"><a href="#">Home</a></li>
>               <li role="presentation"><a href="#">About</a></li>
>               <li role="presentation"><a href="#">Portfolio</a></li>
>               <li role="presentation"><a href="#">Contact</a></li>
>           </ul>
>      </div>
> </nav>

And then how do I make those links scroll to a certain point on the page?

I hope that makes sense, I’d really appreciate any help I can get! Thanks :smiley:

You see all those hashtags in the li tags?

<li role="presentation"><a href="#">About</a></li>

Change the href destination to let’s say, <a href="#about">

And in your div where “About” starts. Assign an id attribute, i.e. <div id="about">

So whenever you click “About” in nav-bar, you get sent to that div with id=“#about”. I don’t know what happens if you assign multiple divs with id=“#about”, probably just get sent to the next one it finds.

Basically, the hashtag # means it is looking for something assigned in the id attribute. Same goes in CSS style page.

.my-class{ font-size= 15} ← looks for a class attributes

#my-class{ font-size= 15} ← looks for a id attribute

2 Likes

Where are you building this projects? Is it in CodePen?

The html for your nav looks really good so far.

You can use CSS to affix it to the top. I notice you have this class: navbar-fixed-top for that.

You can do something like:

.navbar-fixed-top {
position:fixed;
top:0;
}

If you want it to affix to the top at a certain point when you scroll down, check out jQuery Waypoints.

Brief tutorial that explains anchor links:

http://www.echoecho.com/htmllinks08.htm

2 Likes

Yeah, Codepen :slight_smile:

When you use the fixed-top nav-bar, remember to add a small margin to the top of your page too so it doesn’t get hidden behind the nav-bar at the top :slight_smile: something like this (depending on the height of your nav-bar):

body {
margin-top: 30px;
}

1 Like

If you use the class navbar-fixed-top, you don’t need to alter it in the CSS, Bootstrap has already made this class to stick the bar to the top automatically. Also when you name your divs, it should say < div id=“about” >< /div > (you only use the hashtag when targeting the id element in CSS, not in the id name itself :slight_smile:

2 Likes