Style Responsive Navigation With Pure CSS – Slackie.css

Category: CSS & CSS3 , Menu & Navigation , Recommended | February 22, 2016
Views Total:2,336 views
Official Page:Go to website
Last Update:February 22, 2016

Preview: Style Responsive Navigation With Pure CSS – Slackie.css


Slackie.css is a pure CSS implementation of a responsive, mobile-friendly site navigation inspired from

How to use it:

Include the Slackie.css in the head section of the html document.

<link href="dist/slackie.css" rel="stylesheet">

Include the Font Awesome 4 for menu toggle icons (Optional).

<link rel="stylesheet" href="font-awesome.min.css">

Create a desktop navigation like this:

<nav role="navigation" class="desktop-slackie">
  <a href="#" class="logo">
  <a href="#" class="slackie-action-btn">
      Action Button
  <a href="#mobile-nav" class="mobile-nav-trigger icon">
      <i class="fa fa-plus"></i>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>

Create a mobile navigation like this:

<nav role="navigation" id="mobile-nav" class="mobile-slackie">
  <a href="##" class="logo">Brand</a>
  <a href="#close" class="close-slackie-mobile">
    <i class="fa fa-close"></i>
  <li><a href="##">Home</a></li>
  <li><a href="##">About</a></li>
  <li><a href="##">Contact</a></li>
  <a href="##" class="slackie-action-btn">
  Action Button

That’s it.

You Might Be Interested In:

Leave a Reply