CODEWITHSUNDEEP
cssnavbarhtml
Chester S.
Chester S.

Reputation: 83

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>

Upvotes: 1

Views: 657

Answers (2)

citysurrounded
citysurrounded

Reputation: 674

It looks like your nav is using boostrap classes. If so, just download and include boostrap.css.

Upvotes: 1

Noah
Noah

Reputation: 80

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

Upvotes: 1

Related Questions