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
Alex Weinberg
2,726 PointsCentering the nav bar.
I'm having trouble getting my nav centered, or to move to the left or right at all for that matter. Any suggestions? Here's a link to the page.. Here's a link to the page.. http://port-80-tdxaeg500f.treehouse-app.com/ Here's my css code..
/****************************** General ******************************/
.content { width: 90%; margin: 0 auto; }
.wrap { margin: 0 auto; max-width: 90%; }
body { margin 40px 40px; font-size: 1em; font-family: sans-serif; background: #F6F6F9; }
a { text-decoration: none; } img { max-width: 100%; }
/****************************** Social Icon ******************************/
.social-icon {
background: lightgrey;
width: 25px;
border-radius: 10px;
position: fixed;
left: 0px;
top: 400px;
clear: left;
}
.social-icon img { width: 25px; height: 25px; padding-bottom: 5px; }
/****************************** Nav ******************************/ .nav { margin-top: 20px; } .nav ul { width: 90% list-style: none; margin: 0 auto; padding: 0; position: absolute; } .nav li { display: inline-block; float: left; margin-right: 2px;
} .nav li a { font-weight: bold; width: 150px; display: block; height: 50px; background: #59524C; transition-duration: .5s; color: #fff; text-align: center; line-height: 50px; } .sub-menu { display: none; } .nav li ul li { clear: left; display: block; } .nav li ul li a { background: #665E56; } .nav li a:hover { background: #59AC6E; transition-property: background; transition-duration: .5s; } .nav li a:hover + .sub-menu, .sub-menu:hover { display: block; -webkit-animation-name: submenumove; -webkit-animation-duration: .8s; }
/****************************** Logo ******************************/
.logo img { width: 500px; }
.logo a { margin: 0 auto; }
.logo { padding-top: 10px; width: 500px; display: block; margin: 0 auto; }
/****************************** Home ******************************/ .content { width: 90%; }
home-img {
text-align: center; margin: 10px auto; border-radius: 5px; width: 100%; clear: right; }
/****************************** About ******************************/
about-p {
line-height: 150%; text-align: left; text-indent: 1.5em; white-space: pre-wrap; clear: both; }
about-photos {
margin: 10px 0; padding: 0; list-style: none; background: blue; }
about-photos li {
float: left; width: 45%; margin: 0 2.5%; }
about-photos img {
border-radius: 5px; }
about-photos p {
text-align: center; }
/****************************** Media-photo gal ******************************/
vidwrap {
text-align: center; width: 100%; margin: 0 auto; } .embed-contain { position: relative; padding-bottom: 56.25%; /* 16/9 ratio / padding-top: 30px; / IE6 workaround*/ height: 0; overflow: hidden; margin-bottom: 50px; } .embed-contain iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #media-photo { width: 100% margin: 0 0 10px 0; padding-bottom: 20px; padding: 0; list-style: none; background: blue; }
phototext {
text-align: center; margin-bottom: 30px; }
media-photo li {
float: left; width: 45%; margin: 0 2.5% 20px; }
media-photo img {
width: 100%; border-radius: 5px; }
media-photo li:nth-child(5n) {
clear: left; }
/****************************** Colors ******************************/
/****************************** Transitions ******************************/
@-webkit-keyframes submenumove { 0% { opacity: 0; } 100% { opacity: 1; } }
/****************************** Queries ******************************/
7 Answers
Yulia Markina
12,616 PointsHi, Alex! To center nav bar, I did this:
.nav {
margin-top: 20px;
padding: 0;
text-align: center;
}
.nav li {
display: inline;
margin-right: 2px;
}
.nav li a {
font-weight: bold;
display: inline-block;
width: 150px;
height: 50px;
background: #59524C;
color: #fff;
text-align: center;
line-height: 50px;
}
Alex Weinberg
2,726 PointsI also can't seem to put a bottom margin on it either.
Alex Friant
6,444 PointsLooks like your workspace is no longer available. I looked briefly, but you could try this for the menu:
.nav {
margin: 0 auto;
max-width: 1000px;
}
That seems to center the menu.
Yulia Markina
12,616 PointsProbably something went wrong with my first comment, sorry. Here is code I've done to center nav. You could try to replace your CSS for these classes with this code.
.nav {
margin-top: 20px;
padding: 0;
text-align: center;
}
.nav li {
display: inline;
margin-right: 2px;
}
.nav li a {
font-weight: bold;
display: inline-block;
width: 150px;
height: 50px;
background: #59524C;
color: #fff;
text-align: center;
line-height: 50px;
}
The problem with max-width: 1000px is that it won't be responsive. It may look perfectly centered on your screen and unpredictably on others.
Alex Weinberg
2,726 PointsSo I tried .nav li{ display: inline } and then the sub-menus don't show up underneath the right menu button. They show up on the very left of the whole nav bar.
Yulia Markina
12,616 PointsI was using Firebug to find a solution for submenus and could see your changes. Looks like you solved the problem :) Thumb up!
Alex Weinberg
2,726 PointsYes, but I still can't get it fully centered. It's slightly off. I don't know if there's a solution with what I have. I'm going to keep trying though. Thanks for the help.
Alex Weinberg
2,726 PointsSo I finally sort of figured out how to make it work, but it's still a little weird. Here's what I did. But now there's a weird issue where the drop down menu is not totally in line with the main menu. It's off by just a little bit. Anybody know why? Here's the link. http://port-80-tdxaeg500f.treehouse-app.com/ .nav li { padding: 0; width: 15.8%; margin: 0 .1%; display: inline-block;
.nav ul { width: 100% list-style: none; padding: 0; margin: 0; position: absolute;
Yulia Markina
12,616 PointsHi, Alex! I could sort of fix it by decreasing width of .sub-menu to width: 98.21%, but it is not perfect. I also added text-align: center to .nav, to make it perfectly centered.
Alex Weinberg
2,726 PointsNever mind. I'm scrapping it. Thank you for the help!
Yulia Markina
12,616 PointsYulia Markina
12,616 PointsTo center not block elements I use text-align: center;, I don't use float: left, instead, I use display: inline-block whenever I can, also, display: inline for .nav li helps to put list items in a row.
Hope it helps.