Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap 4 Basics (Retired) Using Bootstrap Components Building a Navbar

Posted by Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

How do you link the nav tabs to the page's so the nav bar will work?

How do you do that?

Here are my codes https://teamtreehouse.com/workspaces/22998992#

Kaitlyn Threndyle
Kaitlyn Threndyle
18,204 Points

You can't link your code like that. If you want to show us your code use something like codepen or copy and paste it here using the Treehouse Markdown Cheatsheet so that it will display properly. Start with then put the language you're using (html, etc). At the end put

4 Answers

Arthur Wells
Arthur Wells
9,520 Points

I haven't really looked at Bootstrap in a long time, but what I think you are trying to do is set an anchor tag. You do this by putting an id (div id="top") on the element you want to go, the target. Then you put an href (href="#top") on the button. Hope that provides some clues to help find your solution.

Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Yes, glad this worked but amazed it was so easy. Thanks!

John Barhorst
John Barhorst
9,648 Points
John Barhorst
John Barhorst
9,648 Points

I'm guessing it will be covered later in the course. However I believe if you were give an id to the area you want the link to take you to, that would do the trick.

<h1 id="speakers"></h1>

That would make an anchor with an HREF of #speakers take you to that position on the page. the '#' symbol is the selector for id's in CSS and such.

Arthur Wells
Arthur Wells
9,520 Points
Arthur Wells
Arthur Wells
9,520 Points

If I understand your question correctly, it's not too hard. Here is an example below. You need to put a link to your page in the li. <ul> <li><a href="home.html">Home</a></li> <li><a href="about.html">News</a></li> <li><a href="contact.html">Contact</a></li> </ul>

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

It must be something very simple, but I can't find it. I checked stackoverflow, bootstrap and did a lot of trial and error today. I want to link the button to content on the same page, so it will scroll down automatically after clicking on the button.

This is jumbotron and the navbar.

<div class="jumbotron jumbotron-fluid bg-info"> <div class="container-fluid navbar-header"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
</div> <div class="collapse navbar-collapse navbar-fixed-top bg-info" id="bs-example-navbar-collapse-1"> <div class="container text-sm-center text-center"> <ul class="nav navbar-nav nav-pills text-center"> <li><a href="#">Home</a></li> <li><a href="#Symptomen">Symptomen</a></li> <li><a href="#">Aandoeningen</a></li> <li><a href="#">Online Buteyko training</a></li> <li><a href="#">Blog</a></li> </div>

With the "Symptomen" button I am trying to direct through to this part of the page.

<h1>Symptomen</h1> <div class="col-md-4"s> <h3>symptomen burnout</h3> <input type="checkbox"> moeite om helder te denken<br> <input type="checkbox"> gebrek aan weerstand, snel moe<br> <input type="checkbox"> wankel gevoel<br> <input type="checkbox"> afwezig gevoel<br> <input type="checkbox"> onwerkelijk gevoel<br> <input type="checkbox"> opwinding zonder reden<br> <input type="checkbox"> huilen zonder reden<br> <input type="checkbox"> angst zonder reden<br> <input type="checkbox"> snel geirriteerd zijn<br> <input type="checkbox"> concentratieverlies<br> <input type="checkbox"> geheugenverlies<br> <input type="checkbox"> gevoelloosheid in ledematen<br> <input type="checkbox"> tintelingen in ledematen<br> <input type="checkbox"> beklemming op de borst<br> <input type="checkbox"> hoge bloeddruk<br> <input type="checkbox"> koude handen en/of voeten<br> <input type="checkbox"> hoofdpijn<br> <input type="checkbox"> duizeligheid<br> <input type="checkbox"> gevoel flauw te vallen<br> <input type="checkbox"> pijn op de borst<br> <input type="checkbox"> duizeligheid bij liggen of zitten<br> <input type="checkbox"> licht gevoel in het hoofd<br> <input type="checkbox"> wazig zien<br> <input type="checkbox"> flauwvallen<br> <input type="checkbox"> oorsuizen<br> <input type="checkbox"> droge huid<br> <input type="checkbox"> jeuk op armen en/of benen<br> <input type="checkbox"> allergie<br> </div>

Hope you can help me out with this!

(I copy pasted my code, but if you have suggestions how to post the code easier to please let me know. In markdown cheatsheet didn't see a better way to put it. When I make up a message I have linebreaks, but after posting there are no linebreaks)