Skip to content Skip to sidebar Skip to footer
Home / Bootstrap 4 / Css / Html / Javascript / Twitter Bootstrap

Navbar Is Vertical Instead Of Horizontal

Post a Comment
Why does this show a vertical list instead of a horizontal one?

Solution 1:

I removed the navbar-nav class and it's horizontal again. My best guess is that the navbar-nav class has some css associated with it that was overwriting the navbar-default styles.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div id="navigation">
   <nav class="navbar navbar-default">
      <ul class="nav">
         <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
         <li class="nav-item"><a class="nav-link" href="/browse">Browse</a></li>
         <li class="nav-item"><a class="nav-link" href="/create">Create</a></li>
         <li class="nav-item"><a class="nav-link" href="/review">Review</a></li>
         <li class="nav-item"><a class="nav-link" href="/help">Help</a></li>
      </ul>
      <form class="form-inline">
         <a href="#" onclick="signOut();">Sign out</a>
         <div id="my-signin2">
            <!-- google oauth stuff -->
         </div>
      </form>
   </nav>
</div>

Solution 2:

You can Remove the Background.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div id="menu-outer">
<div id="table">
   <nav class="navbar navbar-default horizontal-list">
      <ul class="nav navbar-nav">
         <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
         <li class="nav-item"><a class="nav-link" href="/browse">Browse</a></li>
         <li class="nav-item"><a class="nav-link" href="/create">Create</a></li>
         <li class="nav-item"><a class="nav-link" href="/review">Review</a></li>
         <li class="nav-item"><a class="nav-link" href="/help">Help</a></li>
      </ul>
      <form class="form-inline">
         <a href="#" onclick="signOut();">Sign out</a>
         <div id="my-signin2">
            <!-- google oauth stuff -->
         </div>
      </form>
   </nav>
</div>
</div>

<style>
    #menu-outer {
    height: 84px;
    background: url(images/bar-bg.jpg) repeat-x;
}

.table {
    display: table;   /* Allow the centering to work */
    margin: 0 auto;
}

ul#horizontal-list {
    min-width: 696px;
    list-style: none;
    padding-top: 20px;
    }
    ul#horizontal-list li {
        display: inline;
    }
</style>

Solution 3:

From what I see your issue is that lists are lists, ul and li will make vertical lists. If you want horizontal you need some css, or some style.

Try adding something like this:

<html>
<head>
<style>
ul li {
    display:inline;
}
</style>
</head>
<body>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-    beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-    beta.2/js/bootstrap.min.js"></script>
<div id="navigation">
   <nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
     <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
     <li class="nav-item"><a class="nav-link" href="/browse">Browse</a></li>
     <li class="nav-item"><a class="nav-link" href="/create">Create</a></li>
     <li class="nav-item"><a class="nav-link" href="/review">Review</a></li>
     <li class="nav-item"><a class="nav-link" href="/help">Help</a></li>
  </ul>
  <form class="form-inline">
     <a href="#" onclick="signOut();">Sign out</a>
     <div id="my-signin2">
        <!-- google oauth stuff -->
     </div>
  </form>
  </nav>
  </div>
  </body>
</html>

You may like these posts

Post a Comment for "Navbar Is Vertical Instead Of Horizontal"