<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="menuToggle">Menu</div> <ul> <li> <a href="#"> <div class="icon"> <i class="fa fa-home" aria-hidden></i> <i class="fa fa-home" aria-hidden></i> </div> <div class="name"><span data-text="home">Home</span></div> </a> </li> <li> <a href="#"> <div class="icon"> <i class="fa fa-file-text-o" aria-hidden="true"></i> <i class="fa fa-file-text-o" aria-hidden="true"></i> </div> <div class="name"><span data-text="About">About</span></div> </a> </li> <li> <a href="#"> <div class="icon"> <i class="fa fa-cogs" aria-hidden="true"></i> <i class="fa fa-cogs" aria-hidden="true"></i> </div> <div class="name"><span data-text="Services">Services</span></div> </a> </li> <li> <a href="#"> <div class="icon"> <i class="fa fa-picture-o" aria-hidden="true"></i> <i class="fa fa-picture-o" aria-hidden="true"></i> </div> <div class="name"><span data-text="Portfolio">Portfolio</span></div> </a> </li> <li> <a href="#"> <div class="icon"> <i class="fa fa-users" aria-hidden="true"></i> <i class="fa fa-users" aria-hidden="true"></i> </div> <div class="name"><span data-text="Team">Team</span></div> </a> </li> <li> <a href="#"> <div class="icon"> <i class="fa fa-envelope" aria-hidden="true"></i> <i class="fa fa-envelope" aria-hidden="true"></i> </div> <div class="name"><span data-text="Contact">Contact</span></div> </a> </li> </ul>

body { margin:0; padding:0; font-family: sans-serif; background: #e91e63; } ul { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; padding: 20px 0px; background: #fff; display: flex; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.3); } ul li { list-style: none; text-align: center; display: block; border-right: 1px solid rgba(0,0,0,.2); } ul li:last-child { border-right: none; } ul li a { text-decoration: none; padding: 0 50px; display: block; } ul li a .icon { width: 40px; height: 40px; text-align: center; overflow: hidden; margin: 0 auto 10px; } ul li a .icon .fa { width: 100%; height: 100%; line-height: 40px; font-size: 34px; transition: 0.5s; color: #000; } ul li a .icon .fa:last-child { color: #e91e63; } ul li a:hover .icon .fa { transform: translateY(-100%); } ul li a .name { position: relative; height: 20px; width: 100%; display: block; overflow: hidden; } ul li a .name span { display: block; position: relative; color: #000; font-size: 18px; line-height: 20px; transition: 0.5s; } ul li a .name span:before { content: attr(data-text); position: absolute; top: -100%; left: 0; width: 100%; height: 100%; color: #e91e63; } ul li a:hover .name span { transform: translateY(20px); } .menuToggle { position: fixed; top: 30px; right: 30px; background: #fff; padding: 10px; font-weight: bold; border-radius: 4px; cursor: pointer; display: none; } @media (max-width: 992px) { .menuToggle { display: block; } ul { padding: 0; width: 90%; display: block; overflow: hidden; transition: 0.5s; transform: translate(-50%,-50%) scaleY(0); transform-origin: top; } ul.active { transform: translate(-50%,-50%) scaleY(1); } ul li { border-bottom: 1px solid rgba(0,0,0,0.2); padding: 10px 0; display: block; } ul li:last-child { border-bottom: none; } ul li a { padding: 0 20px; } ul li a.icon { display: inline-block; float: left; margin: 0 auto; } ul li a .name { width: auto; display: inline-block; margin: 10px; } }

$('.menuToggle').click(function(){ $('ul').toggleClass('active'); });