Reputation: 379
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
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
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
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
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
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