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/
Related
#import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght#400;500;600;700&display=swap');
:root {
--color-body: #b6cbce;
--color-heading: #eef3db;
--color-base: #033f47;
--color-base2: #022a30;
--color-brand: #e0f780;
--color-brand2: #deff58;
--sidbar-width: 240px;
--font-base: "Bai Jamjuree";
}
*{
background-color: var(--color-base2);
color: var(--color-base);
font-family: var(--font-base);
}
.navbar .nav-link {
font-weight: 700;
text-transform: uppercase;
color: white;
transition:all 0.5s ease-in;
}
.navbar .nav-link:hover{
color: var(--color-brand);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-heading);
color: aliceblue;
font-weight: 700;
}
a {
text-decoration: none;
color: var(--color-body);
transition: all 0.5s ease;
}
a:hover {
color: var(--color-brand);
}
img {
width: 100%;
}
h3 {
color: white;
}
#media (min-width:992px) {
.navbar {
min-height: 100vh;
width: 240px;
background: linear-gradient(rgba(3, 63, 71, 0.623), rgba(3, 63, 71, 0.853)), url(./sidebar-img.jpg);
background-size: cover;
background-position: center;
}
.navbar img{
border: 8px solid var(--color-brand);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
</head>
<body>
<!-- Navigation bar start -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container flex-lg-column">
<a class="navbar-brand mx-lg-auto mb-lg-4" href="#"><span class="h3 text-white fw-bold d-block d-none">Shuvo Raj</span>
<img src="./person.jpg" class="d-none d-lg-block rounded-circle" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto flex-lg-column text-lg-center">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- navigation bar close -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"></script>
</body>
</html>
navbar color can't vanish or be transparent because it is linked to body color, how to solve it? I'm practicing some projects with some youtube tutorials. and I got an error or I can't do like same as a developer?
I'm doing this project with html/css/bootstap5
This is a Problem!!`
i Want to do as like it
Html Code
``
There is multiple approaches to this, on the css for *{…} you can use *:not(.navbar){…
Or you can use !important at the end of background such as:
background-color:#33b5e5 !important;
I am developing a WordPress website. I already edited the navbar and added some custom CSS. I will include my custom CSS below.
/** Header Customization start **/
#media screen and (min-width:1024px){ .header_area_container{
background:white;
}
.wgl-header-row_wrapper{
background:white;
}
.menu-item-1782{
background:#35a07b;
margin-left: 250px;
border-left: 1px solid white;
height: 500px;
}
.menu-item-1810{
background:#35a07b;
border-left: 1px solid white;
height: 500px;
}
.menu-item-1784{
background:#35a07b;
border-left: 1px solid white;
height: 500px;
}
.menu-item-1805{
background:#35a07b;
border-left: 1px solid white;
height: 500px;
}
.menu-item-1832{
background:#35a07b;
border-left: 1px solid white;
height: 500px;
}
.menu-item-1826{
background:#35a07b;
border-left: 1px solid white;
height: 500px;
}
.side_panel .side_panel_inner .side_panel-toggle{
/* color:black; */
margin-top:400px;
}
#menu-main-1{
margin-left:140px
}
}
/** Header Customization end **/
The problem with this CSS is I have to adjust the width of the header for separate screen versions manually and that's not a good industry standard. How can I make this responsive? I want to align my menu tabs automatically for all the desktop/laptop screen sizes.
#media screen and (min-width:1024px){ .header_area_container{
background:purple;
}
.wgl-header-row_wrapper{
background:white;
}
.menu-item-1782{
background:#35a07b;
margin-left: 250px;
border-left: 1px solid white;
height: 500px;
}
.menu-item-1810{
background:#35a07b;
border-left: 1px solid white;
height: 500px;
}
.menu-item-1784{
background:#35a07b;
border-left: 1px solid white;
height: 500px;
}
.menu-item-1805{
background:#35a07b;
border-left: 1px solid white;
height: 500px;
}
.menu-item-1832{
background:#35a07b;
border-left: 1px solid white;
height: 500px;
}
.menu-item-1826{
background:#35a07b;
border-left: 1px solid white;
height: 500px;
}
.side_panel .side_panel_inner .side_panel-toggle{
color:black;
margin-top:400px;
}
#menu-main-1{
margin-left:140px
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<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>
<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://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I'm using bootstrap's responsive navbar, in mobile devices it displays a dropdown menu. This menu, be default, is aligned to the left. I changed this so that is displays to the right. I did achieve this. However, when I test on my iPhone (XR), the dropdown first shows on the left and quickly moves to the right, on its own. How can I stop this?
You can see a small video of what's happening here.
/* Navbar */
.navbar-light .navbar-toggler {
color:rgba(46, 46, 46, 1);
border-color: transparent;
}
.navbar-custom {
background-color: #ffffff;
}
.navbar-custom .navbar-brand img {
width: 75%;
}
.navbar-light .navbar-nav .nav-link {
color: rgba(46, 46, 46, 1);
font-size: 0.9em;
text-transform: capitalize;
font-weight: 600;
border-radius: 0;
}
.navbar-light .navbar-nav .nav-link:hover {
color: #DA3D0D;
text-decoration: none;
}
.navbar-custom-dropdown {
border-radius: 0;
}
.navbar-custom-dropdown li a {
font-weight: 600;
line-height: 2em;
font-size: 0.9em;
}
.navbar-custom-dropdown li a:hover,
.navbar-custom-dropdown li a:focus {
background-color: #ffffff;
color: #DA3D0D;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
<a class="navbar-brand" href="index.html">
<img src="images/logo-briones-monolithic.svg" alt="Briones Monolithic">
</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse navbar-custom-link" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">INICIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PROYECTOS</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
GRUPO MONOLITHIC
</a>
<ul class="dropdown-menu navbar-custom-dropdown" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">BRIONES MONOLITHIC</a></li>
<li><a class="dropdown-item" href="#">BE MONOLITHIC</a></li>
<li><a class="dropdown-item" href="#">ELECTRIC MONOLITHIC</a></li>
<li><a class="dropdown-item" href="#">GRUPO MONOLITHIC</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACTO</a>
</li>
</ul>
</div>
</nav>
<!-- /NAVBAR -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
i´m trying to add more content under the navbar, but every time i try the navbar overlap the next items, I want fixed to always keep it in sight on the website.
I tried also with the z-index, its not the issue.
I don't know if is something of the bootstrap pre installed stuff but it's driving me crazy.
/* roots and body stuff */
body {
font-family: "Roboto", sans-serif;
color: #1a1818;
}
/* nav bar stuff */
.logo-and-section-container {
width: 100%;
display: flex;
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 2rem;
padding-right: 2rem;
position: fixed;
}
.navbar-logo-container {
width: 5%;
}
.brand-logo {
width: 80px;
padding-right: 2em;
display: flex;
justify-content: center;
align-items: center;
}
.union-logo-img {
width: 100%;
}
.union-logo-text-for-media-query {
font-size: 0;
}
.section-container {
display: flex;
align-items: center;
margin-left: 40px;
}
.dropdown {
font-size: 1.2rem;
margin-right: 8px;
}
.fa-arrow-right {
font-size: 0.8rem;
margin-right: 2em;
margin-left: 0.3em;
}
.secion-dropdown,
.fa-arrow-right {
color: #1a1818;
text-decoration: none;
transition: all 0.3s ease-out;
}
.secion-dropdown:hover {
text-decoration: none;
color: #e14f17;
}
.secion-dropdown:hover>.fa-arrow-right {
transform: rotate(90deg);
color: #e14f17;
}
.search-bar-container {
width: 45%;
padding-left: 1%;
display: flex;
justify-content: flex-end;
}
.search-bar {
align-self: center;
}
.search-button,
.btn-outline-success {
color: black;
border: 1px solid #ced4da;
border-radius: 0.25rem;
}
.search-button:hover,
.btn-outline-success:hover {
color: #fff;
background-color: #e14f17;
border-color: #e14f17;
}
#media (max-width: 916px) {
.search-bar-container {
visibility: hidden;
padding-left: 1000000px;
}
.logo-and-section-container {
padding-top: 3rem;
padding-bottom: 0;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.union-logo-img {
width: 10rem;
margin-right: 2em;
margin-bottom: 16px;
}
.navbar-logo-container {
flex-direction: column;
text-decoration: none;
padding-bottom: 1.75rem;
}
.union-logo-text-for-media-query {
font-size: 2rem;
font-weight: 700;
color: #1a1818;
display: flex;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
.section-container {
text-align: center;
padding-right: 7%;
}
.fa-arrow-right {
padding-left: 15px;
}
}
/* nav bar stuff ends */
.division-bar {
width: 80%;
height: 2em;
background: purple;
}
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link rel="stylesheet" href="/union project/style.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/fa5117c01c.js" crossorigin="anonymous"></script>
<link rel="icon" href="img/Union-U-Orange.png" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" />
<title>UNION BINDINGS CO.</title>
</head>
<body>
<!-- nav bar and hearder -->
<div class="logo-and-section-container">
<nav class="navbar-logo-container">
<a class="brand-logo" href="#">
<img src="/union project/img/Union-U-Orange.png" alt="union logo orange" class="union-logo-img" />
<p class="union-logo-text-for-media-query">UNION BINDINGS CO.</p>
</a>
</nav>
<div class="section-container">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">All mountain</a>
<a class="dropdown-item" href="#">Freestyle</a>
<a class="dropdown-item" href="#">Splitboarding</a>
</div>
</div>
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Technology<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">100% Focus</a>
<a class="dropdown-item" href="#">Forged Carbon</a>
<a class="dropdown-item" href="#">Jet Fusion Printing</a>
<a class="dropdown-item" href="#">Union Specific Technology</a>
</div>
</div>
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">International Team</a>
<a class="dropdown-item" href="#">Team Movie</a>
</div>
</div>
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Support<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Size Chart</a>
<a class="dropdown-item" href="#">Disk Fit</a>
<a class="dropdown-item" href="#">How to Set up Your Bindings</a>
</div>
</div>
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Local Shops</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Distributors</a>
</div>
</div>
</div>
<div class="search-bar-container">
<nav class="search-bar">
<form class="form-inline">
<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 search-button" type="submit">
Search
</button>
</form>
</nav>
</div>
</div>
<!-- nav bar and hearder ends -->
<div class="division-bar"></div>
</body>
</html>
Replace your body with the below code.
body {
font-family: "Roboto", sans-serif;
padding-top: 80px;
}
.brand-logo {
width: 80px;
padding-right: 2em;
display: flex;
justify-content: center;
align-items: center;
}
.union-logo-img {
width: 100%;
}
.dropdown {
font-size: 1.2rem;
margin-right: 8px;
}
.fa-arrow-right {
font-size: 0.8rem;
margin-right: 2em;
margin-left: 0.3em;
}
.secion-dropdown,
.fa-arrow-right {
color: #1a1818;
text-decoration: none;
transition: all 0.3s ease-out;
}
.secion-dropdown:hover {
text-decoration: none;
color: #e14f17;
}
.secion-dropdown:hover>.fa-arrow-right {
transform: rotate(90deg);
color: #e14f17;
}
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link rel="stylesheet" href="/union project/style.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/fa5117c01c.js" crossorigin="anonymous"></script>
<link rel="icon" href="img/Union-U-Orange.png" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" />
<title>UNION BINDINGS CO.</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img src="/union project/img/Union-U-Orange.png" alt="Logo" class="union-logo-img" /></a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">All mountain</a>
<a class="dropdown-item" href="#">Freestyle</a>
<a class="dropdown-item" href="#">Splitboarding</a>
</div>
</div>
</li>
<li class="nav-item active">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Technology<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">100% Focus</a>
<a class="dropdown-item" href="#">Forged Carbon</a>
<a class="dropdown-item" href="#">Jet Fusion Printing</a>
<a class="dropdown-item" href="#">Union Specific Technology</a>
</div>
</div>
</li>
<li class="nav-item active">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">International Team</a>
<a class="dropdown-item" href="#">Team Movie</a>
</div>
</div>
</li>
<li class="nav-item active">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Support<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Size Chart</a>
<a class="dropdown-item" href="#">Disk Fit</a>
<a class="dropdown-item" href="#">How to Set up Your Bindings</a>
</div>
</div>
</li>
<li class="nav-item active">
<div class="dropdown">
<a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact<i class="fas fa-arrow-right"></i
></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Local Shops</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Distributors</a>
</div>
</div>
</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>
</body>
I have used Bootstrap Navbar toggle with responsive behaviors, with the logo shown on the left and toggler on the right by adding class navbar-expand-lg to the <nav> tag. Also added class fixed-top for fixed navbar. To change the color of navbar refer color schemes.
Most importantly solution for the issue regarding the overlapping of content by the navbar, there needs to be some padding-top for body, which then works perfectly.
See this demo to ensure it is working.
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.