title: Change navbar color when viewport size change Bootstrap v4
body: <p>I just migrate to Bootstrap V4. Im customizing the starter template: <a href="https://v4-alpha.getbootstrap.com/examples/starter-template/" rel="nofollow noreferrer">https://v4-alpha.getbootstrap.com/examples/starter-template/</a></p>
  
  <p>I want the <code>navbar</code> to be transparent but change to dark when the <code>viewport</code> is <code>sm</code> and <code>xs</code>. </p>
  
  <p>Im trying to change it using a breakpoint and adding a 'navbar-custom' class, but i doesn't change</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
      overflow: hidden;
      height: 100%;
      
   }
  
  
  
  body {
    padding-top: 5rem;
    overflow: auto;
    height:  100%;
  
    background: linear-gradient(-45deg, #E8D1E2, #7CC4FF, #FFECBD, #BF9BFA);
     background-size: 400% 400%;
     -webkit-animation: Gradient 15s ease infinite;
     -moz-animation: Gradient 15s ease infinite;
     animation: Gradient 15s ease infinite;
   }
  
  @-webkit-keyframes Gradient {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 50%
    }
    100% {
      background-position: 0% 50%
    }
  }
  
  @-moz-keyframes Gradient {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 50%
    }
    100% {
      background-position: 0% 50%
    }
  }
  
  @keyframes Gradient {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 50%
    }
    100% {
      background-position: 0% 50%
    }
  
  }
  
  
  
  .navbar {
   border-top: 2px solid #C66FF4;
   width: 100%
  }
  
  @media (min-width: 768px) {
    
    nav .navbar .navbar-custom {
      background: rgba(0,0,0,0);
  
    }
  }
  
  .starter-template {
    padding: 3rem 1.5rem;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no"&gt;
   &lt;meta name="description" content="Full-Stack Graphic Designer, Illustrator, Front-End Development"&gt;
   &lt;meta name="author" content="Liliana Orozco"&gt;
   &lt;meta name="keywords" content="Designer, Creativity, Design, CSS, HTML5, Branding, Logotype, Illustration, Web, Advertising"&gt;
   &lt;title&gt;Randomood says: Welcome!&lt;/title&gt;
  
   &lt;!-- Bootstrap 4.0 cdn --&gt;
   &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"&gt;
  
  
   &lt;!--custom styles for this page --&gt;
   &lt;link href="css/home.css" rel="stylesheet"&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
   
  
   &lt;!--navigation--&gt;
      &lt;nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top  navbar-custom"&gt;
  
      
     
  
      
      &lt;!--Brand in navigation menu--&gt;  
        
        &lt;a class="navbar-brand " href="#"&gt;Randomood&lt;/a&gt;
       &lt;!--Brand image in navigation menu--&gt;
       &lt;a class="navbar-brand" href="#"&gt;&lt;img&gt;&lt;/a&gt;
  
        &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;/button&gt;
  
        &lt;div class="collapse navbar-collapse" id="navbarsExampleDefault"&gt;
          &lt;ul class="navbar-nav ml-auto"&gt;
            
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;Book&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;Contact&lt;/a&gt;
            &lt;/li&gt;
            
             
          &lt;/ul&gt;
          
        &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div class="container"&gt;
  
        &lt;div class="starter-template"&gt;
          &lt;h1&gt;Bootstrap starter template&lt;/h1&gt;
          &lt;p class="lead"&gt;Use this document as a way to quickly start any new project.&lt;br&gt; All you get is this text and a mostly barebones HTML document.&lt;/p&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;&lt;!-- /.container --&gt;
  
  
  
  
  
   &lt;!--JS, Popper and JQuery--&gt;
   &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
   &lt;script&gt;window.jQuery || document.write('&lt;script src="jquery-slim.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"&gt;&lt;/script&gt;
   &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>