Reputation: 107

Removing a class when the menu is collapsed in bootstrap

I had to add a class .bgGradient when the navbar is expanded because the client wanted an image in the navbar and the text wasn't easily legible with it. So I added a slight gradient behind the navbar. But when it's collapsed, the gradient looks weird so I wanted to get rid of it.

Is there any way to get rid of the class .bgGradient only when the navbar is collapsed?

 .navbar {
   margin: -30px 0 15px 0;
 }

 .navbar ul {
   display: flex;
   justify-content: space-around;
 }

 .navbar .nav-item .nav-link {
   color: #FFF;
   font-family: "Helvetica," sans-serif;
   font-weight: 600;
   font-size: 14px;
   display: inline-flex;
   padding: 0px;
 }

 .bgGradient {
   background-color: rgba(54, 203, 216, 0.8);
   box-shadow: 0px 0px 8px 5px #36CBD8;
 }

 .bgGradient2 {
   background-color: rgba(16, 188, 185, 0.5);
   box-shadow: 0px 0px 10px 5px #10BCB9;
 }

 .navbar-dark .navbar-nav .nav-link {
   color: white;
 }

 .custom-toggler.navbar-toggler {
   border-color: rgb(255, 255, 255, 0.5);
 }

 .custom-toggler .navbar-toggler-icon {
   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(255,255,255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
 }

<!DOCTYPE html>

<html lang="en" class="no-js">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>

  <body>


    <div class="sticky-top">
      <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
        <button class="navbar-toggler custom-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 justify-content-around" id="navbarSupportedContent">
          <ul class="nav navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          BOOKS
        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="brandingsutra">Branding Sutra</a>
              </div>
            </li>
          </ul>
          <ul class="nav navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          LEARNING LAB
        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Workshops</a>
                <a class="dropdown-item" href="#">Podcast</a>
                <a class="dropdown-item" href="#">Classes</a>
              </div>
            </li>
          </ul>
          <ul class="nav navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle bgGradient2" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          SERVICES
        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Coaching</a>
                <a class="dropdown-item" href="#">Mindfulness</a>
              </div>
            </li>
          </ul>
          <ul class="nav navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle bgGradient" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          FREEBIES
        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Challenge</a>
                <a class="dropdown-item" href="#">DIY Copywriting</a>
              </div>
            </li>
          </ul>
          <ul class="nav navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle bgGradient" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          ABOUT
        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Merry Carole</a>
                <a class="dropdown-item" href="#">Branding Powers</a>
              </div>
            </li>
          </ul>

        </div>
      </nav>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  </body>

</html>

Here's a fiddle of it: https://jsfiddle.net/3pnb1byp/3/

Upvotes: 1

Answers (2)

Horai Nuri

Reputation: 5568

Bootstrap 3 navbar breakpoint is at 991px so you can use media queries to change your collapsed navbar.

@media screen and (max-width: 991px) {
 .bgGradient {
   background-color: transparent;
   box-shadow: none;
 }

 .bgGradient2 {
   background-color: transparent;
   box-shadow: none;
 }
}

https://jsfiddle.net/g3hg27j0/

Upvotes: 2

Baezid Mostafa

Reputation: 2728

As you are using navbar-expand-mdthe class in the nav would make this Navbar collapse vertically (and show the toggle icon) at the medium (md) breakpoint of 992px. But for some reason, your breakpoint actually works for screen width less than 768px.

And to get rid of the gradient. You can use the media query with min-width so your gradient class will only work until your minimum width breakpoint. And also you don't need to add additional CSS.

Below check CSS part I set the media query with min-width: 768px so when device screen is less than 768px gradient class will not work.

 .navbar {
   margin: -30px 0 15px 0;
 }

 .navbar ul {
   display: flex;
   justify-content: space-around;
 }

 .navbar .nav-item .nav-link {
   color: #FFF;
   font-family: "Helvetica," sans-serif;
   font-weight: 600;
   font-size: 14px;
   display: inline-flex;
   padding: 0px;
 }
 @media only screen and (min-width:768px){
  .bgGradient {
    background-color: rgba(54, 203, 216, 0.8);
    box-shadow: 0px 0px 8px 5px #36CBD8;
  }

  .bgGradient2 {
    background-color: rgba(16, 188, 185, 0.5);
    box-shadow: 0px 0px 10px 5px #10BCB9;
  }
 }
 .navbar-dark .navbar-nav .nav-link {
   color: white;
 }
   
 .custom-toggler.navbar-toggler {
   border-color: rgb(255, 255, 255, 0.5);
 }

 .custom-toggler .navbar-toggler-icon {
   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(255,255,255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
 }

<!DOCTYPE html>

<html lang="en" class="no-js">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>

  <body>


    <div class="sticky-top">
      <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
        <button class="navbar-toggler custom-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 justify-content-around" id="navbarSupportedContent">
          <ul class="nav navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          BOOKS
        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="brandingsutra">Branding Sutra</a>
              </div>
            </li>
          </ul>
          <ul class="nav navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          LEARNING LAB
        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Workshops</a>
                <a class="dropdown-item" href="#">Podcast</a>
                <a class="dropdown-item" href="#">Classes</a>
              </div>
            </li>
          </ul>
          <ul class="nav navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle bgGradient2" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          SERVICES
        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Coaching</a>
                <a class="dropdown-item" href="#">Mindfulness</a>
              </div>
            </li>
          </ul>
          <ul class="nav navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle bgGradient" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          FREEBIES
        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Challenge</a>
                <a class="dropdown-item" href="#">DIY Copywriting</a>
              </div>
            </li>
          </ul>
          <ul class="nav navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle bgGradient" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          ABOUT
        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Merry Carole</a>
                <a class="dropdown-item" href="#">Branding Powers</a>
              </div>
            </li>
          </ul>

        </div>
      </nav>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  </body>

</html>

Upvotes: 0

Removing a class when the menu is collapsed in bootstrap

Answers (2)

Related Questions