Nav bar


#1

My nav bar wont stretch across the top. it is all in one clump?
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;

}

.nav li {
display: inline;

}


#2

Try using, clear:both;
or in the html giving it a minimum width


#3

I'm very new to code can you please give me an example I added clear:both; to the .nav li and it didnt change anything


#4

I'm real curious why it doesnt work. I have went back and started over several times following the code

this is my style sheet
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;

}

.nav li {
display: inline;
clear:both;

}

.jumbotron {
background-image:url('http://goo.gl/04j7Nn');
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}

.jumbotron .container {
position: relative;
top:100px;
}

.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}

.jumbotron p {
font-size: 20px;
color: #fff;
}

.learn-more {
background-color: #f7f7f7;
}

.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}

.learn-more a {
color: #00b0ff;
}


#5

Oh I see whats going on, try adding
display:inline;

to the .nav li, this should fix the problem

edit: I see you have already done this :frowning:


#6

try adding a seperate css line

nav li {
display: inline;
float: left;
}

and put this in without the "." at the start


#7

No dice :frowning:
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;

}

nav li {
display: inline;
float: left;
}

.nav li {
display: inline;
clear:both;

}

.jumbotron {
background-image:url('http://goo.gl/04j7Nn');
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}

.jumbotron .container {
position: relative;
top:100px;
}

.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}

.jumbotron p {
font-size: 20px;
color: #fff;
}

.learn-more {
background-color: #f7f7f7;
}

.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}

.learn-more a {
color: #00b0ff;
}


#8
                <div id="navbar">
			<ul>
				<li>Name</li>
				<li>Browse</li>
				<li>Sign Up</li>
				<li>Login</li>
                                <li>Help</li>
			</ul>
		</div>

Wack that into your html instead and add the following css

   ul{
    	list-style-type: none;
    	position: fixed;
    	margin: -10px;
    }
    li {
    	display: inline;
    	border: 2px solid #000000;
    	font-family: Futura, Tahoma, sans-serif;
    	color: #ffffff;
    	padding: 5px;
    	border-radius: 5px 5px;
    	background-color: #cc0323
    }
    #navbar {
        position: fixed;
        top:10px;
        left:50%;
        margin-left:-254px;
    }

Then you can add your extra bits to the #navbar instead, #navbar gives it a certain ID so it will only apply to the html that has id="navbar" on it, so you could also rename the li and ul to "#navbar li" and "#navbar ul"


#9

That works... now why doesnt that work through the tutorial the way it should? lol


#10

At this point in the course, the nav list items should be in two rows, one for each ul element, one row below the other.