How to add close icon to bootstrap 5 mobile menu?
Question
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"> <a href="">Explore Geometry Global</a>  : <a href=""><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></a> </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"> <a href="#" style="display; inline-block:transform; translateY(3px);">Download Geometry Global Report</a>  : <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
1 answers
solution1
1 ACCPTED 2021-02-22 10:00:36
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"> <a href="">Explore Geometry Global</a>  : <a href=""><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></a> </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"> <a href="#" style="display; inline-block:transform; translateY(3px);">Download Geometry Global Report</a>  : <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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to close bootstrap menu on click of the icon?
How to show a menu icon on mobile devices in Bootstrap nav?
bootstrap menu icon change to x close
How to change foundation hamburger icon to close icon on click (i.e: mobile menu open)
Bootstrap sidebar menu close not working on mobile
How to close Hamburger menu with close icon
How to create an icon menu with Bootstrap 4?
jQuery mobile add custom icon to list menu
How to change the position of Bootstrap Navigation Bar parent menu item icon at mobile view?
Add text inside bootstrap mobile menu button
Related Tags