So I am new to bootstrap 4 and sass and i want to do a project with both of them for the first time. The problem comes when I am trying to construct a div that is 900px in height but somehow, for some reason, it does not show up. It only shows up when I actually put things in it. What am I doing wrong here?
Could it be a problem because i am using sass? Or is it something completely else?
Code:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.I {
width: 100%;
height: 2000px;
}
.II {
height: auto;
width: 100%;
background-image: url(https://66.media.tumblr.com/94fb0667afbd3be221b09eb507991a22/tumblr_pwp1fg971T1qjb5z3o2_1280.png);
background-size: cover;
color: white;
}
.II .nav-link {
color: white;
}
.II a {
text-decoration: none;
color: white;
font-weight: bold;
}
.II a:hover {
color: #cacaca;
}
.IV {
background-color: #6362a7;
width: 100%;
height: 900px !important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: 50px;
}
.fa-suitcase {
color: #f5b944;
}
.col-md-2 {
margin-right: 0px;
width: 15%;
}
/*# sourceMappingURL=webwavers.css.map */
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body>
<div class="I container-fluid">
<div class="row">
<div class="II container-fluid">
<nav class="navbar navbar-expand-md navbar-dark">
<a class="navbar-brand" href="#">COSMOS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto offset-1">
<li class="nav-item offset-2">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row">
<!-- <div class="III container"> -->
</div>
<div class="row">
<div class="IV container-fluid">
<!--im small and i should be 900 px in height-->
</div>
</div>
</div>
A simple .container-fluid > .row > .col-12 will do. Giving .col-12 (or any of its children) a height of 900px will make it apply. Working example:
.min-900 {
border: 3px solid red;
height: 900px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<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.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<a class="navbar-brand" href="#">COSMOS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto offset-1">
<li class="nav-item offset-2">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
</div>
</nav>
<main class="container-fluid">
<div class="row">
<div class="col-12 min-900"></div>
</div>
</main>
If you want to use min-height instead of height, your selector has to have a specificity of more than 1 class, because .col-* classes have a min-height of 1px, which you need to override. Example:
div.min-900 {
border: 3px solid red;
min-height: 900px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<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.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<a class="navbar-brand" href="#">COSMOS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto offset-1">
<li class="nav-item offset-2">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
</div>
</nav>
<main class="container-fluid">
<div class="row">
<div class="col-12 min-900"></div>
</div>
</main>
As said in the comments, do not put content directly into row. You actually need to put it into col-*-* so what you need is to change that to .row > col-*-* > (content). What I am using is simple notation. <div class="warning><p class="bold">content</p></p> corresponds to warning > bold > (content). I think you'll understand what I am telling you by now.
Hope this helps!
Related
EDIT:
I resized the drop-down menu bar, removed the borders & added a box-shadow. The drop-down button is on the right side when clicked the menu opens underneath the site title on the left, here's the updated code & picture of update:
enter image description here
HTML:
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">My Site</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto my-2 my-lg-0">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
CSS:
#media screen and (max-width:991.98px) {
.navbar-nav{
background-color: #f0ede8;
height: 200px;
width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
float:left;
}
.navbar-nav .nav-item{
text-align: center
}
}
Thanks again for your help!
I'm customizing a Bootstrap theme and would like to keep my navbar transparent but have the drop-down menu have a background color when it's resized to a smaller device. I tried altering the media queries but can't seem to figure this out. I'm still trying to get the hang of Bootstrap. I've attached two screenshots of my site as reference.The first one is how the drop-down menu currently looks. The second one is how I'd like for the drop-down menu to look.
Thank you!
HTML
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">My Site</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto my-2 my-lg-0">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
if u want the menu size in half and positioned it under the title,
i just added a little code from #Shanice Morgan
#media screen and (max-width:768px){
.navbar-nav{
background-color:gainsboro;
border:blue 2px solid;
float:left; /* left side */
}
.navbar-nav .nav-item{
border:blue 2px solid;
padding: 0px 10px;
}
}
Try this:
#media screen and (max-width:768px){
.navbar-nav{
background-color:gainsboro;
border:blue 2px solid;
}
.navbar-nav .nav-item{
border:blue 2px solid;
}
}
The hover is not covering all the height of the link, How I do to fix the hover?
I know that the combination of colors is not correct but is only for testing*
I'm using Bootstrap 4.3.1
.navbar .collapse ul li{
}
.navbar .collapse ul li a{
font-family: 'Comfortaa', cursive;
font-size: 20px;
color: skyblue !important;
}
.navbar .collapse ul li a:hover{
background-color: deepskyblue;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand mx-5" href="#">
<img src="Resources/Images/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mx-3">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Your first div's .navbar class is adding padding. That's why the hover is not displaying like you want.
FIX: Remove padding (top & bottom) by adding this CSS
.navbar {
padding: 0 1rem;
}
guys I'm having a problem in my navbar. In smaller screens the navbar don't span to full width. here's my code:
nav.navbar {
background-color: black;
/* top: 0;
margin: 0; */
padding-left: 0;
padding-right: 0;
width: auto;
box-sizing: border-box;
border-bottom: 5px solid #333333;
}
div.navbar-collapse {
background-color: black;
width: 100%;
white-space: nowrap;
}
<nav class="navbar navbar-expand-xl static-top">
<button class="navbar-toggler hamburguer" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar mid"></div>
<div class="bar"></div>
</div>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav options links">
<a class="nav-item nav-link" href="https://www.sfdergedg.com/about.php">About</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/blog.php">Blog</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/media.php">Media</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/meet_the_dev.php">Meet the Dev!</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/support.php">Support</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/contacts.php">Contacts</a>
</div>
</div>
</nav>
I've seen problems about this but nothing solved my problem. Seem's this problem is common when we use a static navbar.
thank you in advance! ;)
You need to set margin and padding to 0px for body tag.
Below is working demo:
body {
margin: 0;
padding: 0;
}
nav.navbar {
background-color: black;
width: auto;
box-sizing: border-box;
border-bottom: 5px solid #333333;
}
div.navbar-collapse {
background-color: black;
width: 100%;
white-space: nowrap;
}
<nav class="navbar navbar-expand-xl static-top">
<button class="navbar-toggler hamburguer" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar mid"></div>
<div class="bar"></div>
</div>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav options links">
<a class="nav-item nav-link" href="https://www.sfdergedg.com/about.php">About</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/blog.php">Blog</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/media.php">Media</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/meet_the_dev.php">Meet the Dev!</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/support.php">Support</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/contacts.php">Contacts</a>
</div>
</div>
</nav>
The problem is that below navbar I had an Image without width set. And as it was wider than the screen, the navbar didn't span at 100%. It fixed after I set the width of that Image to 100% or less. Thank you for all answers! ;)
Best Regards,
Eduardo
In my navbar I have both image and text (The navbar brand) inside the <a class="navbar-brand> tag. When I added the image, it wasn't vertically centered within the navbar, so I had to give the <img> tag margin-top to align it, but it also pushed the navbar brand down, how can I move the text back up?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.navbar {
font-size: 0.8rem;
font-weight:500;
}
.navbar-brand {
padding: 0 15px;
height: 40px;
line-height: 80px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
</style>
<link href='#' rel='stylesheet'>
<nav id="bt_navbar" class="navbar navbar-expand-lg fixed-top" style="background: gray!important;">
<div class="container">
<a class="navbar-brand mx-auto" href="#" style="color:white;">
<img src="logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo" style="margin-top:10px;margin-right:5px">
Brand Name
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" style="background-color:black!important;">
<span class="navbar-toggler-icon" style="back-ground-color:white!important;"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#" style="color:white">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:white">Link 2</a>
</li>
</ul>
</div>
</div>
</nav>
I have removed all of the extra classes from the img tag and moved the text inside a span. I used flexbox to center align text and logo.
.navbar-brand {
padding: 0 15px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
<a class="navbar-brand mx-auto" href="#" style="color:white;">
<img src="https://loremflickr.com/30/30" width="30" height="30" alt="logo">
<span>Brand Name</span>
</a>
Working Example
https://jsfiddle.net/yj1qjgvp/
Just removed line height in navbar-brand, its conflicting with your image dimesions.
Hope this helps!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.navbar {
font-size: 0.8rem;
font-weight:500;
}
.navbar-brand {
padding: 0 15px;
height: 40px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
</style>
<link href='#' rel='stylesheet'>
<nav id="bt_navbar" class="navbar navbar-expand-lg fixed-top" style="background: gray!important;">
<div class="container">
<a class="navbar-brand mx-auto" href="#" style="color:white;">
<img src="logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo" style="margin-top:10px;margin-right:5px">
Brand Name
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" style="background-color:black!important;">
<span class="navbar-toggler-icon" style="back-ground-color:white!important;"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#" style="color:white">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:white">Link 2</a>
</li>
</ul>
</div>
</div>
</nav>
Im having problems to float elements to the right inside bootstrap navbar, I need to apply float:right to Option 1 and Option 2 elements, and center Search Input, I tried !important rule but still doesnt work, and when the content is collapsed and you click navbar toggler button it moves some px from the left.
Edit: I also need to display navbar when is collapsed in this order: Brand - Search Input - Toggler button. And the content of toggler button under Search Input.
Here is the relevant code:
.navbar{
background-image: cornflowerblue;
}
#mainNav{
border: 5px solid black;
margin: 3%;
background-color: white;
}
body{
background-color: grey;
}
#navContent{
background-color: white;
margin: 3%;
}
#final{
border: 5px solid black;
margin: 3%;
background-color: white;
}
#searchForm{
margin: auto;
}
#test{
text-align: center;
border: 5px solid black;
float: right;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid">
<section class="row" id="mainNav">
<nav class="navbar navbar-expand-xs rounded">
<a class="navbar-brand" href="#">Brand</a>
<form class="form-inline" id="searchForm" role="search">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler" aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div id="test">
<div class="collapse navbar-collapse" id="navToggler">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Option 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Option 2</a></li>
</ul>
</div>
</div>
</nav>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="js/index.js"></script>
</body>
just add <div class="col-md-12"></div> below to section it'll be works
.navbar{
background-image: cornflowerblue;
}
#mainNav{
border: 5px solid black;
margin: 3%;
background-color: white;
}
body{
background-color: grey;
}
#navContent{
background-color: white;
margin: 3%;
}
#final{
border: 5px solid black;
margin: 3%;
background-color: white;
}
#searchForm{
margin: auto;
}
#test{
text-align: center;
border: 5px solid black;
float: right;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid">
<section class="row" id="mainNav">
<div class="col-md-12">
<nav class="navbar rounded">
<a class="navbar-brand" href="#">Brand</a>
<form class="form-inline" id="searchForm" role="search">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler" aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div id="test">
<div class="collapse navbar-collapse" id="navToggler">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Option 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Option 2</a></li>
</ul>
</div>
</div>
</nav>
</div>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="js/index.js"></script>
</body>
If you want a mega-menu in Bootstrap 4 (like eg. yamm for Boostrap 3), I had success with using flexbox:
<!-- adapted from bs-repo basic navbar example code -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com"
id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Dropdown link</a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink">
<ul class="d-md-inline-flex flex-md-row">
<li class="dropdown-item">
<ul class="d-md-inline-flex flex-md-column">
<li class="dropdown-item">Action</li>
<li class="dropdown-item">Another action</li>
<li class="dropdown-item">Something else here</li>
</ul>
</li>
<li class="dropdown-item">
...
</li>
<li class="dropdown-item">
...
</li>
</ul>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</div>
</nav>
Use the Bootstrap 4 integrated Flex-System. I cleaned the code a bit and added the magic ml-auto (margin-left:auto).
Give it a try.
.navbar{
background-image: cornflowerblue;
}
#mainNav{
border: 5px solid black;
margin: 3%;
background-color: white;
}
body{
background-color: grey;
}
#navContent{
background-color: white;
margin: 3%;
}
#final{
border: 5px solid black;
margin: 3%;
background-color: white;
}
#searchForm{
margin: auto;
}
<html>
<head>
<title></title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg rounded" id="mainNav">
<a class="navbar-brand" href="#">Brand</a>
<form class="form-inline" id="searchForm" name="searchForm" role="search">
<div class="input-group">
<input class="form-control" placeholder="Search" type="text">
<div class="input-group-btn">
<button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<button aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navToggler" data-toggle="collapse" type="button"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse ml-auto" id="navToggler">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Option 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Option 2</a>
</li>
</ul>
</div>
</nav>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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>
</body>
</html>