2

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;
}
Samrat Luitel
  • 369
  • 2
  • 8
  • 22

7 Answers7

3

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>
Ezzuddin
  • 645
  • 5
  • 18
0

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

.nav li{
   display:inline-block;
}
Veena K. Suresh
  • 942
  • 5
  • 16
  • I'm sorry but your code does not fix the problem. Three "home" are coming vertically. Not horizontally. But they show horizontally If I use boostrap 3. Please try to answer once again. I'm sorry for ill explanation of problem. – Samrat Luitel Oct 26 '17 at 08:41
0

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

  • I think your html structure have a problem inside `nav` you put `
    `
     –  Oct 26 '17 at 05:34
  • So what shall I do. And is that a problem – Samrat Luitel Oct 26 '17 at 05:35
  • I'm sorry but that does not fix the problem. Three "home" are coming vertically. Not horizontally. But they show horizontally If I use boostrap 3. Please try to answer once again. I'm sorry for ill explanation of problem. – Samrat Luitel Oct 26 '17 at 08:43
0

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>
Rushabh Sheth
  • 177
  • 1
  • 8
  • I'm sorry but your code does not fix the problem. Three "home" are coming vertically. Not horizontally. But they show horizontally If I use boostrap 3. Please try to answer once again. I'm sorry for ill explanation of problem. – Samrat Luitel Oct 26 '17 at 08:42
  • try the new one i have used bootstrap v4 – Rushabh Sheth Oct 26 '17 at 09:05
0

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;
}
4b0
  • 21,981
  • 30
  • 95
  • 142
Ajeesh KH
  • 332
  • 1
  • 7
  • I'm sorry but your code does not fix the problem. Three "home" are coming vertically. Not horizontally. But they show horizontally If I use boostrap 3. Please try to answer once again. I'm sorry for ill explanation of problem. – Samrat Luitel Oct 26 '17 at 08:42
0

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

TipTop
  • 1
  • 1
-2
li {
    float:left;
}
ul {
    list-style-type:none;
}
Ayaan Khan
  • 1