Making menu icon moveless and full width dropdown menu in bootstrap 4 - javascript

I have 2 big problems and I don't know how to fix them!
This is my code :
#font-face {
font-family: 'yekani';
src: url("../fonts/yekan.ttf");
}
#font-face {
font-family: 'yekani';
src: url("../fonts/yekan.eot");
}
#font-face {
font-family: 'yekani';
src: url("../fonts/yekan.woff");
}
body{
font-family: yekani;
}
.container-fluid{
padding: 0 6rem;
}
.menu{
}
.links a{
font-size: 1.25rem;
color: #333;
}
.menu{
box-shadow: 0 1px 4px 1px #d0d0d0;
}
.logo img{
width: 120px;
}
.btn-outline-primary{
border-width: 2px;
border-color: #cce1e7;
color: #3dacd9;
}
.navbar-nav .nav-link{
padding-left: 2rem !important;
}
.links i{
color: #f5f5f5;
font-size: 1.2rem;
}
.navbar-toggler i{
font-size: 2rem;
}
.navbar .dropdown {position:static;}
.navbar .dropdown-menu {
width:80rem;
left:0;
right:40rem;
/* height of nav-item */
top:5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>مثال بوت استرپ</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid menu">
<div class="d-flex ">
<div class="mr-auto ">
<button class="btn btn-outline-primary btn-lg mb-4 mt-4 pt-2 pb-2 ">
<i class="fas fa-arrow-left"></i>
عضویت : ورود
</button>
</div>
<div class="links ">
<nav class=" navbar navbar-expand-xl mb-4 mt-4">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" >
<i class="fas fa-bars text-dark "></i>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav navbar-light">
<li class="nav-item "><a class="nav-link " href="">ارتباط با ما</a></li>
<i class="fas fa-ellipsis-v m-3"></i>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" >
دوره های مجازی
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" > دوره های مجازی</a>
<a class="dropdown-item" href="#">دوره های مجازی</a>
<a class="dropdown-item" href="#">دوره های مجازی</a>
</div>
</li>
<i class="fas fa-ellipsis-v m-3"></i>
<li class="nav-item "><a class="nav-link" href="">دوره های متخصص</a></li>
<i class="fas fa-ellipsis-v m-3"></i>
<li class="nav-item "><a class="nav-link borderl" href="">محتوا</a></li>
</ul>
</div>
</nav>
</div>
<div class="logo mt-4 mb-4 ml-5 d-none d-xl-block">
<img src="https://s.7learn.com/themes/slt/assets/img/logo.png" alt="">
</div>
</div>
</div>
</body>
</html>
1 is the menu icon! this menu icon moves!is Unbelievable.i cant make my menu icon motionless!
and 2 is i want my drop down full width and i try and i think my codes are right for a full width drop down but its not working and the scope breaks!to right!
something important is :
if you change my code pls tell me what you did.
tanks a lot and sorry about grammatical problems!
im iranian and im not very good in english


Change your structure like this. Keep your left button inside the navbar instead of outside it. Use the bootstrap's navbar-brand class for it.
#font-face {
font-family: 'yekani';
src: url("../fonts/yekan.ttf");
}
#font-face {
font-family: 'yekani';
src: url("../fonts/yekan.eot");
}
#font-face {
font-family: 'yekani';
src: url("../fonts/yekan.woff");
}
body {
font-family: yekani;
}
.container-fluid {
padding: 0 6rem;
}
.menu {}
.links a {
font-size: 1.25rem;
color: #333;
}
.menu {
box-shadow: 0 1px 4px 1px #d0d0d0;
}
.logo img {
width: 120px;
}
.btn-outline-primary {
border-width: 2px;
border-color: #cce1e7;
color: #3dacd9;
}
.navbar-nav .nav-link {
padding-left: 2rem !important;
}
.links i {
color: #f5f5f5;
font-size: 1.2rem;
}
.navbar-toggler i {
font-size: 2rem;
}
.navbar .dropdown {
position: static;
}
.navbar .dropdown-menu {
width: 80rem;
left: 0;
right: 40rem;
/* height of nav-item */
top: 5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>مثال بوت استرپ</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid menu">
<div class="links ">
<nav class=" navbar navbar-expand-xl mb-4 mt-4">
<button class="btn btn-outline-primary btn-lg mb-4 mt-4 pt-2 pb-2 navbar-brand ">
<i class="fas fa-arrow-left"></i>
عضویت : ورود
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<i class="fas fa-bars text-dark "></i>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav navbar-light">
<li class="nav-item "><a class="nav-link " href="">ارتباط با ما</a></li>
<i class="fas fa-ellipsis-v m-3"></i>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
دوره های مجازی
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> دوره های مجازی</a>
<a class="dropdown-item" href="#">دوره های مجازی</a>
<a class="dropdown-item" href="#">دوره های مجازی</a>
</div>
</li>
<i class="fas fa-ellipsis-v m-3"></i>
<li class="nav-item "><a class="nav-link" href="">دوره های متخصص</a></li>
<i class="fas fa-ellipsis-v m-3"></i>
<li class="nav-item "><a class="nav-link borderl" href="">محتوا</a></li>
</ul>
</div>
</nav>
</div>
<div class="logo mt-4 mb-4 ml-5 d-none d-xl-block">
<img src="https://s.7learn.com/themes/slt/assets/img/logo.png" alt="">
</div>
</div>
</body>
</html>

Related

Bootstrap: "img-fluid" class not working correctly

I am doing Colt Steele web dev course and having a problem with the "Museum of candy project" (I changed it up a bit).
The thing is that I am using a widescreen monitor and whenever I make my window larger there comes a point where the image stops taking 100% of the column even though I have it set to class="img-fluid". I would expect for it to cover the column completely, anything I can do to fix it?
body {
background-color: lightblue;
font-family: Roboto, sans-serif;
}
.navbar-brand {
font-size: 1.7rem;
color: darkblue;
font-weight: 600;
}
.nav-link {
letter-spacing: 1.5px;
font-size: 1.2rem;
transition: font-size .2s;
}
.nav-link:hover {
color: darkblue;
font-size: 1.3rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<nav class="navbar navbar-expand-md ">
<div class="container-fluid">
<a class="navbar-brand" href="#">MUSEUM OF AIRPLANES</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 navbar-dark" ></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TICKETS</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="container-fluid px-0">
<div class="row align-items-center">
<div class="col-md-6">
<h2 class="text-center">MUSEUM OF AIRPLANES</h2>
</div>
<div class="col-md-6"><img class="img-fluid mr-0" src="https://www.heraldweekly.com/wp-content/uploads/2021/10/138756/450px-Short_Skyvan_SC.7_G-BEOL_arrives_at_RIAT_Fairford_12July2018_arp.jpg.pro-cmg.jpg" alt="airplanepicture"></div>
</div>
</section>
<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.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

img-fluid bootstrap class set max-width:100% (of the image). The image dimensions provided in your snippet are 800x548, If the image container is larger than the image width, it wont take the whole space.

In addition to Cédric's answer I would like to add that you can use class w-100 (applies width: 100%;) instead of img-fluid to achieve your expected result.
body {
background-color: lightblue;
font-family: Roboto, sans-serif;
}
.navbar-brand {
font-size: 1.7rem;
color: darkblue;
font-weight: 600;
}
.nav-link {
letter-spacing: 1.5px;
font-size: 1.2rem;
transition: font-size .2s;
}
.nav-link:hover {
color: darkblue;
font-size: 1.3rem;
}
<!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>Museum of airplanes</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="museumofairplanes.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md ">
<div class="container-fluid">
<a class="navbar-brand" href="#">MUSEUM OF AIRPLANES</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 navbar-dark" ></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TICKETS</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="container-fluid px-0">
<div class="row align-items-center">
<div class="col-md-6">
<h2 class="text-center">MUSEUM OF AIRPLANES</h2>
</div>
<div class="col-md-6"><img class="w-100 mr-0" src="https://www.heraldweekly.com/wp-content/uploads/2021/10/138756/450px-Short_Skyvan_SC.7_G-BEOL_arrives_at_RIAT_Fairford_12July2018_arp.jpg.pro-cmg.jpg" alt="airplanepicture"></div>
</div>
</section>
<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.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
</body>
</html>

BOOTSTRAP 5 Head and NAV Divs not extending fully to screen size properly

I am quite new to BOOTSTRAP and web development in general. So I was once again hoping someone could help me as I can't find the solution. I've started making a simple website to practice and it looks fine in my browser size; however, when I switch to mobile my created divs seem to be smaller or not keeping the specified size; this also appears to be in turn, breaking my nav bar while in mobile mode. Any help would be grand!
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<style type="text/css">
#logo-space {
background-color: #0f2471;
width: auto;
height: auto;
}
#logo {
width: 300px;
height: 110px;
padding: 15px;
margin-left: 5rem;
}
#FMS-BTN {
width: 12rem;
position: relative;
top: 2rem;
left: 20rem;
}
#nav-bar{
background-color: #16377e;
height: auto;
}
#nav-bar a{
color: white;
font-weight: bold;
font-size: 20px;
padding: 5px;
position: relative;
top: 5px;
}
.navbar-text{
text-align: right !important;
position: relative;
font-size: 20px;
bottom: 5px;
padding: 5px;
right: 5rem;
}
.nav-move{
position: relative;
left: 5rem;
}
.navbar {
height: 55px !important; /*i assume your navbar size 100px*/
}
</style>
</head>
<body>
<div class=".container-fluid">
<div id="logo-space" class="row">
<div class="col">
<img id="logo" src="img/logo.png" alt="">
</div>
<div class="col">
</div>
<div class="col">
<a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
<img src="" alt="">Head to FMS</a>
</div>
</div>
<div id="nav-area">
<nav id="nav-bar" class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-xs-0">
<li class="nav-item">
<a class="nav-link active nav-move" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">APPEALS</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">FEED</a>
</li>
</ul>
<span class="navbar-text">
<a id="apply-link" class="nav-link" href="#">APPLY NOW</a>
</span>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>

How to I create a centered title on my website with subtitles right justified using navbar

I want to create a title similar to this
.title-bar {
background-color: #48A6B8;
font-style: italic;
margin-bottom: 3%;
color: #fff;
display: flex;
position:relative;
}
.title {
text-align: center;
font-size: 36px;
line-height: 180%;
flex:1 0 auto;
background:rgba(0,0,0,.5)
}
.button{
position:absolute;
right:0;
top:0;
}
<div class="title-bar">
<div class="title">Title</div>
<div class="button">
<button class="buts">Whats Up</button>
</div>
</div>
Found from here:
Navbar with Title in center and buttons to right
and I am using the navbar bootstrap documentation instead.
Found here:
https://getbootstrap.com/docs/4.0/components/navbar/
How do I create a centered title with menu buttons on the right side as well without having it look like this.
I am using the navbar bootstrap documentation because I want the navbar to work for mobile as well. Is it possible to accomplish this using the navbar from bootstrap 4.0?
My current code can be found below:
#import url("https://fonts.googleapis.com/css2?family=Arvo:wght#700&display=swap");
body {
background-color: #e9d4d0;
padding-top: 68px;
}
.navbar {
font-family: "Arvo", serif !important;
background-color: #c8a36d;
}
.nav-item {
padding-left: 8px;
padding-right: 8px;
}
#title {
/* width: 100vw;*/
height: 100vh;
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="mx-auto">
<h2 class="navi">Title</h2>
</div>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Our Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Our Vision</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
and the output of it is:
I am wondering how I can make the Title centered and the About Us/Our Product/Our Vision can still work as buttons

Is that what you want?
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="stylesheet" href="style2.css" />
<style>
#import url("https://fonts.googleapis.com/css2?family=Arvo:wght#700&display=swap");
body {
background-color: #e9d4d0;
}
.navbar {
font-family: "Arvo", serif !important;
background-color: #c8a36d;
}
.nav-item {
padding-left: 8px;
padding-right: 8px;
}
#title {
/* width: 100vw;*/
height: 100vh;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<h2 class="navi m-0 col-8 text-center">Title</h2>
<div class="col-4 text-end">
<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-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Our Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Our Vision</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<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>

Bootstrap 5 navbar background color is not changing on scroll

I am building an angular app in which I am using Bootstrap 5. I created a transparent navbar and I would like to see the background color change from transparent to dark when the page is scrolled. It doesn't work. It still keeps my navbar transparent instead of dark color each time the page is scrolled.
My navbar code:
<nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
<div class="container-fluid">
WorkonPro
<button
type="button"
class="navbar-toggler"
data-bs-target="#navbarNav"
data-bs-toggle="collapse"
arial-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle Navbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mx-auto"></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active item-space" href="#" aria-current="page"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#"> Healthcare </a>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#">Tech</a>
</li>
<li class="nav-item">
<a
href="#"
class="nav-link btn btn-sm item-space grey-button"
style="color: #fff"
role="button"
>Login
</a>
</li>
<li class="nav-item">
<a
href="#"
class="nav-link btn btn-sm item-space green-button"
style="color: #fff"
role="button"
><strong>Create account</strong>
</a>
</li>
</ul>
</div>
</div>
</nav>
The JS script I wrote with the aim to achieve this. (Please note that I wrote the same body of my html page)
<script src="../../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
var nav = document.querySelector('nav');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 100) {
nav.classList.add('bg-dark', 'shadow');
} else {
nav.classList.remove('bg-dark', 'shadow');
}
});
</script>
My style which has to do with the navbar is below:
.bg-dark {
background-color: #101011 !important;
}
.navbar-dark .navbar-brand {
padding: 20px 0 10px 10px;
color: #fff;
}
.navbar-nav .nav-link {
color: #101011;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 1);
}
.navbar-dark .navbar-brand {
margin: 0;
width: 50%;
float: left;
display: inherit;
}
.navbar-brand {
color: #101011;
padding: 20px 0 10px 10px;
}
body .navbar {
padding: 6px 0 !important;
}
body .navbar-brand {
background: none;
}
Please can someone tell me what I am doing wrong? What did I miss? And how I can fix it.
Thanks in advance.

Your code work fine for me.. Plz check the length of your body.. body height>100vh + 100px is required to run your js because of the condition given
this is exacty your code but it work for me well.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.bg-dark {
background-color: #101011 !important;
}
.navbar-dark .navbar-brand {
padding: 20px 0 10px 10px;
color: #fff;
}
.navbar-nav .nav-link {
color: #101011;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 1);
}
.navbar-dark .navbar-brand {
margin: 0;
width: 50%;
float: left;
display: inherit;
}
.navbar-brand {
color: #101011;
padding: 20px 0 10px 10px;
}
body .navbar {
padding: 6px 0 !important;
}
body .navbar-brand {
background: none;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body style=height:120vh class="bg-info">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
<div class="container-fluid">
WorkonPro
<button
type="button"
class="navbar-toggler"
data-bs-target="#navbarNav"
data-bs-toggle="collapse"
arial-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle Navbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mx-auto"></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active item-space" href="#" aria-current="page"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#"> Healthcare </a>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#">Tech</a>
</li>
<li class="nav-item">
<a
href="#"
class="nav-link btn btn-sm item-space grey-button"
style="color: #fff"
role="button"
>Login
</a>
</li>
<li class="nav-item">
<a
href="#"
class="nav-link btn btn-sm item-space green-button"
style="color: #fff"
role="button"
><strong>Create account</strong>
</a>
</li>
</ul>
</div>
</div>
</nav>
<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>
<!-- <script src="js/jquery-3.6.0.min.js" charset="utf-8"></script> -->
<script>
var nav = document.querySelector('nav');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 100) {
nav.classList.add('bg-dark', 'shadow');
} else {
nav.classList.remove('bg-dark', 'shadow');
}
});
</script>
copy this and paste

Just give your navbar an id and type this code it works for me so far
// Changing nav color
const navbar = document.getElementById("navbar");
window.onscroll = (e) => {
if (window.scrollY > 100) {
navbar.classList.replace("navbartransparent", "navbarcolored");
} else {
navbar.classList.replace("navbarcolored", "navbartransparent");
}};

Javascript Botton navigation is overlapping side nav

I have a navigation bar which is located at the bottom of the screen. on the bottom navigation I have a button called Add, once clicked it will open a modal. I had to use the Z-index style so that when the modal is open It's not possible to open the Top navigation menu.
I'm trying to figure out how to stop the Bottom navigation overlapping the Top navigation side menu once it is active.
// Materialize Initialization Nav Drop Down.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', function() {
let elems = document.querySelectorAll('.modal');
let instances = M.Modal.init(elems);
});
.nav-padding{
margin-top: 60px;
}
nav {
position: fixed;
z-index: 1001;
}
.trashbin {
padding-right: 30px !important;
padding-left: 30px !important;
}
/* */
body {
margin: 0 0 55px 0;
}
.bottom_nav {
position: fixed;
bottom: 0;
width: 100%;
height: 55px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
display: flex;
overflow-x: auto;
z-index: 1002;
}
.nav__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
min-width: 50px;
overflow: hidden;
white-space: nowrap;
font-family: sans-serif;
font-size: 13px;
color: #444444;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.1s ease-in-out;
}
.nav__link:hover {
background-color: #eeeeee;
}
.nav__link--active {
color: #009578;
}
.nav__icon {
font-size: 18px;
}
<!-- Google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<nav class="nav-wraper black">
<ul>
<li class="right"><a href="#" class="white-text">Sign In
</a>
</li>
</ul>
<!-- Side Navagation -->
<ul id="slide-out" class="sidenav">
<li>
<li><a><i class="material-icons">fitness_center</i>
<p class="">Templates</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Bill</p>
</a></li>
<li></li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>&</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect ">
<p>Ben</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>The</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Flower​Pot</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Men</p>
</a></li>
<li>
<div class="divider"></div>
</li>
</ul>
<i class="material-icons">menu</i>
</nav>
<footer class="bottom_nav">
<a href="#" class="nav__link">
<i class="material-icons nav__icon">dashboard</i>
<span class="nav__text">Dashboard</span>
</a>
<a href="#" class="nav__link nav__link--active">
<i class="material-icons nav__icon">person</i>
<span class="nav__text">Profile</span>
</a>
<a href="#add_exercise_column" class="nav__link modal-trigger">
<i class="material-icons nav__icon">add_box</i>
<span class="nav__text">Add</span>
</a>
<div class="modal modal-position" id="add_exercise_column">
<div class="valign-wrapper center-align">
<div class="row">
<form class="col s12 valign-wrapper center-align">
<div class="input-field">
<div class="remove_label">
<label><h6>Add</h6></label>
</div>
<div class="removebtn-padding">
<input id="delete" class="del-exercise-btn modal-close btn black" type="submit" value="Submit">
</div>
</div>
</form>
</div>
</div>
</div>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">lock</i>
<span class="nav__text">Privacy</span>
</a>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">settings</i>
<span class="nav__text">Settings</span>
</a>
</nav>
</footer>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- app.JavaScript -->
<script src="app.js"></script>

Probably just need to change:
z-index: 1002;
to
z-index: 1000;
and move the modal outside of the footer.
// Materialize Initialization Nav Drop Down.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', function() {
let elems = document.querySelectorAll('.modal');
let instances = M.Modal.init(elems);
});
.nav-padding{
margin-top: 60px;
}
nav {
position: fixed;
z-index: 1001;
}
.trashbin {
padding-right: 30px !important;
padding-left: 30px !important;
}
/* */
body {
margin: 0 0 55px 0;
}
.bottom_nav {
position: fixed;
bottom: 0;
width: 100%;
height: 55px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
display: flex;
overflow-x: auto;
z-index: 1000;
}
.nav__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
min-width: 50px;
overflow: hidden;
white-space: nowrap;
font-family: sans-serif;
font-size: 13px;
color: #444444;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.1s ease-in-out;
}
.nav__link:hover {
background-color: #eeeeee;
}
.nav__link--active {
color: #009578;
}
.nav__icon {
font-size: 18px;
}
<!-- Google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<nav class="nav-wraper black">
<ul>
<li class="right"><a href="#" class="white-text">Sign In
</a>
</li>
</ul>
<!-- Side Navagation -->
<ul id="slide-out" class="sidenav">
<li>
<li><a><i class="material-icons">fitness_center</i>
<p class="">Templates</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Bill</p>
</a></li>
<li></li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>&</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect ">
<p>Ben</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>The</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Flower​Pot</p>
</a></li>
<li>
<div class="divider"></div>
</li>
<i class="material-icons black-text">delete</i>
<li><a href="#!" class="waves-effect">
<p>Men</p>
</a></li>
<li>
<div class="divider"></div>
</li>
</ul>
<i class="material-icons">menu</i>
</nav>
<footer class="bottom_nav">
<a href="#" class="nav__link">
<i class="material-icons nav__icon">dashboard</i>
<span class="nav__text">Dashboard</span>
</a>
<a href="#" class="nav__link nav__link--active">
<i class="material-icons nav__icon">person</i>
<span class="nav__text">Profile</span>
</a>
<a href="#add_exercise_column" class="nav__link modal-trigger">
<i class="material-icons nav__icon">add_box</i>
<span class="nav__text">Add</span>
</a>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">lock</i>
<span class="nav__text">Privacy</span>
</a>
<a href="#" class="nav__link">
<i class="material-icons nav__icon">settings</i>
<span class="nav__text">Settings</span>
</a>
</nav>
</footer>
<div class="modal modal-position" id="add_exercise_column">
<div class="valign-wrapper center-align">
<div class="row">
<form class="col s12 valign-wrapper center-align">
<div class="input-field">
<div class="remove_label">
<label><h6>Add</h6></label>
</div>
<div class="removebtn-padding">
<input id="delete" class="del-exercise-btn modal-close btn black" type="submit" value="Submit">
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- app.JavaScript -->
<script src="app.js"></script>

Categories

Resources