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
Phil White
Courses Plus Student 9,519 PointsHow to get logo and Nav to sit fixed at top of the page?
Hi All,
I'm using boot strap to make a website and and got stuck at the start. I'm trying to make the logo to sit at the top and the nav below and both of them to stay fixed when you scroll down?
I've manage to get the nav bar to fix to the top but the logo is sitting behind it.
4 Answers
Jaco Burger
20,807 PointsYou'd want the top bar fixed to the top. But whenever you scroll down, the top bar will remain at the top and the logo will float away. So to fix that, put the logo inside the nav bar and style it to be above the links. That's the easiest way.
Jaco Burger
20,807 PointsCan you paste your code for the nav bar?
Phil White
Courses Plus Student 9,519 Points <ul class="navbar navbar-default navbar-fixed-top nav nav-pills">
<li class="active home"><a href="index.html">Home</a></li>
<li class="portfolio"><a href="#">Portfolio</a></li>
<li class="about"><a href="#">About</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
Jaco Burger
20,807 PointsThe reason for that is that the logo isn't in the nav bar it self, or so it looks in the snippet of code you've provided. Take a look at the code I've copied from getbootstrap.com
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">*LOGO COMES HERE**</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Ashley Franklin
17,633 PointsAs in the logo isn't staying, or just ends up underneath the navbar? If it's just a case of it being underneath, setting the z-index of the logo will usually do the trick! If not, tossing more of the code online (using CodePen, for example) will help anyone that wants to help figure it out :)
Phil White
Courses Plus Student 9,519 PointsHi Ashley
Thanks for your help. So how would i go about setting the z-index? what is the attribute and value I use? Also i understand that, that will bring the logo to the front but then i need to push the logo to the top and then push the nav bar below that?
Phil White
Courses Plus Student 9,519 PointsHi Jaco Burger ,
Im not trying to make the logo sit within the nav bar i want it to sit above?
Jaco Burger
20,807 PointsI see. But the problem is, you want the top bar fixed to the top. So whenever you scroll down, the top bar will remain at the top, but the logo will float away. So to fix that, put the logo inside the nav bar and style it to be above the links. That's the easiest way.
Phil White
Courses Plus Student 9,519 PointsAwesome that worked! Thanks Jaco, The help is really appreciated! Can you re post the comment as an answer so i can make it best answer please?
Jaco Burger
20,807 PointsSure thing. You're welcome :)