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 trialcolin baird
1,305 Pointshaving trouble with navigation bar layout
i have the exact same code written out as in the video, but for some reason i cant get my bar to go from a column layout to a bar layout. the nav li {display: inline-block;}
command seems to do absolutely nothing for me :/ helppp!
7 Answers
Itsa Snake
3,852 PointsCheck your HTML is OK
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Itsa Snake
3,852 PointsCan you add the HTML and CSS for your nav panel?
colin baird
1,305 PointsCSS
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
nav ul { list-style: none; margin: 0 10px; padding: 0; }
nav ul li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
html
<nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <p><li><a href="about.html">About</a></li></p> <li><a href="contact.html">Contact</a></li> </ul> </nav>
colin baird
1,305 Pointshmm sorry, im new to this whole thing, i meant to give the actual html code but it looks like the browser has changed the format when i posted the comment. still the relevant item is the CSS which seems to have posted correctly. Im learning about 'diplay' commands on codecademy right now too which is frustrating since i feel like this should be a simple step
Itsa Snake
3,852 PointsTry this:
nav li { display: inline-block; }
colin baird
1,305 Pointsyea i went back and rewatched the video and just copied and pasted the same thing you sent. still nothing. i know it must be something im doing wrong though because i tried using the {display:inline-block} to two <div>'s i created on codecademy just now, and they didnt change format either :/
colin baird
1,305 Pointsahhh that was it! thanks, i had a random <p></p> set on my middle <nav> line. sometimes i just play around with the code to see what happens and i guess i forgot to remove it. appreciate all your help! :)
Itsa Snake
3,852 PointsItsa Snake
3,852 Pointsyou can test if you're selecting the right element by changing the background colour and previewing:
nav li { display: inline-block; background: blue;}