Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class='header'>
  <div class='header-left'>
    <div class='header-menu'><a arial-label='Menu' class='menu-toggle' href='javascript:;'><svg focusable='false' height='24' viewBox='0 0 24 24' width='24'>
          <path d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z' /></svg></a></div>
  </div>
  <div class='title'>
    <h1>Navigation</h1>
  </div>
</div>
<div class='darkshadow'></div>
<nav class='' id='nav-wrapper' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
  <ul>
    <li class='first'>
      <a href='https://koderian.blogspot.com/'>
        <span itemprop='name'>
          <svg height='24' viewBox='0 0 24 24' width='24'>
            <path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10ZZ' fill='#000' />
          </svg>Beranda</span></a></li>
    <li>
      <a class='nav-submenu' href='javascript:;' title='Bahasa Program'>
        <span>
          <svg height='24' viewBox='0 0 24 24' width='24'>
            <path d='M15 17V14H18V12L22 15.5L18 19V17H15M17 18V21H14V23L10 19.5L14 16V18H17M12 8C9.79 8 8 9.8 8 12C8 13.91 9.35 15.54 11.21 15.92L16 11.86C15.93 9.71 14.16 8 12 8M12 14C10.9 14 10 13.11 10 12S10.9 10 12 10 14 10.9 14 12 13.11 14 12 14M21.66 8.73L19.66 5.27C19.54 5.05 19.28 4.96 19.05 5.05L16.56 6.05C16.05 5.64 15.5 5.31 14.87 5.05L14.5 2.42C14.46 2.18 14.25 2 14 2H10C9.75 2 9.54 2.18 9.5 2.42L9.13 5.07C8.5 5.33 7.96 5.66 7.44 6.07L5 5.05C4.77 4.96 4.5 5.05 4.39 5.27L2.39 8.73C2.26 8.94 2.31 9.22 2.5 9.37L4.57 11L4.5 12L4.57 13L2.46 14.63C2.26 14.78 2.21 15.06 2.34 15.27L4.34 18.73C4.45 19 4.74 19.11 5 19L5 19L7.5 18C7.74 18.19 8 18.37 8.26 18.53L9.91 17.13C9.14 16.8 8.46 16.31 7.91 15.68L5.5 16.68L4.73 15.38L6.8 13.8C6.4 12.63 6.4 11.37 6.8 10.2L4.69 8.65L5.44 7.35L7.85 8.35C8.63 7.45 9.68 6.82 10.85 6.57L11.25 4H12.75L13.12 6.62C14.29 6.86 15.34 7.5 16.12 8.39L18.53 7.39L19.28 8.69L17.2 10.2C17.29 10.46 17.36 10.73 17.4 11H19.4L21.5 9.37C21.72 9.23 21.78 8.95 21.66 8.73M12 8C9.79 8 8 9.8 8 12C8 13.91 9.35 15.54 11.21 15.92L16 11.86C15.93 9.71 14.16 8 12 8M12 14C10.9 14 10 13.11 10 12S10.9 10 12 10 14 10.9 14 12 13.11 14 12 14M12 8C9.79 8 8 9.8 8 12C8 13.91 9.35 15.54 11.21 15.92L16 11.86C15.93 9.71 14.16 8 12 8M12 14C10.9 14 10 13.11 10 12S10.9 10 12 10 14 10.9 14 12 13.11 14 12 14ZZ'>
            </path>
          </svg>Tutorial Blogger<span class='new'> News</span>
        </span>
        <svg class='down' height='24' viewBox='0 0 24 24' width='24'>
          <path d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,10.5A1.5,1.5 0 0,1 13.5,12A1.5,1.5 0 0,1 12,13.5A1.5,1.5 0 0,1 10.5,12A1.5,1.5 0 0,1 12,10.5M7.5,10.5A1.5,1.5 0 0,1 9,12A1.5,1.5 0 0,1 7.5,13.5A1.5,1.5 0 0,1 6,12A1.5,1.5 0 0,1 7.5,10.5M16.5,10.5A1.5,1.5 0 0,1 18,12A1.5,1.5 0 0,1 16.5,13.5A1.5,1.5 0 0,1 15,12A1.5,1.5 0 0,1 16.5,10.5ZZ' />
        </svg>
      </a>
      <ul class='nav-sub'>

        <li>
          <a href='https://koderian.blogspot.com/' itemprop='url'>
            <span itemprop='name'>
              <svg class='muter2' style='width:20px;height:20px' viewBox='0 0 24 24'>
                <path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z' />
              </svg>Blogger</span>
          </a>
        </li>

        <li>
          <a href='https://koderian.blogspot.com/' itemprop='url'>
            <span itemprop='name'>
              <svg class='muter2' style='width:20px;height:20px' viewBox='0 0 24 24'>
                <path d='M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z' />
              </svg>CSS</span>
          </a>
        </li>

        <li>
          <a href='https://koderian.blogspot.com/' itemprop='url'>
            <span itemprop='name'>
              <svg class='muter2' style='width:20px;height:20px' viewBox='0 0 24 24'>
                <path d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z' />
              </svg>Javascript</span>
          </a>
        </li>

        <li>
          <a href='https://koderian.blogspot.com/' itemprop='url'>
            <span itemprop='name'>
              <svg class='muter3' viewBox='0 0 24 24'>
                <path d='M14.19,14.19L6,18L9.81,9.81L18,6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,10.9A1.1,1.1 0 0,0 10.9,12A1.1,1.1 0 0,0 12,13.1A1.1,1.1 0 0,0 13.1,12A1.1,1.1 0 0,0 12,10.9Z' />
              </svg>Widget</span>
          </a>
        </li>

        <li>
          <a href='https://koderian.blogspot.com/' itemprop='url'>
            <span itemprop='name'>
              <svg class='muter3' viewBox='0 0 24 24'>
                <path d='M3.14,1A2.14,2.14 0 0,0 1,3.14V5H3V3H5V1H3.14M7,1V3H10V1H7M12,1V3H14V5H16V3.14C16,1.96 15.04,1 13.86,1H12M1,7V10H3V7H1M9,7C7.89,7 7,7.89 7,9C7,11.33 7,16 7,16C7,16 11.57,16 13.86,16A2.14,2.14 0 0,0 16,13.86C16,11.57 16,7 16,7C16,7 11.33,7 9,7M18,7V9H20V11H22V9C22,7.89 21.11,7 20,7H18M9,9H14V14H9V9M1,12V13.86C1,15.04 1.96,16 3.14,16H5V14H3V12H1M20,13V16H22V13H20M7,18V20C7,21.11 7.89,22 9,22H11V20H9V18H7M20,18V20H18V22H20C21.11,22 22,21.11 22,20V18H20M13,20V22H16V20H13Z' />
              </svg>HTML</span>
          </a>
        </li>

        <li>
          <a href='https://koderian.blogspot.com/' itemprop='url'>
            <span itemprop='name'>
              <svg class='muter2' viewBox='0 0 24 24'>
                <path d='M17.45,15.18L22,7.31V19L22,21H2V3H4V15.54L9.5,6L16,9.78L20.24,2.45L21.97,3.45L16.74,12.5L10.23,8.75L4.31,19H6.57L10.96,11.44L17.45,15.18Z' />
              </svg>SEO</span>
          </a>
        </li>
      </ul>
    </li>

    <li>
      <a href='https://koderian.blogspot.com/' itemprop='url'>
        <span itemprop='name'>
          <svg style='width:20x;height:24px' viewBox='0 0 512 512'>
            <g>
              <path d='M425.19,7.392C422.246,2.784,417.158,0,411.686,0h-160c-6.208,0-11.872,3.584-14.496,9.248l-224,480    c-2.304,4.96-1.952,10.752,0.992,15.36c2.944,4.608,8.032,7.392,13.504,7.392h160c6.208,0,11.872-3.584,14.496-9.216l224-480    C428.486,17.824,428.134,12,425.19,7.392z' />
            </g>
            <g>
              <path d='M497.798,263.392c-2.912-4.608-8.032-7.392-13.472-7.392H352.678L233.222,512h146.464c6.208,0,11.872-3.584,14.496-9.216 l104.64-224C501.126,273.824,500.742,268,497.798,263.392z' />
            </g>
          </svg>Adsense</span>
      </a>
    </li>

    <li>
      <a href='https://koderian.blogspot.com/' itemprop='url'>
        <span itemprop='name'>
          <svg style='width:24px;height:24px' viewBox='0 0 24 24'>
            <path d='M21,16V4H3V16H21M21,2A2,2 0 0,1 23,4V16A2,2 0 0,1 21,18H14V20H16V22H8V20H10V18H3C1.89,18 1,17.1 1,16V4C1,2.89 1.89,2 3,2H21M5,6H14V11H5V6M15,6H19V8H15V6M19,9V14H15V9H19M5,12H9V14H5V12M10,12H14V14H10V12ZZ' />
          </svg>Template</span>
      </a>
    </li>
    <li>
      <a href='https://koderian.blogspot.com/' itemprop='url'>
        <span itemprop='name'>
          <svg style='width:24px;height:24px' viewBox='0 0 24 24'>
            <path d='M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z' />
          </svg>Guest Post</span>
      </a>
    </li>
    <li>
      <a href='https://koderian.blogspot.com/' itemprop='url'>
        <span itemprop='name'>
          <svg style='width:24px;height:24px' viewBox='0 0 24 24'>
            <path d='M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z' />
          </svg>About</span>
      </a>
    </li>
    <li class="colormode"><a href="javascript:;"><svg class="drk" height="24" viewBox="0 0 24 24" width="24">
          <path d="M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z">
          </path>
        </svg><svg class="lgt" height="24" viewBox="0 0 24 24" width="24">
          <path d="M12,18V6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z">
          </path>
        </svg><span class="drk">Mode Gelap</span><span class="lgt">Mode Terang</span></a></li>
    <li class='subs'>
      <a href='https://www.blogger.com/follow-blog.g?blogID=1730898404600797650' rel='nofollow noopener' target='_blank' title='Ikuti Blog'>
        <svg viewBox='0 0 24 24'>
          <path d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z' />
        </svg>
        <span>FOLLOW</span>
      </a>
      <a href='https://www.blogger.com/' rel='nofollow noopener' target='_blank' title='Ikuti Blog'>
        <svg class='widget12' viewBox='0 0 24 24'>
          <path d='M16,17H7V10.5C7,8 9,6 11.5,6C14,6 16,8 16,10.5M18,16V10.5C18,7.43 15.86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V4.18C7.13,4.86 5,7.43 5,10.5V16L3,18V19H20V18M11.5,22A2,2 0 0,0 13.5,20H9.5A2,2 0 0,0 11.5,22Z' />
        </svg>
        <span>BERLANGGANAN</span>
      </a>
    </li>
    <li class='footer'>
      <a href='https://koderian.blogspot.com/' itemprop='url' title='Sitemap'>
        <span itemprop='name'>Sitemap</span>
      </a>
      -
      <a href='https://koderian.blogspot.com/' itemprop='url' title='Disclaimer'>
        <span itemprop='name'>Disclaimer</span>
      </a>
      -
      <a href='https://koderian.blogspot.com/' itemprop='url' title='Privacy Policy'>
        <span itemprop='name'> Privacy</span>
      </a>
      <span class='social'>
        <a class='facebook2' href='https://www.facebook.com/' rel='nofollow noopener' target='_blank' title='Facebook'>
          <svg viewBox='0 0 24 24'>
            <path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z' />
          </svg>
        </a>
        <a class='instagram' href='https://www.instagram.com/' rel='nofollow noopener' target='_blank' title='Instagram'>
          <svg viewBox='0 0 24 24'>
            <path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z' />
          </svg>
        </a>

        <a href='https://www.twitter.com/' rel='nofollow noopener' target='_blank' title='Twitter'>
          <svg viewBox='0 0 24 24'>
            <path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z' />
          </svg>
        </a>
      </span>
      <span class='credit'>
        Copyright &#169; 2018 - 2020
      </span>
      <span class='developer'>Created <cite><b>Pintarsaurus</b>
        </cite>
      </span>
    </li>
  </ul>
</nav>
<!-- End Navigation -->
<div class='post-body' id='animated-thumbnail'>
  <h1>Cara Membuat Slide Navigation di Blogger</h1>
  <div class="post-content content_1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus, tortor sit amet rhoncus lobortis, leo libero suscipit justo, ac tincidunt ligula eros sit amet sem. Sed lobortis nisl sed diam porttitor, quis lacinia felis lacinia. In urna nulla, consectetur nec nisi vitae, laoreet pellentesque augue. Donec feugiat, velit eu imperdiet semper, ante sem suscipit nulla, congue suscipit ipsum tellus commodo ipsum. Sed pharetra orci a volutpat faucibus.
      </br> </br>
      <div class="separator wk" style="clear: both; text-align: center;">
        <a href="https://unsplash.com/photos/sya5fgN7uVo" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class='lazy' data-src="https://images.unsplash.com/photo-1542838454-d4dce2a7cfde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="640" height="367" data-original-width="1000" data-original-height="574" /></a></div>
      <div class="separator wk" style="clear: both; text-align: center;">
        <a href="https://unsplash.com/photos/rk026C0YUK4" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class='lazy' data-src="https://images.unsplash.com/photo-1549737926-4eedd67c4e9d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" width="640" height="454" data-original-width="1000" data-original-height="709" /></a></div>
      <div class="separator wk" style="clear: both; text-align: center;">
        <a href="https://unsplash.com/photos/LuRFzqHGiA4" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class='lazy' data-src="https://images.unsplash.com/photo-1549417229-aa67d3263c09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=334&q=80" width="640" height="400" data-original-width="1600" data-original-height="1000" /></a></div>
      <div class="separator wk" style="clear: both; text-align: center;">
        <a href="https://unsplash.com/photos/uCM5tNRf37E" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class='lazy' data-src="https://images.unsplash.com/photo-1549417338-6f137ab2cd20?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="640" height="427" data-original-width="1600" data-original-height="1067" /></a></div>
      <div class="separator wk" style="clear: both; text-align: center;">
        <a href="https://unsplash.com/photos/EgzpWU4aPo4" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img class='lazy' border="0" data-src="https://images.unsplash.com/photo-1549349436-8a35f484c278?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="640" height="427" data-original-width="1280" data-original-height="853" /></a></div>
  </div>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Muli:400,700");
a,
a:hover,
a:link {
  transition: 0.2s ease;
}
img {
  background: #ecf0f1;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
  transition: all 0.9s;
}
.post-body a.img,
.post-body .separator a {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
a {
  text-decoration: none;
}
body {
  background: #ecf0f1;
  background-size: 100%;
  background-repeat: no-repeat;
  font-family: "Muli", sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}
body:before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: -1;
}
.post-body {
  max-width: 768px;
  margin: 4% auto;
  padding: 20px;
  background: #fff;
  color: #222;
  font-size: 16px;
  line-height: 1.6;
  box-shadow: 0 5px 5px 1px rgba(0, 0, 0, 0.15);
}

.post-body h1,
.post-body h2 {
  display: block;
  margin: 40px auto;
  font-size: 1.7rem;
  font-weight: 700;
  color: #222;
  text-align: center;
}

.container h2 {
  margin-top: 30px;
}
/* Header */
.header {
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 10px 10px 10px;
  position: sticky;
  top: 0;
  z-index: 4;
  background: #ffffff;
}

.header-left {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  height: 48px;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -moz-user-select: -moz-none;
}

.title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.title h1 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}
/* Dark */
body.darkmode .colormode .drk,
.colormode .lgt {
  display: none;
}
body.darkmode .colormode .lgt {
  display: block;
}
body.darkmode {
  background: rgba(32, 33, 36, 0.92);
  color: #ffffff;
}
/* Nav */
.darkshadow {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 48px;
  background: rgba(0, 0, 0, 0.59);
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 5;
  transition: all 0.4s ease-in-out;
}
.darkshadow.open {
  visibility: visible;
  opacity: 1;
}
#nav-wrapper {
  font-size: 13px;
  width: 265px;
  position: fixed;
  z-index: 5;
  top: 48px;
  overflow: hidden;
  left: 0;
  background: #fff;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  bottom: 0;
  padding-top: 15px;
  -webkit-transform: translateX(-290px);
  -ms-transform: translateX(-290px);
  transform: translateX(-290px);
  transition: all 0.5s ease;
}
#nav-wrapper:hover {
  overflow-y: auto;
}
#nav-wrapper.open {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
#nav-wrapper.close {
  display: none;
}
#nav-wrapper ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#nav-wrapper li {
  display: block;
  list-style: none;
  position: relative;
}
#nav-wrapper li.first {
  background: #d0d0d0;
  border-radius: 0 50px 50px 0;
  margin: 0 20px 0 0;
  transition: all 0.5s ease;
  display: none;
}
#nav-wrapper > ul > li > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 12px 0 13px 15px;
  color: #333333;
  font-size: 13px;
}
#nav-wrapper li a.nav-submenu {
  padding: 10px 15px;
  padding-bottom: 12px;
}
#nav-wrapper li ul.nav-sub {
  display: none;
}
#nav-wrapper li li a {
  display: block;
  position: relative;
  padding-left: 4em;
  line-height: 40px;
  color: #657786;
}
#nav-wrapper a:hover {
  color: #6495ed;
}
#nav-wrapper svg.down {
  margin-right: 0;
  margin-left: 15px;
  display: block;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
#nav-wrapper li.open svg.down {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
#nav-wrapper svg {
  height: 20px;
  width: 20px;
  margin-right: 15px;
  overflow: hidden;
  opacity: 0.7;
  fill: currentColor;
}
#nav-wrapper > ul > li:not(.colormode) > a > span:not(.new) {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1;
  flex: 1 1;
}
#nav-wrapper > ul > li.colormode > a > span {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex: 1 1;
  flex: 1 1;
}
#nav-wrapper > ul > li > a > span > span.new {
  background: #e1f5fe;
  color: #004c88;
  line-height: normal;
  margin-left: 10px;
  font-size: 8px;
  padding: 3px 10px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
}
@media only screen and (max-width: 480px) {
  #nav-wrapper .profile img {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    margin-left: 1px;
    border-radius: 20px;
  }
}
@media screen and (max-width: 600px) {
  #nav-wrapper .subs {
    display: flex;
    margin-left: 24px;
    margin-top: 10px;
  }
  #nav-wrapper .subs a {
    font-size: 11px;
    margin-right: 10px;
    width: auto;
    height: auto;
    padding: 7px 10px;
    margin-top: 0;
    background-color: #e1f5fe;
    color: #666;
    border-radius: 20px;
  }
  #nav-wrapper .subs a:hover {
    background-color: #6495ed;
  }
  #nav-wrapper .subs svg {
    width: 12px;
    height: 12px;
    margin-right: 3px;
    margin-top: -1px;
  }
  #nav-wrapper .subs button {
    flex-grow: 1;
    margin-top: 0;
    width: auto;
    height: auto;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #657786;
    border-radius: 20px;
    border: none;
    margin-right: 23px;
    color: #fff;
    outline: none;
  }
  #nav-wrapper li.footer a {
    font-size: 11px;
    font-weight: 400;
    color: #657786;
    display: inline-block;
    padding: 0;
  }
  #nav-wrapper .footer {
    display: block;
    margin-top: 14px;
    margin-left: 24px;
  }
  #nav-wrapper .footer .social {
    display: flex;
    margin: 7px 0;
  }
  #nav-wrapper .footer .credit {
    display: block;
    color: #657786;
  }
  #nav-wrapper .footer .developer {
    color: #657786;
  }
}
#nav-wrapper .subs {
  display: flex;
  margin-left: 15px;
  margin-top: 10px;
}
#nav-wrapper .subs a {
  font-size: 11px;
  margin-right: 10px;
  width: auto;
  height: auto;
  padding: 7px 10px;
  margin-top: 0;
  background-color: #e1f5fe;
  color: #666;
  border-radius: 20px;
}
#nav-wrapper .subs a:hover {
  background-color: #6495ed;
  color: #fff;
}
#nav-wrapper .subs svg {
  width: 12px;
  height: 12px;
  margin-right: 3px;
  margin-top: -1px;
}
#nav-wrapper .subs button {
  flex-grow: 1;
  margin-top: 0;
  width: auto;
  height: auto;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #657786;
  border-radius: 20px;
  border: none;
  margin-right: 23px;
  color: #fff;
  outline: none;
}
#nav-wrapper li.footer a {
  font-size: 11px;
  font-weight: 400;
  color: #657786;
  display: inline-block;
  padding: 0;
}
#nav-wrapper .footer {
  display: block;
  margin-top: 14px;
  margin-left: 15px;
}
#nav-wrapper .footer .social {
  display: flex;
  margin: 7px 0;
}
#nav-wrapper .footer .credit {
  display: block;
  color: #657786;
}
#nav-wrapper .footer .developer {
  color: #657786;
}
.kotak9 {
  fill: #fff;
  margin-top: -4px;
  display: block;
}
/* Lazy */
.wk {
  background: #eeeeee
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 5%,
      rgba(255, 255, 255, 0.75) 20%,
      rgba(255, 255, 255, 0) 30%
    );
  background-size: 100% 100%;
  animation: wk 3s linear infinite;
  -moz-animation: wk 3s linear infinite;
  -webkit-animation: wk 3s linear infinite;
  -o-animation: wk 3s linear infinite;
}
.wk img {
  opacity: 0;
  transition: 1s all;
}
@keyframes wk {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
@-webkit-keyframes wk {
  0% {
    background-position: -50% 0;
  }
  100% {
    background-position: 50% 0;
  }
}
@-moz-keyframes wk {
  0% {
    background-position: -50% 0;
  }
  100% {
    background-position: 50% 0;
  }
}

              
            
!

JS

              
                $(document).ready(function () {
  $(".menu-toggle").click(function () {
    $("#nav-wrapper, .darkshadow").toggleClass("open");
  });
  $(".darkshadow").click(function () {
    $("#nav-wrapper,.darkshadow").removeClass("open");
  });
  var d = function (a, b) {
    this.el = a || {};
    this.multiple = b || false;
    var c = this.el.find(".nav-submenu");
    c.on(
      "click",
      {
        el: this.el,
        multiple: this.multiple
      },
      this.dropdown
    );
  };
  d.prototype.dropdown = function (a) {
    var b = a.data.el;
    ($this = $(this)), ($next = $this.next());
    $next.slideToggle();
    $this.parent().toggleClass("open");
    if (!a.data.multiple) {
      b.find(".nav-sub").not($next).slideUp().parent().removeClass("open");
    }
  };
  var e = new d($("#nav-wrapper"), false);
});
// Dark Mode
$("body").toggleClass(localStorage.toggled);
$(".colormode a").click(function () {
  // Mendeklaraasikan localStorage
  if (localStorage.toggled != "darkmode") {
    $("body").toggleClass("darkmode", true);
    localStorage.toggled = "darkmode";
  } else {
    $("body").toggleClass("darkmode", false);
    localStorage.toggled = "";
  }
});

              
            
!
999px

Console