How could to close and open navbar - javascript

I try to use this navbar, but it doesn't close and open, what script should I add.
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="/">
<img src="/logo.png" alt="image" height="30">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav3">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="http://www.firan.ir">Home<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
Style:
.navbar {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: .5rem 1rem;
}
.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: .25rem;
}


As mentioned in my comment above, your forgot to add the target on which you want the click event to act. Since, in this case, you want data-target to trigger everything wrapped around #navbarNav3 to expand/collapse, you just add data-target="#navbarNav3" to the button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<body>
<nav class="navbar navbar-expand-md bg-light navbar-light">
<!-- Brand -->
<a class="navbar-brand" href="/">
<img src="/logo.png" alt="image" height="30">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation" data-target="#navbarNav3">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="navbarNav3">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="http://www.firan.ir">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</body>

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>

Typewriter making div move on smaller devices

I am facing a problem, on smaller devices the div is moving as the script writes the text, and this is terrible, if I browse the website, the screen is moving. Is the problem with the CSS configuration? I've seen a lot of websites use typewriter and none of that happens, I really don't know how to fix it, I've tried using position but I haven't been successful
Could someone please help me with this? When using the browser developer tool you can see the problem, the screen moves when the script writes
<!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>
<style>
.box section div {
color: rgb(255, 255, 255);
margin: 35px 0px;
}
.section {
width: 100%;
padding: 135px;
height: 100%;
}
.text {
display: flex;
justify-content: space-around;
align-content: center;
}
#app {
font-size: 38px !important;
letter-spacing: 0;
line-height: 34px;
padding-bottom: 24p;
}
#media (max-width:500px) {
.box section div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.box {
display: flex;
flex-direction: column;
justify-content: center;
}
.text {
flex-direction: column;
justify-content: center;
align-content: center;
}
}
.bg-black {
background-color: #000;
}
</style>
</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>
<div class="box bg-black">
<section class="section">
<div>
<div class="text">
<div id="app">
</div>
</div>
</div>
</section>
</div>
<div>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
</div>
<!-- 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>
<script src="https://unpkg.com/typewriter-effect#latest/dist/core.js"></script>
<script>
var app = document.getElementById('app');
var typewriter = new Typewriter(app, {
loop: true,
delay: 75,
});
typewriter
.pauseFor(1500)
.typeString('I am ')
.pauseFor(400)
.typeString('<strong>Developer</strong>')
.pauseFor(1500)
.deleteChars(9)
.typeString('<strong>Designer</strong>')
.pauseFor(1000)
.deleteChars(8)
.typeString('<strong>Sculptor</strong>')
.pauseFor(1000)
.deleteChars(8)
.pauseFor(1000)
.start();
</script>
</body>
</html>

As per my understanding, You gave padding in section class. That's why your div is moving in smaller screens.
Please remove padding from section class Or you can give padding in percentage instead of pixels and remove display: flex from media query.
.section {
width: 100%;
padding: 0;
height: 100%;
}
#media (max-width:500px) {
.box section div {
justify-content: center;
align-items: center;
flex-direction: column;
}
}
Complete example
<!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>
<style>
.box section div {
color: rgb(255, 255, 255);
margin: 35px 0px;
}
.section {
width: 100%;
padding: 10%;
height: 100%;
}
.text {
display: flex;
justify-content: space-around;
align-content: center;
}
#app {
font-size: 38px !important;
letter-spacing: 0;
line-height: 34px;
padding-bottom: 24p;
}
#media (max-width:500px) {
.box section div {
justify-content: center;
align-items: center;
flex-direction: column;
}
.box {
display: flex;
flex-direction: column;
justify-content: center;
}
.text {
flex-direction: column;
justify-content: center;
align-content: center;
}
}
.bg-black {
background-color: #000;
}
</style>
</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>
<div class="box bg-black">
<section class="section">
<div>
<div class="text">
<div id="app">
</div>
</div>
</div>
</section>
</div>
<div>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
</div>
<!-- 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>
<script src="https://unpkg.com/typewriter-effect#latest/dist/core.js"></script>
<script>
var app = document.getElementById('app');
var typewriter = new Typewriter(app, {
loop: true,
delay: 75,
});
typewriter
.pauseFor(1500)
.typeString('I am ')
.pauseFor(400)
.typeString('<strong>Developer</strong>')
.pauseFor(1500)
.deleteChars(9)
.typeString('<strong>Designer</strong>')
.pauseFor(1000)
.deleteChars(8)
.typeString('<strong>Sculptor</strong>')
.pauseFor(1000)
.deleteChars(8)
.pauseFor(1000)
.start();
</script>
</body>
</html>

Navbar dropdown always stays below other dropdown, increasing z-index etc doesn't work

I currently have the following overlap problem with my dropdowns:
As you can see if I press my most right button (the filter logo) and then press my dropdown link it overlaps in an ugly way. I would like that the "Dropdown link" dropdown always goes on top.
I have tried playing with the CSS (z-index, position, display, etc.) of both dropdowns, but I can't seem to figure it out. From what I understand z-index should solve my problem, but it doesn't. So that's why I went to play with position / display etc, but that didn't help either and confused me even more.
Anyone have any idea what I am doing wrong? Would really appreciate a push in the right direction. (Other random feedback on my current code is also appreciated)
My code:
https://jsfiddle.net/afbs97dy/4/
HTML:
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="https://www.test.com"><img class="logoklant" src="images/test.png" alt="Logo"></a>
<a class="navbar-brand naamdashboard" href="#">test</a>
<button class="navbar-toggler navbar-toggler-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>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto menuitems" id="myNavbar">
<li class="nav-item"><a class="nav-link" href="#page1">Link 1</a></li>
<li class="nav-item"><a class="nav-link" href="#page2">Link 2</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#test1">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="" id="filter">
<i class="fas fa-filter filterlogo"></i>
</a>
<ul class="dropdown-menu dropdownqlik">
<div id="CurrentSelections" class="qvobjects">
<div class="current-selections-placeholder">
<span>Connect to app to see Selection Toolbar</span>
</div>
</div>
</ul>
</li>
</ul>
</div>
</nav>
</body></html>
CSS:
/* navbar */
.navbar {
background-color: #3b3b3b;
font-family: Montserrat, sans-serif;
font-size: 12px !important;
letter-spacing: 4px;
}
.navbar-brand {
padding-top: 0px;
padding-bottom: 0px;
padding-right: 5px;
}
.logoklant {
height:40px;
}
.naamdashboard {
font: 20px;
}
.filterlogo {
font-size: 32px;
margin-left: 5px;
margin-top: 2px;
padding-right: 10px;
}
.dropdownqlik {
height: 36px;
}
#filter.is-active + .dropdown-menu {
display: block;
width: 100.1%;
top:53px;
}
.is-pos-static {
position: static !important;
color: white !important;
}
#CurrentSelections {
margin-top: -8px;
margin-left:-1px;
}
/* Scroll to top */
.scrollToTop {
text-align: center;
font-weight: bold;
color: #444;
text-decoration: none;
position: fixed;
top: 95vh;
right: 1vw;
z-index: 3000;
}
.scrollToTopLogo {
color: black;
}
JS:
/* https://stackoverflow.com/questions/48243406/change-color-on-hover-and-when-navbar-toggle-is-collapsed */
$(document).ready(function(){
$("#filter").click(function(){
$(this).parent('li').toggleClass('is-pos-static');
$(this).toggleClass("is-active");
});
});
Thanks for taking your time to help.

add CSS
.dropdown-menu.show {
z-index: 9999;
}

Categories

Resources