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>
Related
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.
My navbar is not showing at the top. I have used my bootstrap-css file and custom scss file. I am attaching the screenshot.
Also, I wanted to know if the overlay div present here is important or not.
I want it to look like this, and my current page looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./CSS/style.css">
<title>Aurora Grove</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark ">
<a class="navbar-brand" href="#"><h3 class="mb-0">Aurora Grove</h3></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MainNav" aria-controls="MainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MainNav">
<ul class="navbar-nav ml-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="#">About</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Explore</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book</a>
</li>
</ul>
</div>
</nav>
<section id="showcase" class="d-flex justify-content-center align-items-center">
<div id="overlay"></div>
<div class="container text-center text-white " id="header">
<h3 class="display-5">mordern camping</h3>
<h1 class="display-1">Aurora Grove</h1>
<p class="lead d-none d-md-block">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores?</p>
<button id="book" class="btn btn-primary px-5">Book Now</button>
</div>
</section>
<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>
scss file
body{
background-color: #d460bb;
font-family: "Raleway",sans-serif;
}
.navbar{
font-weight: 100;
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
.navbar-brand h3{
font-weight: 100;
}
.nav-item{
font-size: 1.4rem;
}
.nav-link:hover{
transition: border 0.2s;
border-bottom: 1px solid white;
}
}
// showcasase
#showcase{
background: url('../images/main.jpeg') bottom center no-repeat;
min-height: 30rem;
position: relative;
#header{
z-index: 2;
}
#overlay{
background: rgba($color: #000000, $alpha: 0.2);
position: absolute;
top: 0rem;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
}
h1{
font-family: "Questrial",sans-serif;
line-height: 1;
}
#book{
font-size: 1.5rem;
border-radius: 2rem;
}
}
// phone
#media (max-width:768px){
.navbar{
background: #1f1f1f;
.nav-link:hover{
border-bottom: none;
}
}
// showcase
#showcase{
min-height: 500px;
h1{
font-size: 4rem;
}
}
}
Thanks.
It was mainly due to the height:100%.
body {
font-family: "Raleway", sans-serif;
}
.navbar {
font-weight: 100;
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100%;
z-index: 3;
}
.navbar-brand h3 {
font-weight: 100;
}
.nav-item {
font-size: 1.4rem;
}
.nav-link:hover {
transition: border 0.2s;
border-bottom: 1px solid white;
}
#showcase {
background: url("https://images.unsplash.com/photo-1478827536114-da961b7f86d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop")
no-repeat bottom center;
min-height: 30rem;
position: relative;
#header {
z-index: 2;
}
#overlay {
background: #000000;
opacity: 0.2;
position: absolute;
top: 0rem;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
}
h1 {
font-family: "Questrial", sans-serif;
line-height: 1;
}
#book {
font-size: 1.5rem;
border-radius: 2rem;
}
}
// phone
#media (max-width: 768px) {
.navbar {
background: #1f1f1f;
.nav-link:hover {
border-bottom: none;
}
}
// showcase
#showcase {
min-height: 500px;
h1 {
font-size: 4rem;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template</title>
<!-- bootstrap 4.4 -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<a class="navbar-brand" href="#"><h3 class="mb-0">Aurora Grove</h3></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#MainNav"
aria-controls="MainNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MainNav">
<ul class="navbar-nav ml-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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Explore</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book</a>
</li>
</ul>
</div>
</nav>
<section
id="showcase"
class="d-flex justify-content-center align-items-center"
>
<div id="overlay"></div>
<div class="container text-center text-white " id="header">
<h3 class="display-5">mordern camping</h3>
<h1 class="display-1">Aurora Grove</h1>
<p class="lead d-none d-md-block">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores?
</p>
<button id="book" class="btn btn-primary px-5">Book Now</button>
</div>
</section>
<!-- Bootstrap js ,popper js and jquery -->
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
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>
As part of your follow-up question
Also, I wanted to know if the overlay div present here is important or not?
It depends on you if you want to add an overlay effect on certain area not. Generally it is added to make some part closer(more appealing/more focused) to the user
You have mentioned height:100% in the styles for .navbar.
I changed that to height:15vh; and it seems to work fine.
Feel free to play with the value until you find it suitable.
I have navbar which when i click icon move content below and it working perfectly but when i want to change CSS height i'm facing with a problem(drop down just overlapping h3 text instead of moving down).
Here is working fiddle:-
With height( https://jsfiddle.net/kds8pe0L/6/) Working correctly
Witouth height ( https://jsfiddle.net/hkeo7fg9/) Here is mistake
HTML
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Master thesis application</title>
<!-- Jquery -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Import css file-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="https://cdn.jsdelivr.net/npm/lodash#4.17.10/lodash.min.js"></script>
</head>
<script type="text/javascript">
</script>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li>Clients</li>
<li>Charts</li>
</ul>
#if (Sentinel::guest())
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
#endif
#if(!Sentinel::guest())
#if(Sentinel::inRole('admin'))
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Admin Panel <span class="caret"></span> </a>
<ul class="dropdown-menu" role="menu">
<li>Admins List</li>
<li>Users List</li>
</ul>
</li>
</ul>
#endif
#endif
#if(!Sentinel::guest())
#if(Sentinel::inRole('viewer'))
<ul class="nav navbar-nav">
<li> Profile</li>
</ul>
#endif
#endif
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Sentinel::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{Sentinel::getUser()->first_name}} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ URL::to('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ URL::to('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
<h2 class="text-center" >List of clients</h2>
<div class="container">
</div> <!-- /container -->
</body>
</html>
Css
body {
background-image: url("/images/images.jpg");
}
.container {
max-width: 940px;
}
#header{
height: 120px;
background-color: #007ab3;
padding: 20px;
padding-left: 100px;
}
.navbar {
position: relative;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 0;
}
.navbar-inverse{
background-color: #004666;
}
#media (min-width: 768px){
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
}}
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
}
.nav>li>a {
padding: 0px;
padding-left: 10px;
padding-right:10px;
color: white;
padding-top: 3px;
font-weight: 500;
font-size: 1.2em;
}
.navbar-inverse .navbar-nav>li>a {
color: white;
}
.tablica{
float:left;
}
td{
text-align: center;
width: 10%;
}
th{
font-size: 10px;
}
.table {
width: 90%;
}
.navbar-toggle {
position: relative;
float: right;
padding: 5px 5px;
margin-top: 2px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
background-color: #004666;
margin-right: -15px;
margin-left: -15px;
position: relative;
float: none;
}
th{
text-align: center;
}
If you use min-height: 30px; and not height: 30px;, the nav bar will grow as you expect.
https://jsfiddle.net/hkeo7fg9/5/
body {
background-image: url("/images/images.jpg");
}
.container {
max-width: 940px;
}
#header{
height: 120px;
background-color: #007ab3;
padding: 20px;
padding-left: 100px;
}
.navbar {
position: relative;
min-height: 30px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 0;
}
.navbar-inverse{
background-color: #004666;
}
#media (min-width: 768px){
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
}}
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
}
.nav>li>a {
padding: 0px;
padding-left: 10px;
padding-right:10px;
color: white;
padding-top: 3px;
font-weight: 500;
font-size: 1.2em;
}
.navbar-inverse .navbar-nav>li>a {
color: white;
}
.tablica{
float:left;
}
td{
text-align: center;
width: 10%;
}
th{
font-size: 10px;
}
.table {
width: 90%;
}
.navbar-toggle {
position: relative;
float: right;
padding: 5px 5px;
margin-top: 2px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
background-color: #004666;
margin-right: -15px;
margin-left: -15px;
position: relative;
float: none;
}
th{
text-align: center;
}
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Master thesis application</title>
<!-- Jquery -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<!-- 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>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/docs/3.3/examples/jumbotron-narrow/">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- Import css file-->
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="https://cdn.jsdelivr.net/npm/lodash#4.17.10/lodash.min.js"></script>
<!-- Highcharts for normal chart
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
-->
<!-- Highcharts for normal tockSchart -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<script type="text/javascript">
</script>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
#if (!Sentinel::guest())
<ul class="nav navbar-nav">
<li>Clients</li>
<li>Charts</li>
</ul>
#endif
#if (Sentinel::guest())
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
#endif
#if(!Sentinel::guest())
#if(Sentinel::inRole('admin'))
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Admin Panel <span class="caret"></span> </a>
<ul class="dropdown-menu" role="menu">
<li>Admins List</li>
<li>Users List</li>
</ul>
</li>
</ul>
#endif
#endif
#if(!Sentinel::guest())
#if(Sentinel::inRole('viewer'))
<ul class="nav navbar-nav">
<li> Profile</li>
</ul>
#endif
#endif
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Sentinel::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{Sentinel::getUser()->first_name}} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ URL::to('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ URL::to('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
<h2 class="text-center" >List of clients</h2>
<div class="container">
</div> <!-- /container -->
</body>
</html>
You should modify the .navbar-header class if you want to resize the bar.
For example:
.navbar-header {
height: 100px;
}
https://jsfiddle.net/p7mrq5v4/
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/