Samrat Luitel
Samrat Luitel

Reputation: 379

Boostrap how to make navbar <li> elements in same line?

I am trying to make navbar elements appear on same line. I tried overriding .nav class display to inline:block. but it is not working at all. Please help me fix this problem. This is working on bootstrap 3

HTML

<head>
  <title>Samrat Luitel website design </title>
</head>
<body>
  <!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav">
  <div class="container-fluid topnav">
    <div class="navbar-header">
      <a class="navbar-brand topnav" href="#" target="_blank">Samrat Luitel</a>
    </div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#home" style="color:black">Home</a></li>
        <li><a href="#home" style="color:black">Home</a></li>
        <li><a href="#home" style="color:black">Home</a></li>
      </ul>   
      </div>
    </div>
  </div>

  </nav> 
</body>

CSS

body{
  font-family:"Lato";
  font-weight:700;
}
.navbar-brand{
  color:black;
}
.nav {
    display: inline-block;
}

Upvotes: 2

Views: 8711

Answers (7)

Ayaan Khan
Ayaan Khan

Reputation: 1

li {
    float:left;
}
ul {
    list-style-type:none;
}

Upvotes: -2

TipTop
TipTop

Reputation: 11

I had the same problem and the suggested solutions with adding something like "... display: inline ..." to my stlyes.css file also did not help me (I also use Bootstrap4).

This is what finally helped me

<nav class="navbar navbar-default navbar-expand-sm">
...
</nav>

The important point here is navbar-expand-sm. This says that the nav-bar-items are only stacked vertically when the screen size is smaller or equal to small. See further explanation here https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

Upvotes: 1

Rushabh Sheth
Rushabh Sheth

Reputation: 177

Its difficult to understand the exact problem but i guess if inline is not working try float

.nav > li {float:left:width:30%;}

/* New edit */ Try this one

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse " id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
     
    
    </ul>
  </div>
</nav>

Upvotes: 0

Ajeesh KH
Ajeesh KH

Reputation: 340

Update your css with below css. Remove display:inline-block; from .nav css rule.

.nav {
    float: left;
    width: 100%;
}
.nav li {
    display: inline-block;
    padding: 0 10px;
}     

Upvotes: 0

Ezzuddin
Ezzuddin

Reputation: 665

You can use this

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css" />

<head>
  <title>Samrat Luitel website design </title>
</head>
<body>
  <!-- Navigation -->
<nav class="navbar navbar-fixed-top">
    <div class="container topnav">
      <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="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Samrat Luitel</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Home</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Home</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Home</a></li>
        </ul>
      </div>
    </div>
  </nav>
</body>

Upvotes: 3

user4779637
user4779637

Reputation:

You need to put this css .nav > li {display: inline}

Upvotes: 0

Veena K. Suresh
Veena K. Suresh

Reputation: 1002

Pls add inline-block style to your li, so that you can manage your list items.

.nav li{
   display:inline-block;
}

Upvotes: 0

Related Questions