I have a navbar on which I've made use of split button dropdowns and regular nav-items
without dropdowns.
I have it somewhat working, but I'm trying to get the navigation elements to fill the browser window. I've seen references to a "factory" Bootstrap class that will do it, but I can't get it working.
I have 2 questions:
What would be the "factory" method way of doing this in Bootstrap 4?
Why is the spacing between the button elements inconsistent?
body {
padding-top: 70px
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
/* CSS menu */
.navbar, .navbar.btn-secondary {
/* For browsers that do not support gradients */
background-color: #b32017;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(#b32017, #801710);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(#b32017, #801710);
/* For Firefox 3.6 to 15 */
background: -moz-linear-gradient(#b32017, #801710);
/* Standard syntax */
background: linear-gradient(#b32017, #801710);
}
.navbar .btn-secondary {
/*background-color: #b32017;*/
/* For browsers that do not support gradients */
background-color: #b32017;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(#b32017, #801710);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(#b32017, #801710);
/* For Firefox 3.6 to 15 */
background: -moz-linear-gradient(#b32017, #801710);
/* Standard syntax */
background: linear-gradient(#b32017, #801710);
}
.navbar img {
max-height: 40px;
}
.navbar .btn {
/* Removes Bootstrap's border */
border: 0px;
}
.navbar .navbar-brand {
color: #ffffff;
}
.navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
color: #c1c1c1;
}
.navbar .navbar-text {
color: #ffffff;
}
.navbar .navbar-nav .nav-link {
color: #ffffff;
border-radius: .25rem;
margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover, .navbar .navbar-nav .nav-link:not(.disabled):focus {
color: #c1c1c1;
}
.navbar .navbar-nav .nav-item.active .nav-link, .navbar .navbar-nav .nav-item.active .nav-link:hover, .navbar .navbar-nav .nav-item.active .nav-link:focus, .navbar .navbar-nav .nav-item.show .nav-link, .navbar .navbar-nav .nav-item.show .nav-link:hover, .navbar .navbar-nav .nav-item.show .nav-link:focus {
color: #c1c1c1;
background-color: #801710;
}
.navbar .navbar-toggle {
border-color: #801710;
}
.navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus {
background-color: #801710;
}
.navbar .navbar-toggle .navbar-toggler-icon {
color: #ffffff;
}
.navbar .navbar-collapse, .navbar .navbar-form {
border-color: #ffffff;
}
.navbar .navbar-link {
color: #ffffff;
}
.navbar .navbar-link:hover {
color: #c1c1c1;
}
@media (max-width: 767px) {
.navbar .navbar-nav .open .dropdown-menu .dropdown-item .dropdown-menu.show {
/* no gradient support */
/* #cccccc */
color: #ffffff;
/* For browsers that do not support gradients */
background-color: #ffffff;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(#ffffff, #cccccc);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(#ffffff, #cccccc);
/* For Firefox 3.6 to 15 */
background: -moz-linear-gradient(#ffffff, #cccccc);
/* Standard syntax */
background: linear-gradient(#ffffff, #cccccc);
}
.navbar .navbar-nav .open .dropdown-menu .dropdown-item:hover, .navbar .navbar-nav .open .dropdown-menu .dropdown-item:focus {
color: #c1c1c1;
}
.navbar .navbar-nav .open .dropdown-menu .dropdown-item.active {
color: #c1c1c1;
background-color: #801710;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Experimental Test Page</title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-sm bg-faded navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Brand -->
<a class="navbar-brand" href="#">
</a>
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav btn-group">
<!-- Home -->
<li class="nav-item">
<div class="btn-group">
<a href="#" class="btn btn-secondary" role="button"><i class="fa fa-fw fa-home"><!-- --></i> Home</a>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"><i class="fa fa-fw fa-map-marker"><!-- --></i>Hours & Location</a>
</div>
</div>
</li>
<li class="nav-item">
<div class="btn-group" role="button">
<a href="#" class="btn btn-secondary" role="button">Section</a>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
<a class="dropdown-item" href="#">Item 4</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link btn btn-secondary" href="#" role="button">Another Section</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-secondary" href="#" role="button">Section</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-secondary" href="#" role="button">Section</a>
</li>
<li class="nav-item">
<div class="btn-group" role="button">
<a href="#" class="btn btn-secondary" role="button">Products</a>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
</div>
</div>
</li>
</ul>
</div>
</nav>
</body>
</html>
ml-auto class in Bootstrap can be used to align navbar items to the right. The . ml-auto class automatically aligns elements to the right.
By using Bootstrap: This method is a quick tricky that can save you from writing extra CSS. In this, we simply add another div tag above the div tag having class collapse navbar-collapse. This new div tag will also have the same collapse navbar-collapse class.
To move the navbar-brand to the left, in the HTML added class mr-auto to navbar-brand . This worked just fine for me.
You could use nav-justified
, making sure the navbar-nav is full width using w-100
...
<ul class="navbar-nav w-100 nav-justified">
<li class="nav-item">..<li>
<li class="nav-item">..<li>
</ul>
https://codeply.com/go/od0TnGfQv2
For Bootstrap4
this would work better
<ul class="navbar nav nav-justified">
<li class="nav-item">Match Found</li>
<li class="nav-item">Shortlist</li>
</ul>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With