#import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght#400;500;600;700&display=swap');
:root {
--color-body: #b6cbce;
--color-heading: #eef3db;
--color-base: #033f47;
--color-base2: #022a30;
--color-brand: #e0f780;
--color-brand2: #deff58;
--sidbar-width: 240px;
--font-base: "Bai Jamjuree";
}
*{
background-color: var(--color-base2);
color: var(--color-base);
font-family: var(--font-base);
}
.navbar .nav-link {
font-weight: 700;
text-transform: uppercase;
color: white;
transition:all 0.5s ease-in;
}
.navbar .nav-link:hover{
color: var(--color-brand);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-heading);
color: aliceblue;
font-weight: 700;
}
a {
text-decoration: none;
color: var(--color-body);
transition: all 0.5s ease;
}
a:hover {
color: var(--color-brand);
}
img {
width: 100%;
}
h3 {
color: white;
}
#media (min-width:992px) {
.navbar {
min-height: 100vh;
width: 240px;
background: linear-gradient(rgba(3, 63, 71, 0.623), rgba(3, 63, 71, 0.853)), url(./sidebar-img.jpg);
background-size: cover;
background-position: center;
}
.navbar img{
border: 8px solid var(--color-brand);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
</head>
<body>
<!-- Navigation bar start -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container flex-lg-column">
<a class="navbar-brand mx-lg-auto mb-lg-4" href="#"><span class="h3 text-white fw-bold d-block d-none">Shuvo Raj</span>
<img src="./person.jpg" class="d-none d-lg-block rounded-circle" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto flex-lg-column text-lg-center">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- navigation bar close -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"></script>
</body>
</html>
navbar color can't vanish or be transparent because it is linked to body color, how to solve it? I'm practicing some projects with some youtube tutorials. and I got an error or I can't do like same as a developer?
I'm doing this project with html/css/bootstap5
This is a Problem!!`
i Want to do as like it
Html Code
``
There is multiple approaches to this, on the css for *{…} you can use *:not(.navbar){…
Or you can use !important at the end of background such as:
background-color:#33b5e5 !important;
Related
guys I am making a navbar using bootstrap-5 and I want to adjust colors for some items like navbar and, tags, navbar background, and burger menu colors I tried first with tags but it is not working I will show you the code for both HTML and CSS.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700;900&display=swap');
html {
font-size: 90%;
overflow-x: hidden;
scroll-padding: 9rem;
scroll-behavior: smooth;
max-width: 1650px;
margin: 0 auto;
}
html body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: 0.2s linear;
}
a {
text-decoration: none;
color: rgba(24, 129, 210, 0.7);
font-weight: 500;
}
<!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" />
<link rel="stylesheet" href="/style1.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="shortcut icon" href="./images/titleiconw.png" sizes="32*32" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<title>Corporate Solutions</title>
</head>
<body>
<header class="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><span>C</span> Solutions</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarNav">
<ul class="navbar-nav m-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">why choose us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">our clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<button class="btn">request a quote</button>
</ul>
</div>
</div>
</nav>
</header>
<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>
i want to change a tags color,navbar background color,burger menu color and navbrand color can anyone help me, please.
thank you so much
Added Font awesome because easy to change hamburger icon color:
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
Added new class to nav and remove the old ones:
<nav class="navbar navbar-expand-lg custom-nav">
Add new hamburger icon instead of navbar-toggler-icon
<span>
<i class="fas fa-bars"></i>
</span>
Add new css:
.custom-nav {
background-color: aqua;
}
.custom-nav ul a {
color: rgb(19, 106, 213);
}
.hamburger {
font-size: 28px;
color: rgb(19, 106, 213);
}
You can try with "!important"
a {
text-decoration: none !important;
color: rgba(24, 129, 210, 0.7) !important;
font-weight: 500 !important;
}
or you can try placing your css under the bootstrap
<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="/style1.css" />
I am trying to build a website with a collapsing navbar.
The button has the correct id.
Jquery and bootstrap are included in the correct order at the bottom of the body.
However when I press the button, nothing happens.
I added additional CSS code to customize my navigation bar. But the navigation bar won't work without the CSS code either, so I'm relatively sure it's not because of that.
Html:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Navbar test </title>
<link href="../img/faviconlogo.png" rel="shortcut icon" type="image/x-icon">
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbarnavbar-default navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="index.php">
<img src="../img/logo.png" alt="" height="40" id="brand-icon-navbar" class="justify-content-center">
</a>
<button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#collapseNav" aria-expanded="false" aria-controls="collapseNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapseNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Site 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Site 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Site 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Site 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Site 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Site 6</a>
</li>
</ul>
</div>
</div>
</div>
<script src="../js/someJavaScript.js"></script>
<script class="script" type="text/javascript" src="../js/jquery.js" defer=""></script>
<script src="../vendor/bootstrap/js/bootstrap.js"></script>
</body>
css:
.navbar-brand {
font-weight: 600;
}
#brand-icon-navbar{
vertical-align: -webkit-baseline-middle;
}
.navbar-dark .navbar-nav a {
display: block;
color: white !important;
font-size: 1em;
font-weight: lighter;
text-decoration: none;
margin-right: 1em;
}
.nav-item{
margin: auto 0;
margin-left: 1rem;
}
#media (max-width: 840px){
.navbar .container{
position: absolute;
left: 0;
right: 0;
max-width: 95%;
margin: auto;
}
}
#media (min-width: 840px){
.navbar .container{
max-width: 1000px;
}
}
#media(max-width:835px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
.navbar .navbar-brand {float:none;display: inline-block;}
.navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
.navbar .navbar-nav {float:none !important;}
.nav-item{width:100%;text-align:left;}
.navbar-toggler {display: block !important;}
.navbar-toggleable-sm.collapse {display:none !important}
.navbar-toggleable-sm.collapse.in {display:block !important}
}
#media (min-width: 768px){
.navbar-expand-md .navbar-collapse {
justify-content: space-around;
}
}
Libraries:
jQuery v3.5.1
Bootstrap v4.3.1
CodePen
Replace
<script class="script" type="text/javascript" src="../js/jquery.js" defer=""></script>
with
<script src="../js/jquery.js"></script>
I think there is a problem with importing js. Try the 3rd row from below,
as, <script src="../js/jquery.js"></script>
I'm trying to put a navbar with a navbar-brand to my website. There is a problem, it looks like my picture prevent my nav-items to go on the top of the window. Here is a picture of the problem :
When I remove the navbar-brand, the items are going at the top (you can try it with my code below).
Here is my code :
.logo_1 {
width:9%;
height: auto;
}
.logo_nom {
width: 14%;
height: auto;
}
.nav {
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
.navbar-custom {
background-color: #fafafc;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #369d4a !important;
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: #369d4a !important;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #2b5c35 !important;
}
.navbar-custom .navbar-brand {
color:#369d4a;
}
.navbar-custom .navbar-toggle {
background-color:#369d4a;
}
.navbar-custom .icon-bar {
background-color:#369d4a;
}
#media (max-width: 1250px) {
.nav-item:hover {
background-color: #5eb56f;
}
}
.dropdown-item {
color : #369d4a !important;
}
.dropdown-item:hover {
background-color: #5eb56f !important;
color: #2b5c35 !important;
}
#media all and (min-width: 992px) {
.nav .nav-item .dropdown-menu{ display: none; }
.nav .nav-item:hover .nav-link{ color: #fff; }
.nav .nav-item:hover .dropdown-menu{ display: block; }
.nav .nav-item .dropdown-menu{ margin-top:0; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="test2.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<!-- Début navbar -->
<nav class="nav navbar-expand-lg navbar-custom navbar-dark" aria-label="Eighth navbar example">
<div class="container">
<div class="row" style="margin: 0; padding: 0;">
<a class="navbar-brand">
<img src="logo_no_text.png" alt="Logo" class="logo_1 img-responsive">
<img src="nom_commerce.png" alt="Logo" class="logo_nom img-responsive">
<button class="navbar-toggler navbar-toggle btn_small_screen float-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto" >
<li class="nav-item">
<a class="nav-link px-3" href="">Test 1</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="">Test 2</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="">Test 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle " data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Test 4 </a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Test 4.1</a>
<a class="dropdown-item" href="#">Test 4.2</a>
<a class="dropdown-item" href="#">Test 4.3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="">Test 5</a>
</li>
</ul>
</div>
</div></div>
</nav>
<!-- Fin navbar -->
<!-- Script -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Add a col-6 div outside your logos.
<div class="col-6">
<a>
<img
src="https://www.logodesign.net/images/illustration-logo.png"
alt="Logo"
class="logo_1 img-responsive"
/>
<img
src="https://www.logodesign.net/images/illustration-logo.png"
alt="Logo"
class="logo_nom img-responsive"
/>
<button
class="navbar-toggler navbar-toggle btn_small_screen float-right"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</a>
</div>
Because there is a margin in the body by default, here is how you fix it:
html, body {
margin:0;
}
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'm having difficulty moving items on my Navbar to either end. At the moment I have this:
I would like to move the flag image next to the toggler button, it is only there when the breakpoint reaches the Navbar button size, 992px.
I'm sure the Bootstrap Stylesheet is aligning it using justify-content: space-between; I have tried using align-self: flex-end !important; on both flag and button as well as using justify-content-end
Codepen - https://codepen.io/jvern22/pen/gZjJBN
My Nav code;
<div class="container container-navbar">
<a class="navbar-brand" href="index.php">Website title</a>
<a class="navbar-brand justify-content-end" href="#"><img src="assets/img/spain.png" class="navbar-flag"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-navbar-1">
<ul class="navbar-nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="?page=taketour"><?php echo $lang['nav_takeatour']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=websites"><?php echo $lang['nav_websites']; ?></a></li>
</ul>
</div>
</div>
</nav>
You can either wrap the flag and the navbar button within a div as shown in this CodePen or in the Code Snippet below:
html {
height:100%;
box-sizing: border-box;
}
body {
min-height:100%;
padding:0;
margin:0;
position:relative;
font: 400 15px "Open Sans", sans-serif;
line-height: 30px;
text-align: center;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.bg-dark {
background: #000 !important;
color: #fff;
}
.bg-dark a {
color: #aaa;
}
.bg-dark a:hover, .bg-dark a:focus {
color: #fff;
}
.navbar-nav>li>a {
line-height: 20px;
padding-right: 12px!important;
padding-left: 12px!important;
padding-top: 10px!important;
padding-bottom: 10px!important;
}
.navbar-flag {
height: 20px;
}
#media (min-width: 992px) and (max-width: 2200px){
.navbar-flag {
display: none;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-no-bg" role="navigation">
<div class="container container-navbar">
<a class="navbar-brand" href="index.php">Website title</a>
<div>
<a class="navbar-brand justify-content-end" href="#"><img src="
https://i.imgur.com/TXhhmGb.png" class="navbar-flag"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-navbar-1">
<ul class="navbar-nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="?page=taketour"><?php echo $lang['nav_takeatour']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=websites"><?php echo $lang['nav_websites']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=rates"><?php echo $lang['nav_rates']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=contactus"><?php echo $lang['nav_contact']; ?></a></li>
</ul>
</div>
</div>
</nav>
Or you can just change the justify-content property of the parent div from space-between to flex-end and add a margin-right: auto to the first navbar-brand as shown in this CodePen or in the Code Snippet below:
html {
height:100%;
box-sizing: border-box;
}
body {
min-height:100%;
padding:0;
margin:0;
position:relative;
font: 400 15px "Open Sans", sans-serif;
line-height: 30px;
text-align: center;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
a.navbar-brand:first-child {
margin-right: auto;
}
.bg-dark {
background: #000 !important;
color: #fff;
}
.bg-dark a {
color: #aaa;
}
.bg-dark a:hover, .bg-dark a:focus {
color: #fff;
}
.navbar-nav>li>a {
line-height: 20px;
padding-right: 12px!important;
padding-left: 12px!important;
padding-top: 10px!important;
padding-bottom: 10px!important;
}
.navbar-flag {
height: 20px;
}
#media (min-width: 992px) and (max-width: 2200px){
.navbar-flag {
display: none;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-no-bg" role="navigation">
<div class="container container-navbar">
<a class="navbar-brand" href="index.php">Website title</a>
<a class="navbar-brand justify-content-end" href="#"><img src="
https://i.imgur.com/TXhhmGb.png" class="navbar-flag"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-navbar-1">
<ul class="navbar-nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="?page=taketour"><?php echo $lang['nav_takeatour']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=websites"><?php echo $lang['nav_websites']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=rates"><?php echo $lang['nav_rates']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=contactus"><?php echo $lang['nav_contact']; ?></a></li>
</ul>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
The easiest solution here is to just expand the first flex item so that it pushes all the other items to the right. This can be easily done by adding the following to your css:
.navbar-brand:first {
flex-grow: 1;
}