Responsive navbar

index.html

    <div class="logo-div">
        <div class="btn-container">
            <div class="menu-btn top"></div>
            <div class="menu-btn center"></div>
            <div class="menu-btn bottom"></div>
        </div>
    </div>
    <nav class="my-nav">
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Galery</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Special Offers</a></li>
        </ul>
    </nav>
   <div>
         <p>in order to see all the three viewports you may have to open it outside the 'codepen'!</br>
just shrink your browser window:)
</p>
<a id=name href="http://tomdevelopment.com"><p>www.tomdevelopment.com</p></a>
</div>

responsive-navbar.markdown

Responsive navbar

A Pen by Tomasz Sporys on CodePen.

License.

script.js

$(function() {
  $(".btn-container").on("click", function() {
    $(this).toggleClass("clicked");
    $(".my-nav ul").slideToggle("open");
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.css

body{
  background: #c0c0aa;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1cefff, #c0c0aa);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1cefff, #c0c0aa); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding: 0;
  margin: 0;
   color: #fff;
  text-align: center;
}
#name{
  position: relative;
  bottom: 0;
}

p{
  margin-top: 5em;
}

a{
    text-decoration: none;
    font-family: sans-serif;
    font-weight: 500;
    color: #fff;
}
ul,ol{
    list-style: none;
}

.wrapper{
    position: relative;
}

.my-nav{
    margin: 0 auto;
    max-width: 1000px;
    
}  

.my-nav ul{
      justify-content: space-around;
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      border:1px solid white;
      border-radius: 5px;
      clear: right;
      
}

.my-nav li{
    text-align: center;
    flex: 1;
   
}

li:last-child{
    background: rgba(0 , 122, 204, 0.1);
  
}

.my-nav a{
      color: #fff;
      display: block;
      padding: 20px 5px;
}


.my-nav li:hover{
     background: rgba(255, 255, 255, 0.4);
}

.my-nav li:active{
     background: rgba(255, 255, 255, 0.3);
}

.logo-div{

    height: 4.8em;
}

/* button*/
.btn-container{
   float: right;
   margin: 1.4em 1.4em 2.5em 0;
}

.menu-btn{
    visibility: hidden;
    height: 0.6em;
    width: 4em; 
    background: #fff;
    border-radius: 10px;
    transition: all 0.5s ease;
    transform-origin: 22%;
}

.center{
    margin: 3px 0;
}


.clicked .top{
    transform: rotate(45deg);
}

.clicked .bottom{
    transform: rotate(-45deg);
}

.clicked .center{
    opacity: 0;

}

.my-nav ul.open{
    display: flex; 
    
}




/*  end of button*/






    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 400px) {

        .menu-btn{
            visibility: visible;
        }

        .my-nav li{
            flex-basis: 100%;
            border-bottom: 1px solid white;
           
        }

        .my-nav ul{
            border: none;
            display: none;
             
        }

        .logo-div{
            -webkit-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.67);
            -moz-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.67);
            box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.67);
        }


    }

    @media only screen and (min-width: 401px) and (max-width : 590px) {
        .my-nav li{
            flex-basis: 50%;
           
        }

        li:last-child{
            border-top: 1px solid white;
        }

    }

    
    @media only screen and (min-width: 591px){

        li:last-child{
            border-left: 1px solid white;
        }