Bootstrap 4 force parent container-fluid to include expanded dropdown - html

Is there a way to get the parent div ".primaryNav", shown in the example with a red background, to include my horizontal dropdown menu in MD to XL views like it does on mobile view?
Currently, I need to add a margin to the .mainNav class to increase the container height so that the background color and drop shadow align with the bottom of the sub nav and the content below it are pushed down. The issue is that when there isn't a sub nav, then the container is too tall and there is a gap.
The goal is to get the .primaryNav div to grow and include the sub nav automatically, pushing down the main content area
#topNav {
letter-spacing: .06rem;
}
#topNav a.nav-link {
padding: 0.05rem 0.5rem;
color: white;
font-weight: 300;
font-size: 0.75rem;
}
#topNav a.nav-link:hover {
text-decoration: underline;
}
#topNav a.nav-link.wpLink {
font-weight: 800;
font-size: .9rem;
}
.primaryNav {
background-color: red;
}
#mainNav .mainSearch .form-control {
border-left: 0;
}
#mainNav .input-group-text {
background-color: white;
border-right: 0;
padding-right: 0;
}
#media (min-width: 576px) {
#mainNav {
font-size: 1rem;
line-height: 1rem;
font-weight: 800;
}
#mainNav .nav-link {
min-height: 65px;
}
}
#media (min-width: 768px) {
#mainNav {
color: #000;
font-weight: 800;
}
#mainNav .nav-link,
#mainNav .nav-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#mainNav,
#mainNav .collapse,
#mainNav .nav-link {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
#mainNav .navbar-nav {
-ms-flex-pack: distribute;
justify-content: space-around;
width: 100%;
}
#mainNav .nav-link span {
-ms-flex-item-align: center;
align-self: center;
}
#mainNav .nav-link:active,
#mainNav .nav-link:focus,
#mainNav .nav-link:hover {
color: black;
border-bottom: 3px solid black;
}
#mainNav .active .nav-link {
border-bottom: 3px solid #0075C9;
}
#mainNav .dropdown {
position: static;
}
#mainNav .dropdown-menu {
display: none;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
border: none;
padding: 0;
margin: 0;
width: 100%;
border-top: 1px solid grey;
background: white;
}
#mainNav .dropdown-menu.in,
#mainNav .active .dropdown-menu,
#mainNav .dropdown:hover .dropdown-menu {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
#mainNav .dropdown-item {
padding: 1rem 2rem;
width: auto;
}
#mainNav .dropdown-item:hover,
#mainNav .dropdown-item:focus,
#mainNav .dropdown-item.active,
#mainNav .dropdown-item:active {
color: #000;
text-decoration: none;
background-color: #F2F2F2;
}
}
#media (min-width: 1200px) {
#mainNav {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>Bootstrap Starter</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- endbuild -->
</head>
<body>
<!-- Top Navigation -->
<div class="container-fluid bg-primary">
<div class="container px-0">
<nav id="topNav" class="navbar navbar-expand navbar-dark text-white px-0 justify-content-lg-end">
<ul class="navbar-nav d-flex ">
<li class="nav-item d-lg-none">
<a class="nav-link wpLink" href="#">Company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product Registration</a>
</li>
<li class="nav-item d-none d-sm-block">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- Main Navigation -->
<div class="container-fluid primaryNav m-sm-0 mb-sm-3 p-sm-0 border-bottom border-secondary shadow">
<div class="container px-0 mainNav">
<nav id="mainNav" class="navbar navbar-expand-md navbar-light p-0">
<!-- Logo -->
<a class="navbar-brand d-none d-lg-block order-md-first" href="#">
<img class="img-fluid py-2" src="assets/img/waterpik-shower-heads-logo.png">
</a>
<!-- Search Bar -->
<form class="form-inline order-md-last m-0 my-2 my-md-0 flex-grow-1 flex-lg-grow-0">
<div class="input-group mainSearch w-100">
<div class="input-group-prepend">
<span class="input-group-text"></span>
</div>
<input class="form-control form-control-sm" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
<!-- Toggler -->
<button class="navbar-toggler align-self-center" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navigation -->
<div class="collapse navbar-collapse mx-lg-5" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Home</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Shop Products</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item d-md-none" href="#">Shop All</a>
<a class="dropdown-item" href="#">Hand Held</a>
<a class="dropdown-item" href="#">Fixed Mount</a>
<a class="dropdown-item" href="#">Dual Head</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Shop Products 2</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
<a class="dropdown-item d-md-none" href="#">Shop All</a>
<a class="dropdown-item " href="#">Hand Held 2</a>
<a class="dropdown-item" href="#">Fixed Mount 2</a>
<a class="dropdown-item" href="#">Dual Head 2</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- Main Content -->
<main role="main" class="container">
<div class="jumbotron text-center">
<img src="assets/img/logo.png"/>
<h1>Bootstrap 4 Starter Template</h1>
<p class="lead">This example is a quick bootstrap starter template.</p>
<a class="btn btn-lg btn-test" href="https://getbootstrap.com/docs/4.3/getting-started/introduction/" role="button" target="_blank">View Bootstrap 4.1 Docs <i class="fad fa-acorn"></i></a>
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</html>

If you want your horizontal menu to be collapsed in MD to XL breakpoints as it is in mobile, you can use .navbar-expand-* class.
So, replace navbar-expand-md with navbar-expand-xl in #mainNav element.
<nav id="mainNav" class="navbar navbar-expand-xl navbar-light p-0">

Have you tried
<nav id="topNav" class="navbar navbar-expand-xs navbar-dark text-white px-0 justify-content-lg-end">
That should work too keep the burger menu, is that what you are trying to achieve? I could not find the div with a primaryNav class.

Related

How to change the background colour for nav-bar dropdown menu?

Im trying to expand the size of the dropdown menu but most of all im trying to change the background colour, I can only seem to change the colour of the links and the area around the links.
.navbar a {
width: 125px;
text-align: center;
color: rgb(173, 173, 173);
}
.nav-link:hover {
color: rgb(238, 176, 94);
}
.dropdown-menu .dropdown-item {
text-align: left;
background-color: aqua;
}
.dropdown-menu a {
color: rgb(48, 58, 78);
background-color: aqua;
}
.dropdown-menu>a:hover {
background-image: none;
background-color: rgb(255, 255, 255);
text-align: center;
}
<!-- Bootstrap-4 + Fontawesome -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/c719673ce3.js" crossorigin="anonymous"></script>
<!-- Body -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="Home.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
My Projects
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="Python.html">Python</a>
<a class="dropdown-item" href="PixelArt.html">Pixel Art</a>
<a class="dropdown-item" href="Website.html">Websites</a>
<a class="dropdown-item" href="raspi.html">Raspberry Pi</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="Portfolio.html">My Portfolio</a>
</li>
</ul>
</div>
</nav>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
This is the dropdown menu. I want to colour in the white, and expand the size of the dropdown menu. If this is possible, what should I do?
In your code
.dropdown-menu .dropdown-item {
text-align: left;
background-color: aqua;
}
you used this which makes the .dropdown-item background in aqua color. If you only want the rgba(0,0,0,1) which is a white color in your background, you only need to remove the background-color:aqua from here. And to change the size of your dropdown menu, you can use width CSS property.
if you want to change all the background color to aqua
.dropdown-menu .dropdown-item {
text-align: left;
background-color: aqua;
}
.dropdown-menu a {
color: rgb(48, 58, 78);
background-color : aqua;
}
if you want to change all the color to white
.dropdown-menu .dropdown-item {
text-align: left;
background-color: #fff;
}
.dropdown-menu a {
color: rgb(48, 58, 78);
background-color : #fff;
}
For the background color you just need to set the rule for a .dropdown-menu inside a .nav-item
.nav-item .dropdown-menu {
background-color: aqua;
}
This selector is specific enough to override the BS style for .dropdown-menu.
Then expand the .dropdown-items to take up the full width of the .dropdown-menu as follows:
.dropdown-menu .dropdown-item {
/* ... */
width: 100%;
}
.navbar a {
width: 125px;
text-align: center;
color: rgb(173, 173, 173);
}
.nav-link:hover {
color: rgb(238, 176, 94);
}
.nav-item .dropdown-menu {
background-color: aqua;
}
.dropdown-menu .dropdown-item {
text-align: left;
width: 100%;
}
.dropdown-menu a {
color: rgb(48, 58, 78);
}
.dropdown-menu>a:hover {
background-image: none;
background-color: rgb(255, 255, 255);
text-align: center;
}
<!-- Bootstrap-4 + Fontawesome -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/c719673ce3.js" crossorigin="anonymous"></script>
<!-- Body -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="Home.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
My Projects
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="Python.html">Python</a>
<a class="dropdown-item" href="PixelArt.html">Pixel Art</a>
<a class="dropdown-item" href="Website.html">Websites</a>
<a class="dropdown-item" href="raspi.html">Raspberry Pi</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="Portfolio.html">My Portfolio</a>
</li>
</ul>
</div>
</nav>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

Why my nav-item don't go at the top of the window?

I'm trying to put a navbar with a navbar-brand to my website. There is a problem, it looks like my picture prevent my nav-items to go on the top of the window. Here is a picture of the problem :
When I remove the navbar-brand, the items are going at the top (you can try it with my code below).
Here is my code :
.logo_1 {
width:9%;
height: auto;
}
.logo_nom {
width: 14%;
height: auto;
}
.nav {
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
.navbar-custom {
background-color: #fafafc;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #369d4a !important;
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: #369d4a !important;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #2b5c35 !important;
}
.navbar-custom .navbar-brand {
color:#369d4a;
}
.navbar-custom .navbar-toggle {
background-color:#369d4a;
}
.navbar-custom .icon-bar {
background-color:#369d4a;
}
#media (max-width: 1250px) {
.nav-item:hover {
background-color: #5eb56f;
}
}
.dropdown-item {
color : #369d4a !important;
}
.dropdown-item:hover {
background-color: #5eb56f !important;
color: #2b5c35 !important;
}
#media all and (min-width: 992px) {
.nav .nav-item .dropdown-menu{ display: none; }
.nav .nav-item:hover .nav-link{ color: #fff; }
.nav .nav-item:hover .dropdown-menu{ display: block; }
.nav .nav-item .dropdown-menu{ margin-top:0; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="test2.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<!-- Début navbar -->
<nav class="nav navbar-expand-lg navbar-custom navbar-dark" aria-label="Eighth navbar example">
<div class="container">
<div class="row" style="margin: 0; padding: 0;">
<a class="navbar-brand">
<img src="logo_no_text.png" alt="Logo" class="logo_1 img-responsive">
<img src="nom_commerce.png" alt="Logo" class="logo_nom img-responsive">
<button class="navbar-toggler navbar-toggle btn_small_screen float-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto" >
<li class="nav-item">
<a class="nav-link px-3" href="">Test 1</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="">Test 2</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="">Test 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle " data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Test 4 </a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Test 4.1</a>
<a class="dropdown-item" href="#">Test 4.2</a>
<a class="dropdown-item" href="#">Test 4.3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="">Test 5</a>
</li>
</ul>
</div>
</div></div>
</nav>
<!-- Fin navbar -->
<!-- Script -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Add a col-6 div outside your logos.
<div class="col-6">
<a>
<img
src="https://www.logodesign.net/images/illustration-logo.png"
alt="Logo"
class="logo_1 img-responsive"
/>
<img
src="https://www.logodesign.net/images/illustration-logo.png"
alt="Logo"
class="logo_nom img-responsive"
/>
<button
class="navbar-toggler navbar-toggle btn_small_screen float-right"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</a>
</div>
Because there is a margin in the body by default, here is how you fix it:
html, body {
margin:0;
}

Is there a code to move the nav bar below a header graphic?

Trying to move the navigation bar below my header image. When I do move it below the image it gives major white space or it disappears behind the header image. I have tried several different CSS tricks from various sources to try get what I want. As I said it just either moves to the bottom or stays at the top or disappears behind the header image.
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
/*--- navigation bar ---*/
.navbar {
background: #6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}
/*--- header ---*/
.header {
background-image: url('images/logo2w5.png');
background-size: contain;
background-position: top center;
position: relative;
background-repeat:no-repeat;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler navbar-dark" type="button" data toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
</header>
The code above is just putting the navigation bar on top of the header image.
I hope this sample helps
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
/*--- navigation bar ---*/
.navbar {
background: #6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}
/*--- header ---*/
.header {
background-image: url('images/logo2w5.png');
background-size: contain;
background-position: top center;
position: relative;
background-repeat:no-repeat;
padding: 0 !important;
margin: 0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header class="page-header header container-fluid">
<img src="https://via.placeholder.com/1500x400" alt="img" width="100%" />
</header>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler navbar-dark" type="button" data toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</body>
</html>

Alignment issue with Bootstrap Nav & Flexbox Items at either end

I'm having difficulty moving items on my Navbar to either end. At the moment I have this:
I would like to move the flag image next to the toggler button, it is only there when the breakpoint reaches the Navbar button size, 992px.
I'm sure the Bootstrap Stylesheet is aligning it using justify-content: space-between; I have tried using align-self: flex-end !important; on both flag and button as well as using justify-content-end
Codepen - https://codepen.io/jvern22/pen/gZjJBN
My Nav code;
<div class="container container-navbar">
<a class="navbar-brand" href="index.php">Website title</a>
<a class="navbar-brand justify-content-end" href="#"><img src="assets/img/spain.png" class="navbar-flag"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-navbar-1">
<ul class="navbar-nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="?page=taketour"><?php echo $lang['nav_takeatour']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=websites"><?php echo $lang['nav_websites']; ?></a></li>
</ul>
</div>
</div>
</nav>
You can either wrap the flag and the navbar button within a div as shown in this CodePen or in the Code Snippet below:
html {
height:100%;
box-sizing: border-box;
}
body {
min-height:100%;
padding:0;
margin:0;
position:relative;
font: 400 15px "Open Sans", sans-serif;
line-height: 30px;
text-align: center;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.bg-dark {
background: #000 !important;
color: #fff;
}
.bg-dark a {
color: #aaa;
}
.bg-dark a:hover, .bg-dark a:focus {
color: #fff;
}
.navbar-nav>li>a {
line-height: 20px;
padding-right: 12px!important;
padding-left: 12px!important;
padding-top: 10px!important;
padding-bottom: 10px!important;
}
.navbar-flag {
height: 20px;
}
#media (min-width: 992px) and (max-width: 2200px){
.navbar-flag {
display: none;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-no-bg" role="navigation">
<div class="container container-navbar">
<a class="navbar-brand" href="index.php">Website title</a>
<div>
<a class="navbar-brand justify-content-end" href="#"><img src="
https://i.imgur.com/TXhhmGb.png" class="navbar-flag"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-navbar-1">
<ul class="navbar-nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="?page=taketour"><?php echo $lang['nav_takeatour']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=websites"><?php echo $lang['nav_websites']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=rates"><?php echo $lang['nav_rates']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=contactus"><?php echo $lang['nav_contact']; ?></a></li>
</ul>
</div>
</div>
</nav>
Or you can just change the justify-content property of the parent div from space-between to flex-end and add a margin-right: auto to the first navbar-brand as shown in this CodePen or in the Code Snippet below:
html {
height:100%;
box-sizing: border-box;
}
body {
min-height:100%;
padding:0;
margin:0;
position:relative;
font: 400 15px "Open Sans", sans-serif;
line-height: 30px;
text-align: center;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
a.navbar-brand:first-child {
margin-right: auto;
}
.bg-dark {
background: #000 !important;
color: #fff;
}
.bg-dark a {
color: #aaa;
}
.bg-dark a:hover, .bg-dark a:focus {
color: #fff;
}
.navbar-nav>li>a {
line-height: 20px;
padding-right: 12px!important;
padding-left: 12px!important;
padding-top: 10px!important;
padding-bottom: 10px!important;
}
.navbar-flag {
height: 20px;
}
#media (min-width: 992px) and (max-width: 2200px){
.navbar-flag {
display: none;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-no-bg" role="navigation">
<div class="container container-navbar">
<a class="navbar-brand" href="index.php">Website title</a>
<a class="navbar-brand justify-content-end" href="#"><img src="
https://i.imgur.com/TXhhmGb.png" class="navbar-flag"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-navbar-1">
<ul class="navbar-nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="?page=taketour"><?php echo $lang['nav_takeatour']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=websites"><?php echo $lang['nav_websites']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=rates"><?php echo $lang['nav_rates']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=contactus"><?php echo $lang['nav_contact']; ?></a></li>
</ul>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
The easiest solution here is to just expand the first flex item so that it pushes all the other items to the right. This can be easily done by adding the following to your css:
.navbar-brand:first {
flex-grow: 1;
}

Bootstrap 4 alpha how to add a drop-down menu to navigation?

This is from Bootstrap v4 Alpha blog theme. And I'm using this for a project. Then I tried to add a drop-down menu to this navigation bar as normal but the navigation bar dropdowns are not coming and not showing.
This is the drop-down, I tried to add to this navigation. But it's not working. Is this something I have to change from custom styles? Any input would be appreciated.
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>About</li>
<li>Team</li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
/*
* Globals
*/
#media (min-width: 48em) {
html {
font-size: 18px;
}
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #555;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}
/*
* Override Bootstrap's default container.
*/
.container {
max-width: 60rem;
}
/*
* Masthead for nav
*/
.blog-masthead {
margin-bottom: 3rem;
background-color: #428bca;
-webkit-box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
}
/* Nav links */
.nav-link {
position: relative;
padding: 1rem;
font-weight: 500;
color: #cdddeb;
}
.nav-link:hover,
.nav-link:focus {
color: #fff;
background-color: transparent;
}
/* Active state gets a caret at the bottom */
.nav-link.active {
color: #fff;
}
.nav-link.active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -.3rem;
vertical-align: middle;
content: "";
border-right: .3rem solid transparent;
border-bottom: .3rem solid;
border-left: .3rem solid transparent;
}
/*
* Blog name and description
*/
.blog-header {
padding-bottom: 1.25rem;
margin-bottom: 2rem;
border-bottom: .05rem solid #eee;
}
.blog-title {
margin-bottom: 0;
font-size: 2rem;
font-weight: normal;
}
.blog-description {
font-size: 1.1rem;
color: #999;
}
#media (min-width: 40em) {
.blog-title {
font-size: 3.5rem;
}
}
/*
* Main column and sidebar layout
*/
/* Sidebar modules for boxing content */
.sidebar-module {
padding: 1rem;
/*margin: 0 -1rem 1rem;*/
}
.sidebar-module-inset {
padding: 1rem;
background-color: #f5f5f5;
border-radius: .25rem;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
/* Pagination */
.blog-pagination {
margin-bottom: 4rem;
}
.blog-pagination > .btn {
border-radius: 2rem;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 4rem;
}
.blog-post-title {
margin-bottom: .25rem;
font-size: 2.5rem;
}
.blog-post-meta {
margin-bottom: 1.25rem;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 2.5rem 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: .05rem solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Blog Template for Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/blog/">
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="blog.css" rel="stylesheet">
</head>
<body>
<div class="blog-masthead">
<div class="container">
<nav class="nav blog-nav">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">New features</a>
<a class="nav-link" href="#">Press</a>
<a class="nav-link" href="#">New hires</a>
<a class="nav-link" href="#">About</a>
</nav>
</div>
</div>
<div class="blog-header">
<div class="container">
<h1 class="blog-title">The Bootstrap Blog</h1>
<p class="lead blog-description">An example blog template built with Bootstrap.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8 blog-main">
This is what a drop-down in Bootstrap 4 should look like (note: this is Bootstrap 4 release version; the alpha version is outdated):
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
The dropdown-item classes are missing in your code.
Here's a full navbar example for Bootstrap 4, including a drop-down:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav 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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Reference:
https://getbootstrap.com/docs/4.0/components/navbar/