Chester S. Chester S. - 6 months ago 9
HTML Question

HTML Navigation Bar, fixed at the top of webpage, horizontal boxes(buttons)

I am trying to get a navbar to show at the top of a webpage, have horizontal buttons inside of a clean box. Very similar look to the navbar found at http://www.apple.com/. I feel as if I should know how to do this, but apparently I do not. Any help is very appreciated, or even points and tips. Thank you and below is the code I have so far.
Css is shown first, and then my HTML.



body{
border: solid;
background-color: white;
color: black;
text-align: center;
}

table.slideshow{


}
th.slideshowtitle{
text-align: center;

}

footer{
border-top: solid 10px;


}

/*nav bar*/
.navbar-inverse {
background-color:black;
}

<!DOCTYPE html>

<html>

<head>
<link href="C:\Users\Chester Szydlowski\Desktop\HOF\stylesheet.css" type="text/css" rel= "stylesheet" />
<title>
Hall Of Framers
</title>
</head>
<body>

<nav class ="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<u1 class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="C:\Users\Chester Szydlowski\Desktop\HOF\public_html\EmailList.html">Email List</a></li>
<li><a href="">Custom Frames</a></li>
<li><a href="">News</a></li>
<li><a href="">Silent Auction</a></li>
<li><a href="">Upcoming and Past Events</a><li>
<li><a href="">i dont know</a></li>
</u1>
</div>
</div>
</nav>


<p> Products </p>

</table>
</body>




Answer

If you add a display css selector to the "li" elements, it will do the trick

Add the following to your css.

  li{
     display:inline-block;
   }

This will move the elements next to eachother, and you can style it further from there. Good luck

Comments