I have difficulty in CSS. The icons are fetched from icons.getbootstrap.com. I need three icons at the center of the navbar with healthy spaces between them.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.php">DrugsDirect</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<h1><a href="signup.php"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
</svg></a></h1>
</li>
<li class="nav-item">
<h1><a href="cart.php" class="site-cart"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag-check-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5v-.5zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0zm-.646 5.354a.5.5 0 0 0-.708-.708L7.5 10.793 6.354 9.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"/>
</svg></a></h1>
<li class="nav-item">
<h1><a href="logout.php"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0v2z"/>
<path fill-rule="evenodd" d="M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z"/>
</svg></a></h1>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
enter image description here
Use ms-3 for margin-start (margin-left) on your second and third list items. You can range from ms-1 (.25rem) to ms-5 (3rem).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.php">DrugsDirect</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<h1><a href="signup.php"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
</svg></a></h1>
</li>
<li class="nav-item ms-3">
<h1><a href="cart.php" class="site-cart"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag-check-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5v-.5zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0zm-.646 5.354a.5.5 0 0 0-.708-.708L7.5 10.793 6.354 9.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"/>
</svg></a></h1>
<li class="nav-item ms-3">
<h1><a href="logout.php"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0v2z"/>
<path fill-rule="evenodd" d="M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z"/>
</svg></a></h1>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Use flexbox & column gap as follows :
<ul class="custom-navbar navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<h1><a href="signup.php"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
</svg></a></h1>
</li>
<li class="nav-item">
<h1><a href="cart.php" class="site-cart"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag-check-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5v-.5zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0zm-.646 5.354a.5.5 0 0 0-.708-.708L7.5 10.793 6.354 9.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"/>
</svg></a></h1>
<li class="nav-item">
<h1><a href="logout.php"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0v2z"/>
<path fill-rule="evenodd" d="M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z"/>
</svg></a></h1>
</li>
</ul>
.custom-navbar{
display:flex;
justify-content:flex-start;
align-items:center;
column-gap:1.3rem;
}
I'm struggling with getting the navbar elements in the right order.
On small screens (phone) the collapse button shows up on top of the links, but for some reason on medium screens it shows up before the last link in the menu. Anyone has a solution to this and tell me what's causing this? Many thanks in advance!
Codepen:
https://codepen.io/laurent-bosteels/pen/qBRKQor
HTML
<div class="container-fluid">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav me-auto">
<li class="nav-item active">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DISCOVER</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PRICING</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a href="index.html" class="navbar-brand d-none d-lg-block me-auto" alt="logo" aria-label="ad astra logo">
<svg class="logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 231.1 160.4"
enable-background="new 0 0 231.1 160.4" xml:space="preserve">
<g>
<path class="logo-fill" fill="#959595" d="M228.6,0h-12.5c-1.8,0-3.1,1.2-3.7,3.5l-11.7,36.4h-60.3L128.7,3.5C128.2,1.2,127,0,125.2,0h-12.7
c-2.2,0-2.9,1.2-2.2,3.5l46.6,153.4c0.7,2.3,2.2,3.5,4.7,3.5h17.9c2.5,0,4.1-1.2,4.7-3.5L230.8,3.5C231.5,1.2,230.8,0,228.6,0z
M171,141.7h-1l-25.7-86.3h52.3L171,141.7z" />
<path class="logo-fill" fill="#959595" d="M74.2,3.5C73.6,1.2,72,0,69.5,0H51.6c-2.5,0-4.1,1.2-4.7,3.5L0.2,156.9c-0.7,2.3,0.1,3.5,2.2,3.5h12.5
c1.8,0,3.1-1.2,3.7-3.5l11.7-36.4h60.3l11.7,36.4c0.5,2.3,1.7,3.5,3.5,3.5h12.7c2.2,0,2.9-1.2,2.2-3.5L74.2,3.5z M34.4,105L60,18.7
h1L86.7,105H34.4z" />
</g>
</svg>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
CSS
.navbar-custom {
background-color: #0D1521;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #F8F9F9;
}
.navbar-custom .navbar-brand {
padding: 0;
}
.nav-link {
font-size: 1.15rem;
margin-right: 2rem;
margin-left: 2rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.navbar-nav .nav-item:not(:last-child) {
border-right: 1px solid rgb(46 57 67);
}
If all you’re looking to do is to have the collapse button at the top of the menu when it’s open, then you could put the button at the start of the navbar. Then, when it’s clicked, the button will move up the screen to show the menu.
The order-0, -1, -3 didn’t seem to be doing anything, so I took those out.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js"></script>
<style>
.navbar-custom {
background-color: #0D1521;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #F8F9F9;
}
.navbar-custom .navbar-brand {
padding: 0;
}
.nav-link {
font-size: 1.15rem;
margin-right: 2rem;
margin-left: 2rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.navbar-nav .nav-item:not(:last-child) {
border-right: 1px solid rgb(46 57 67);
}
</style>
<nav class="navbar navbar-custom navbar-expand-lg navbar-dark fixed-bottom">
<div class="container-fluid">
<button class="navbar-toggler mx-auto" type="button" data-bs-toggle="collapse" data-bs-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100 order-md-0 dual-collapse2">
<ul class="navbar-nav me-auto">
<li class="nav-item active">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DISCOVER</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PRICING</a>
</li>
</ul>
</div>
<a href="index.html" class="navbar-brand d-none d-lg-block me-auto" aria-label="ad astra logo">
<svg class="logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 231.1 160.4" enable-background="new 0 0 231.1 160.4" xml:space="preserve">
<g>
<path class="logo-fill" fill="#959595" d="M228.6,0h-12.5c-1.8,0-3.1,1.2-3.7,3.5l-11.7,36.4h-60.3L128.7,3.5C128.2,1.2,127,0,125.2,0h-12.7
c-2.2,0-2.9,1.2-2.2,3.5l46.6,153.4c0.7,2.3,2.2,3.5,4.7,3.5h17.9c2.5,0,4.1-1.2,4.7-3.5L230.8,3.5C231.5,1.2,230.8,0,228.6,0z
M171,141.7h-1l-25.7-86.3h52.3L171,141.7z" />
<path class="logo-fill" fill="#959595" d="M74.2,3.5C73.6,1.2,72,0,69.5,0H51.6c-2.5,0-4.1,1.2-4.7,3.5L0.2,156.9c-0.7,2.3,0.1,3.5,2.2,3.5h12.5
c1.8,0,3.1-1.2,3.7-3.5l11.7-36.4h60.3l11.7,36.4c0.5,2.3,1.7,3.5,3.5,3.5h12.7c2.2,0,2.9-1.2,2.2-3.5L74.2,3.5z M34.4,105L60,18.7
h1L86.7,105H34.4z" />
</g>
</svg>
</a>
<div class="navbar-collapse collapse w-100 dual-collapse2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
When I run the below HTML file via Django's render function, I get the following result: Django result
However, when I open the HTML file directly by clicking on it, I get the following result: HTML result
Why do they render so differently? How should I modify the code such that when I render the HTML file through Django, I can obtain the same result as when I open the HTML file directly?`
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.82.0">
<title>Headers · Bootstrap v5.0</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/headers/">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Favicons -->
<link rel="apple-touch-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/5.0/examples/headers/headers.css" rel="stylesheet"/>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="bootstrap" viewBox="0 0 118 94">
<title>Bootstrap</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
</symbol>
<symbol id="home" viewBox="0 0 16 16">
<path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"></path>
</symbol>
<symbol id="speedometer2" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"></path>
<path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"></path>
</symbol>
<symbol id="table" viewBox="0 0 16 16">
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"></path>
</symbol>
<symbol id="people-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"></path>
</symbol>
<symbol id="grid" viewBox="0 0 16 16">
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"></path>
</symbol>
</svg>
<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
<span class="fs-4">Simple header</span>
</a>
<ul class="nav nav-pills">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
</header>
</div>
<div class="b-example-divider"></div>
<div class="container">
<header class="d-flex justify-content-center py-3">
<ul class="nav nav-pills">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
</header>
</div>
<div class="b-example-divider"></div>
<div class="container">
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>FAQs</li>
<li>About</li>
</ul>
<div class="col-md-3 text-end">
<button type="button" class="btn btn-outline-primary me-2">Login</button>
<button type="button" class="btn btn-primary">Sign-up</button>
</div>
</header>
</div>
<div class="b-example-divider"></div>
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>FAQs</li>
<li>About</li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
<input type="search" class="form-control form-control-dark" placeholder="Search...">
</form>
<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">Login</button>
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<div class="b-example-divider"></div>
<header class="p-3 mb-3 border-bottom">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li>Overview</li>
<li>Inventory</li>
<li>Customers</li>
<li>Products</li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
<input type="search" class="form-control" placeholder="Search...">
</form>
<div class="dropdown text-end">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
</a>
<ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
</header>
<div class="b-example-divider"></div>
<header class="py-3 mb-3 border-bottom">
<div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
<div class="dropdown">
<a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" id="dropdownNavLink" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownNavLink">
<li><a class="dropdown-item active" href="#">Overview</a></li>
<li><a class="dropdown-item" href="#">Inventory</a></li>
<li><a class="dropdown-item" href="#">Customers</a></li>
<li><a class="dropdown-item" href="#">Products</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Reports</a></li>
<li><a class="dropdown-item" href="#">Analytics</a></li>
</ul>
</div>
<div class="d-flex align-items-center">
<form class="w-100 me-3">
<input type="search" class="form-control" placeholder="Search...">
</form>
<div class="flex-shrink-0 dropdown">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
</a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
</header>
<main class="container-fluid pb-3">
<div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
<div class="bg-light border rounded-3">
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="bg-light border rounded-3">
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</main>
<div class="b-example-divider"></div>
<nav class="py-2 bg-light border-bottom">
<div class="container d-flex flex-wrap">
<ul class="nav me-auto">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
<ul class="nav">
<li class="nav-item">Login</li>
<li class="nav-item">Sign up</li>
</ul>
</div>
</nav>
<header class="py-3 mb-4 border-bottom">
<div class="container d-flex flex-wrap justify-content-center">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
<span class="fs-4">Double header</span>
</a>
<form class="col-12 col-lg-auto mb-3 mb-lg-0">
<input type="search" class="form-control" placeholder="Search...">
</form>
</div>
</header>
<div class="b-example-divider"></div>
<header class="px-3 py-2 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
<li>
<a href="#" class="nav-link text-secondary">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"></use></svg>
Home
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"></use></svg>
Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"></use></svg>
Orders
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"></use></svg>
Products
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"></use></svg>
Customers
</a>
</li>
</ul>
</div>
</div>
</header>
<div class="px-3 py-2 border-bottom mb-3">
<div class="container d-flex flex-wrap justify-content-center">
<form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto">
<input type="search" class="form-control" placeholder="Search...">
</form>
<div class="text-end">
<button type="button" class="btn btn-light text-dark me-2">Login</button>
<button type="button" class="btn btn-primary">Sign-up</button>
</div>
</div>
</div>
<div class="b-example-divider"></div>
<script src="https://getbootstrap.com/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body></html>
`
The code above is taken from https://getbootstrap.com/docs/5.0/examples/headers/.
I am new to web development, I am trying to make responsive/ mobile menu with a close icon, How to show/ add close icon for bootstrap 5 mobile menu? I explored and tried a lot but unfortunately, was not able to achieve that.
Any help will be appreciated.
Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geometry Global</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;600;700;800;900&display=swap');
body, h1, h2, h3, h4, h5, article, section, div, p, ul, li, ol, a {
font-family: 'Montserrat', sans-serif;
}
h1{
font-size:5.3rem;
font-weight:900;
line-height:0.8;
}
h2{
font-size:2rem;
font-weight:700;
}
body{
max-width:1414px;
margin:0 auto;
}
[x-cloak] { display: none; }
button {vertical-align: middle;}
input#s {border-radius: 0;border-width: 0 0 1px 0;font-size: 1.5rem;}
input#s:focus {outline: none;box-shadow: none;}
.search-panel-wrap {
position: relative;
height: 1px;
}
.search-panel {
background-color: white;
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 20px 0;
z-index: 9;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body x-data="{s_open: false}">
<section>
<div class="container border-bottom border-1 border-dark">
<div class="row py-3">
<div class="col-sm-6 col-6">
Geometry Global
</div>
<div class="col-sm-6 col-6 d-block d-sm-none">
<div class="text-end">
Explore Geometry Global
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> </svg>
</div>
</div>
</div>
</div>
</section>
<section class="sticky-top bg-white">
<nav class="navbar container navbar-expand-lg navbar-light px-0">
<div class="container-fluid">
<a class="navbar-brand" href="#">Annual Report</a>
<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-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Reports 2020
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Report Architecture</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Report Planning</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Report Development</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
External Links
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</li>
</ul>
<span class="navbar-text d-none d-sm-block">
Download Geometry Global Report
<button class="btn" id="js-toggle-sp" #click="s_open = true" x-show="s_open === false"style="padding:0;height:24px;width:24px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</button>
<button type="button" class="btn-close" aria-label="Close" x-show="s_open" x-cloak></button>
</span>
</div>
</div>
</nav>
<div class="search-panel-wrap">
<div class="search-panel" x-show="s_open" #click.away="s_open = false" x-cloak>
<div class="container search-panel__wrap">
<form action=""><input class="form-control" type="text" name="s" id="s" placeholder="Type here"></form>
</div>
</div>
</div>
</section>
<section class="py-3" style="background-color:#F9ECE4;">
<div class="container">
<div class="row">
<div class="col-sm-4 align-self-center">
<div><h2>STATISTICS <br/>2020</h2></div>
<div>An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
</div>
<div class="col-sm-8 text-center">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2019/09/28/10/38/medical-4510408_1280.png" alt=""/>
</div>
</div>
</div>
</section>
<section class="py-3">
<div class="container">
<div class="row">
<div class="col-sm-6 align-self-center">
<div class="py-3"><h1>Gross <br/>Income <br/>2020</h1></div>
<div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
<div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div>
</div>
<div class="col-sm-6">
<div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
<div class="py-3">They may be considered as grey literature. Most jurisdictions require companies to prepare and disclose annual reports, and many require the annual report to be filed at the company's registry. Companies listed on a stock exchange are also required to report at more frequent intervals (depending upon the rules of the stock exchange involved).</div>
<div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div>
</div>
</div>
<div class="row py-5">
<div class="col">
© geometry global inc. 2021
</div>
</div>
</div>
</section>
</body>
</html>
I am using Bootstrap 5 cdn
default classes of bootstrap 5
Try that, Note using jQuery library for javascript part and also adding bootstrap icons library, study the changes I made so that you could use the same icon methods around the script to improve:
$( document ).ready(function() {
$('.navbar-toggler').click(function(){
if($('.navbar-toggler').hasClass('collapsed')){
$('.navbar-toggler .bi').removeClass('bi-x');
$('.navbar-toggler .bi').addClass('bi-list');
}else{
$('.navbar-toggler .bi').removeClass('bi-list');
$('.navbar-toggler .bi').addClass('bi-x');
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geometry Global</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link href="assets/css/theme.css" rel="stylesheet">
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;600;700;800;900&display=swap');
body, h1, h2, h3, h4, h5, article, section, div, p, ul, li, ol, a {
font-family: 'Montserrat', sans-serif;
}
h1{
font-size:5.3rem;
font-weight:900;
line-height:0.8;
}
h2{
font-size:2rem;
font-weight:700;
}
body{
max-width:1414px;
margin:0 auto;
}
[x-cloak] { display: none; }
button {vertical-align: middle;}
input#s {border-radius: 0;border-width: 0 0 1px 0;font-size: 1.5rem;}
input#s:focus {outline: none;box-shadow: none;}
.search-panel-wrap {
position: relative;
height: 1px;
}
.search-panel {
background-color: white;
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 20px 0;
z-index: 9;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body x-data="{s_open: false}">
<section>
<div class="container border-bottom border-1 border-dark">
<div class="row py-3">
<div class="col-sm-6 col-6">
Geometry Global
</div>
<div class="col-sm-6 col-6 d-block d-sm-none">
<div class="text-end">
Explore Geometry Global
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> </svg>
</div>
</div>
</div>
</div>
</section>
<section class="sticky-top bg-white">
<nav class="navbar container navbar-expand-lg navbar-light px-0">
<div class="container-fluid">
<a class="navbar-brand" href="#">Annual Report</a>
<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="bi bi-list"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Reports 2020
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Report Architecture</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Report Planning</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Report Development</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
External Links
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</li>
</ul>
<span class="navbar-text d-none d-sm-block">
Download Geometry Global Report
<button class="btn" id="js-toggle-sp" #click="s_open = true" x-show="s_open === false"style="padding:0;height:24px;width:24px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</button>
<button type="button" class="btn-close" aria-label="Close" x-show="s_open" x-cloak></button>
</span>
</div>
</div>
</nav>
<div class="search-panel-wrap">
<div class="search-panel" x-show="s_open" #click.away="s_open = false" x-cloak>
<div class="container search-panel__wrap">
<form action=""><input class="form-control" type="text" name="s" id="s" placeholder="Type here"></form>
</div>
</div>
</div>
</section>
<section class="py-3" style="background-color:#F9ECE4;">
<div class="container">
<div class="row">
<div class="col-sm-4 align-self-center">
<div><h2>STATISTICS <br/>2020</h2></div>
<div>An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
</div>
<div class="col-sm-8 text-center">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2019/09/28/10/38/medical-4510408_1280.png" alt=""/>
</div>
</div>
</div>
</section>
<section class="py-3">
<div class="container">
<div class="row">
<div class="col-sm-6 align-self-center">
<div class="py-3"><h1>Gross <br/>Income <br/>2020</h1></div>
<div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
<div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div>
</div>
<div class="col-sm-6">
<div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
<div class="py-3">They may be considered as grey literature. Most jurisdictions require companies to prepare and disclose annual reports, and many require the annual report to be filed at the company's registry. Companies listed on a stock exchange are also required to report at more frequent intervals (depending upon the rules of the stock exchange involved).</div>
<div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div>
</div>
</div>
<div class="row py-5">
<div class="col">
© geometry global inc. 2021
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
I am working on a website where I'd like to add an animation to my static navbar from Bootstrap. I want the 3 horizontal bars to change to an X when the button is toggled on mobile viewport.
Note: I am using Bootstrap 4, not 3. Some BS3 classes don't work in BS4
This is what I am trying to accomplish: example. However, I've found multiple tutorials but I am struggling with it. The reason for this is that all those tutorials are based on BS3. BS3 uses the navbar-toggle-class, but BS4 uses the navbar-toggler-class. It's major difference, since the BS4-version contains a viewbox in css:
.navbar-toggler {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
border-color: rgba(0,0,0,.1);
}
And in the bootstrap.min.css the navbar-toggler-class is being used for 11 times. So if I modify this class, it will (probably) break.
HTML of menu:
<div class="container">
<div class="row hidden-lg-up">
<div class="wrapper-right">
<img src="img/placeholders/225x50.png" alt="Logo Company Mobile" class="mobile-only" />
</div>
</div>
<div class="row">
<nav class="navbar navbar-light navbar-full">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
<a class="navbar-brand vc-parent" href="#">
<img src="img/placeholders/250x50.png" alt="Logo Company Desktop" class="img-fluid desktop-only" />
</a>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item active align-middle">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item align-middle">
<a class="nav-link" href="#">Item</a>
</li>
<li class="nav-item align-middle">
<a class="nav-link" href="#">Item</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
Could anyone point me in the right direction?
Change .navbar-toggler-icon background when menu is opened to
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8l20 16M4 24L24 8'/%3E%3C/svg%3E");