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

JavaScript

Vittorio Somaschini
Vittorio Somaschini
33,371 Points
Posted by Vittorio Somaschini
Vittorio Somaschini
33,371 Points

class="active" in bootstrap's nav list

Hello Everyone.

I have just watched Nick Pettit 's workshop on Bootstrap and I liked it, but now I am trying to implement bootstrap into my project and things are not going too well.

Actually it's just one thing that is killing me, and even if I checked bootstrap documentation I could not find a solution.

<ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="/">Home</a></li>
                    <li><a href="/places">Places</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li> 
</ul>

This is the piece of code for the navigation bar, and it comes out beautifully; the fact is that if I click On Places, or Blog or Page 2 or Page 3 the active status remains on the Home item.

I think this is the javascript of Bootstrap, but since it is 2000 lines, can someone point me in the right direction?

I am using python + flask to build this, but I do not think this is related to that, it looks more a javascript thing to me.

Also please note that I am getting no 404 error on the terminal or javascript console.

Thanks

Vittorio

Jesus Mendoza
Jesus Mendoza
23,288 Points
Jesus Mendoza
Jesus Mendoza
23,288 Points

Hey, are you building a 1 page layout or each page separately?

3 Answers

Jesus Mendoza
Jesus Mendoza
23,288 Points
Jesus Mendoza
Jesus Mendoza
23,288 Points

Hey, I'm not familiar with Flask nor Python, but if you are using Bootstrap and have different pages then, say you are on your Home, you have to add the class .active to the list item with the link to home, if you are in a different page like places.html, then remove the class .active to Home and add it to the list item Places in that page.

If you have a 1 page layout I recommend you to use the bootstrap function called "scrollspy", you just need to add it to your body.

<body data-spy="spyscroll" data-target=".navbar-default">

That will automatically change the class to active if you are in X section of your page. Srry for my english btw!

Vittorio Somaschini
Vittorio Somaschini
33,371 Points
Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Thanks Jesus.

I had a quick look at scrollspy earlier and it looks very very nice, but unfortunately I need to separate the pages here.

Thanks for the prompt replies

;)

Jesus Mendoza
Jesus Mendoza
23,288 Points
Jesus Mendoza
Jesus Mendoza
23,288 Points

Np mate I wish I knew more about Python to help you. Saludos desde Tenerife

Colin McGraw
Colin McGraw
15,337 Points
Colin McGraw
Colin McGraw
15,337 Points

If I understand you correctly, you're not doing anything wrong. The bootstrap js doesn't apply active classes to the nav - that's something you would do server-side.

Vittorio Somaschini
Vittorio Somaschini
33,371 Points
Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Ok then, this was on my list of chances..

I will simply sort that out with some flask code and it should work.

Thanks Colin!!

Vittorio Somaschini
Vittorio Somaschini
33,371 Points
Vittorio Somaschini
Vittorio Somaschini
33,371 Points

Hello Jesus,

for now I only have the home and "places" pages basically.

The rest of the nav list is just copied as per bootstrap documentation, let's say for testing reasons..

Btw I have a main layout that the other pages extend using flask (for the moment I have 2/3 blocks that differ from page to page).

The "places" page instead is very different, but still extends layout.html (the main template in my flask app).