title: Why im not able to change width of slide navbar background?
body: <p>so there is my navbar code. I want to make black background on menu while slide down from the top a bit shorter, can i do this ? I have tried to do something in css with whidth of .shrink class but it changed nothing. Also could you suggest me how can i change the place of logo in navbar while sliding down ? I will show you in pictures how i want it to look like.</p>
  
  <p><a href="https://ibb.co/cCh08RD" rel="nofollow noreferrer">https://ibb.co/cCh08RD</a> - here is the pic, so placeholder is where the logo is in navbar. I want it to go lower while sliding like i tried to draw it and in the place of logo i want to display menu pic - something like this 3 lines. Also i tired to draw how width i would like it to be. </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-js lang-js prettyprint-override"><code>$(window).on('scroll', function() {
      if ($(window).scrollTop()) {
          $('nav').addClass('shrink');
  
      } else {
          $('nav').removeClass('shrink');
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.background {
      background-image: url('../images/img1-header.png');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 650px;
      width: 100%;
  }
  #siteNav {
      width: 100%;
      top: 0;
      left: 0;
      transition: 0.3s;
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding-top: 20px;
      padding-bottom: 20px;
  }
  .shrink {
      background: rgba(32, 32, 32);
      height: 50px;
      position: fixed;
  }
  .shrink .logo {
      transition: 0.3s;
      display: flex;
      height: 38px;
  }
  #siteNav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
  }
  #siteNav ul li {
      list-style: none;
      border-right: 1px solid #fafafa;
      padding-top: 10px;
  }
  #siteNav ul li a {
      padding: 0 30px;
      text-decoration: none;
      transition: 0.3s;
      color: #000000;
  }
  #siteNav ul li:last-child {
      border-right: none;
  }
  header h1 {
      text-align: center;
      font-family: 'Homenaje', sans-serif;
      color: #000000;
      font-size: 58px;
      padding-top: 130px;
      letter-spacing: 3px;
  }
  
  header h1 a {
      color: #383838;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="background"&gt;
              &lt;nav id="siteNav"&gt;
                  &lt;img class="logo" src="http://placehold.it/40" alt=""&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#mission"&gt;MISSION&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#clients"&gt;CLIENTS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#products"&gt;PRODUCTS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#contact"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
              &lt;header&gt;
                  &lt;div&gt;
                      &lt;h1&gt;aaaaaaa &lt;br&gt;&lt;a&gt;aaaaaaaaa&lt;/a&gt;&lt;/br&gt;
                      &lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/header&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>