Question 61278 in Twitter Bootstrap Question posted in

Close menù when I click on navlink-Twitter bootstrap

I have this problem. When I click on menù link, the page scroll but the menù remain open. This is my code-pen link (For some reason, codepen don’t read che css color link, but don’t worry about it)
Js suggestions? I have just tried with on click function, but don’t work.

Thank you every body can help me!

[Link Codepen][MyCodepen] 
.nav-link{
    font-weight: 300;
}
.text-menu{
    font-weight: 200;
}
.navbar-toggler{
    border: none;
}

.offcanvas-header{
    background-color: #0c0c0c;
    padding-left: 2.5rem;
    color: #eab736;
    
}
.offcanvas-body{
    background-color: #0c0c0c;
}
.nav-link{
    font-size: 1.3rem;
    color: white;
    padding-left: 2rem;
}
.nav-link:hover{
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.20);
    padding-left: 2rem;
}
.text-menu{
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.20);
    padding-left: 2rem;
}
.icon-white{
    color: white;
    font-size: 2rem;
}
.header-nav__social {
    padding-top: 3rem;
    list-style: none;
    display: inline-block;
    margin: 0;
    font-size: 1.2rem;
}

.header-nav__social li {
    margin-right: 12px;
    padding-left: 0;
    display: inline-block;
}

.header-nav__social li a {
    color: rgba(255, 255, 255, 0.20);
}

.header-nav__social li a:hover,
.header-nav__social li a:focus {
    color: white;
    transition: all 0.5s;
}

.header-nav__social li:last-child {
    margin: 0;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Example</title>


    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>

<body>
<nav class="navbar fixed-top" id="mainNav">
  <div class="container-fluid">
    <a class="navbar-brand text-black js-scroll-trigger" href="#home">Brand name</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <i class="bi bi-list icon-black"></i>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <p class="offcanvas-title" id="offcanvasNavbarLabel">Menù</p>
        <button type="button" class="btn-close btn-close-white"  data-bs-dismiss="offcanvas" aria-label="Close" ></button>
      </div>
      <div class="offcanvas-body">
        
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3 text-white">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger"  href="#works">Gallery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#contacts">Contacts</a>
          </li>
            
            <p class="text-menu mt-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam minima beatae, repudiandae voluptatibus in suscipit dicta, facere consequuntur.</p>
            
 
        </ul>
    
           <ul class="header-nav__social">
                    <li>
                        <a href="#"><i class="bi bi-facebook"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="bi bi-twitter"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="bi bi-instagram"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="bi bi-behance"></i></a>
                    </li>
                </ul>
      </div>
    </div>
  </div>
</nav>
  
  
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script> 
  </body>
</html>

]1

Tags:

2

Answers


  1. 0 
    .nav-link{
    font-weight: 300;
}
.text-menu{
    font-weight: 200;
}
.navbar-toggler{
    border: none;
}

.offcanvas-header{
    background-color: #0c0c0c;
    padding-left: 2.5rem;
    color: #eab736;
    
}
.offcanvas-body{
    background-color: #0c0c0c;
}
.nav-link{
    font-size: 1.3rem;
    color: white;
    padding-left: 2rem;
}
.nav-link:hover{
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.20);
    padding-left: 2rem;
}
.text-menu{
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.20);
    padding-left: 2rem;
}
.icon-white{
    color: white;
    font-size: 2rem;
}
.header-nav__social {
    padding-top: 3rem;
    list-style: none;
    display: inline-block;
    margin: 0;
    font-size: 1.2rem;
}

.header-nav__social li {
    margin-right: 12px;
    padding-left: 0;
    display: inline-block;
}

.header-nav__social li a {
    color: rgba(255, 255, 255, 0.20);
}

.header-nav__social li a:hover,
.header-nav__social li a:focus {
    color: white;
    transition: all 0.5s;
}

.header-nav__social li:last-child {
    margin: 0;
}
    <html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Example</title>


    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>

<body>
<nav class="navbar fixed-top" id="mainNav">
  <div class="container-fluid">
    <a class="navbar-brand text-black js-scroll-trigger" href="#home">Brand name</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <i class="bi bi-list icon-black"></i>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <p class="offcanvas-title" id="offcanvasNavbarLabel">Menù</p>
        <button type="button" class="btn-close btn-close-white"  data-bs-dismiss="offcanvas" aria-label="Close" ></button>
      </div>
      <div class="offcanvas-body">
        
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3 text-white">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#home"  data-bs-dismiss="offcanvas" aria-label="Close" data-bs-dismiss="offcanvas" aria-label="Close">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#about" data-bs-dismiss="offcanvas" aria-label="Close">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger"  href="#works" data-bs-dismiss="offcanvas" aria-label="Close">Gallery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#contacts" data-bs-dismiss="offcanvas" aria-label="Close">Contacts</a>
          </li>
            
            <p class="text-menu mt-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam minima beatae, repudiandae voluptatibus in suscipit dicta, facere consequuntur.</p>
            
 
        </ul>
    
           <ul class="header-nav__social">
                    <li>
                        <a href="#"><i class="bi bi-facebook"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="bi bi-twitter"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="bi bi-instagram"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="bi bi-behance"></i></a>
                    </li>
                </ul>
      </div>
    </div>
  </div>
</nav>
  
  
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script> 
  </body>
</html>
    Login or Signup to reply.
  2. 0

    Please add this js

    $(document).ready(function(){
  $('a.nav-link').click(function(){
    $('#offcanvasNavbar').removeClass('show');
    $('.offcanvas-backdrop').removeClass('show');
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search