CODEWITHSUNDEEP
htmlcssnavbarnav
akezd
akezd

Reputation: 97

Unable to make navbar horizontal

I'm having trouble making the navbar appear across the page horizontally rather than vertically. After trying a number of different things, I think the problem revolves around the the ul class. But I just can't seem to crack the issue. 

<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/"><img src="/static/kkapital.png" align="left"></a>
            </div>
            <ul class="nav navbar-nav navbar-left">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </nav>
</body>

Upvotes: 2

Views: 56

Answers (1)

Patrick
Patrick

Reputation: 17973

There's a few changes that needs to be done. If you check the example here you can see your code and a working sample just underneath.

The main difference is the navbar-expand class which makes the items fan out horizontally instead of vertically. I added a background color with bg-light but that is optional. Another thing is to add nav-item and nav-link to your menu items; this is mostly for styling the items with spacing, hover color and so on, but it structures your code so you can customize your navbar easier later.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="/">Brand</a>
    </div>
    <ul class="nav navbar-nav navbar-left">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-expand bg-light">
  <div class="navbar-header">
    <a class="navbar-brand" href="/">Brand</a>
  </div>
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Page 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Page 2</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link" href="#">Page 3</a>
    </li>
  </ul>
</nav>

Upvotes: 2

Related Questions