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.
Related
I have a dropdown in Navbar at right side, when I click on it, its menus are opening far right even not visible until I scroll horizontally.
This is my code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div style="margin-bottom: 0px;" class="navbar-header justify-content-start">
<a class="navbar-brand" href="#">
<img width="100" src="assets/Acc_logo.png" alt="logo">
</a>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"
aria-haspopup="true" id="dropdownMenuButton" aria-expanded="false">
<div class="divIcom"></div>
<div class="divIcom"></div>
<div class="divIcom"></div>
</button>
<ul class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</ul>
</div>
</div>
</nav>
also some css added
li {
list-style-type: none;
}
.divIcom {
width: 30px;
height: 3px;
background-color: gray;
margin: 6px 0;
}
.dropdown-toggle::after {
display:none;
}
Styles I am using in angular.json
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/bootstrap-icons/font/bootstrap-icons.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"./node_modules/chart.js/dist/Chart.min.js"
]
},
Edit 1 -
zone.js:1711 Uncaught TypeError: i.createPopper is not a function
at Mt._createPopper (node_modules\bootstrap\dist\js\bootstrap.min.js:6:23961)
at Mt.show (node_modules\bootstrap\dist\js\bootstrap.min.js:6:22277)
at Mt.toggle (node_modules\bootstrap\dist\js\bootstrap.min.js:6:22073)
at HTMLButtonElement.<anonymous> (node_modules\bootstrap\dist\js\bootstrap.min.js:6:26705)
at HTMLDocument.s (node_modules\bootstrap\dist\js\bootstrap.min.js:6:4456)
at _ZoneDelegate.invokeTask (zone.js:406:31)
at Zone.runTask (zone.js:178:47)
at ZoneTask.invokeTask [as invoke] (zone.js:487:34)
at invokeTask (zone.js:1661:18)
at globalCallback (zone.js:1704:33)
How can I fix it ?
Adding dropdown-menu-sm-end seems to work fine for 5.2:
li {
list-style-type: none;
}
.divIcom {
width: 30px;
height: 3px;
background-color: gray;
margin: 6px 0;
}
.dropdown-toggle::after {
display: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>li {
list-style-type: none;
}
.divIcom {
width: 30px;
height: 3px;
background-color: gray;
margin: 6px 0;
}
.dropdown-toggle::after {
display: none;
}</style>
<h1>Hello, world!</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div style="margin-bottom: 0px;" class="navbar-header justify-content-start">
<a class="navbar-brand" href="#">
<img width="100" src="assets/Acc_logo.png" alt="logo">
</a>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" id="dropdownMenuButton" aria-expanded="false">
<div class="divIcom"></div>
<div class="divIcom"></div>
<div class="divIcom"></div>
</button>
<ul class="dropdown-menu dropdown-menu-sm-end" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
edit
try removing extra code, it's probably causing conflicts, leave only bundle (maybe remove jquery also if you're not using it elsewhere), try this::
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"./node_modules/chart.js/dist/Chart.min.js"
]
change this dropdown-menu-sm-right
to dropdown-menu-right dropdown-menu-sm-left
In the picture below you can see that my Skills text is in the section where it is not supposed to be which is the home-section
In the above picture, you can see that Skills has appeared in the section of the home. Note that I used Bootstrap row to style my content
Below is the html code ------- <-- I added bootstrap -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<script
src="https://kit.fontawesome.com/29ea37403a.js"
crossorigin="anonymous"
></script>
</head>
<body>
<section id="home-section">
<nav class="navbar navbar-expand-lg navbar-light">
<h1 class="navbar-brand">ᔕᗩᗰᑌᗴᒪ</h1>
<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">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="home-contect">
<h1 class="home-title">I have software development experience</h1>
<h5 class="home-description">
Hi! I'm a software developer - Developing elegant mobile sofwares
for companies all over the world
</h5>
<div class="button-con">
<button
type="button"
class="home-button btn btn-lg btn-warning download-button"
>
Let's Talk <i class="fa-solid fa-paper-plane"></i>
</button>
<button
type="button"
class="home-button btn btn-lg btn-outline-warning download-button">
Resume <i class="fa-solid fa-arrow-down"></i>
</button>
</div>
<div class="links">
<h6>Check Out My
<div class="home-icon-container" id="github"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-linkedin-in"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-twitter"></i> </div>
</h6>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<img
class="personal-photo"
src="assets/portfolio-image.png"
alt="A picture of me"
/>
</div>
</div>
</section>
<section title="skill-section">
<h1>Skills</h1>
</section>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
Below is my css styling
/* Home Section */
#home-section{
padding-left: 10%;
padding-right: 10%;
}
h1{
text-align: left;
font-size: xxx-large;
}
.personal-photo{
position: absolute;
margin-left: 11%;
}
.btn{
margin-top: 15px;
}
.home-description{
text-align: left;
padding: 2% 0;
}
.home-button{
margin-right: 4px;
}
.home-icon{
color: black;
}
.home-icon-container#github{
margin-left: 20px;
}
.home-icon-container{
margin-top: 15px;
margin-right: 13px;
padding: 11px;
border-radius: 100%;
background-color: #dcedc8;
display: inline-block;
}
/* skill-section */
#skill-section{
background-color: gold;
padding: 5% 10%;
}
/* media-queries */
#media (min-width: 500){
.personal-photo{
width: 0px;
}
}
#media (max-width: 768px){
h1.home-title{
text-align: center;
}
.home-description{
text-align: center;
}
.button-con{
text-align: center;
}
.links{
text-align: center;
}
.personal-photo{
width: 50%;
}
}
The image has a display property of 'absolute'. MDN.
It may need more of a margin to avoid covering up the text, but you're probably better off using a different way to position the image instead of using absolute.
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.
I tried to center my search field using code below.
But the search field is not very responsive because when in mobile it stays right on top with footer unlike on desktop. I want it to have a gap between footer.
This issue only displays on small screen mode.
Any input would be appreciated. I hope you all have a great weekend!
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
section {
padding: 70px 0;
border-bottom: 1px dotted #ccc;
}
.grid-example div[class^="col"] {
border: 1px solid white;
background: lightblue;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.jumbotron {
background-color: lightskyblue;
}
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}
.table td {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #0275D8;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 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="Sticky Footer.css">
</head>
<body>
<nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
<a class="navbar-brand" href="#">Navbar</a>
<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 active">
<a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test
</a>
<div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<div class="col-sm-4">
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-8">Hello, world!</h1>
<p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
</p>
</div>
<div class="row align-items-center" style="min-height: calc(100vh - 500px);">
<div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
<div class="input-group-prepend">
<input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
<span class="input-group-btn">
<button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
</span>
</div>
</div>
</div>
<footer class="footer fixed-bottom text-center">
<span class="text">Place sticky footer content here.</span>
</footer>
<!-- jQuery Version 1.11.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I didn't understand what you really want but I have tried it little bit.I think padding-bottom: 100px; will solve your problem.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
padding-bottom: 100px;
}
section {
padding: 70px 0;
border-bottom: 1px dotted #ccc;
}
.grid-example div[class^="col"] {
border: 1px solid white;
background: lightblue;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.jumbotron {
background-color: lightskyblue;
}
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}
.table td {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #0275D8;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 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="Sticky Footer.css">
</head>
<body>
<nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
<a class="navbar-brand" href="#">Navbar</a>
<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 active">
<a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test
</a>
<div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<div class="col-sm-4">
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-8">Hello, world!</h1>
<p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
</p>
</div>
<div class="row align-items-center" style="min-height: calc(100vh - 500px);">
<div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
<div class="input-group-prepend">
<input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
<span class="input-group-btn">
<button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
</span>
</div>
</div>
</div>
<footer class="footer fixed-bottom text-center">
<span class="text">Place sticky footer content here.</span>
</footer>
<!-- jQuery Version 1.11.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
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/