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>
Related
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>
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>
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>
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>
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>