розовое меню с сердечком

by Denis Tverdokhlebov

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<header>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <nav role='navigation'>
    <ul>
      <li class="navlink"><a href="#">This</a></li>
      <li class="navlink"><a href="#">Menu</a></li>
      <li class="navlink"><a href="#">Will</a></li>
      <li id="heart-trigger" class="heart heart-trigger"><span class="fa fa-heart"></span></li>
      <li class="heart"><span class="fa fa-heart"></span></li>
      <li class="navlink"><a href="#">Make</a></li>
      <li class="navlink"><a href="#">You</a></li>
      <li class="navlink"><a href="#">Smile</a></li>
    </ul>
  </nav>
</header>

SCSS

body {
  background: #EF798A;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #4A4860;
  z-index: 10000;
  border-bottom: 4px solid #323042;
}

nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  
  @media all and (min-width: 545px) {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
   
  li {
    display: none;
    
    @media all and (min-width: 545px) {
    display: block;
    
    }
  }
  
  
  
  a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-family: Futura,Trebuchet MS,Arial,sans-serif; 
  font-size: 0.7em;
  color: #FFE4FA;
  text-align: center;
  padding: 14px 30px;
  transition: background .25s, box-shadow .15s;
  
    &:hover {
   color: #4A4860;
   background: #FFC4EB;
   box-shadow: 0px 4px 0px 0px #BB8EAC;
  }
  @media all and (min-width: 545px) {
   padding: 20px;
  }
    
}
}

.heart {
  display: none;
  margin: 0 auto;
  order: -1;
  padding: 12px 30px;
  
  @media all and (min-width: 545px) {
    display: block;
    order: 0;
    margin: initial;
  }
}

.heart-trigger {
  
  display: block;
  margin: 0 auto;
  order: -1;
  padding: 12px 30px;
  
  @media all and (min-width: 545px) {
    display: none;
  }
}

.visible {
  display: block;
  transform: scale(1);
}

.fa-heart {
  font-size: 1.8em;
  color: #FFC4EB;
  transition: all .2s ease-in-out;
  
  &:hover {
    color: #DE6E4B;
    transform: scale(1.3);
  }
  
  @media all and (min-width: 545px) {
    font-size: 1.2em;
  }
}

JavaScript

$(".heart").hover(function () {
    $(this).toggleClass("animated bounceOut infinite");
 });

/*$("#heart-trigger").click(function () {
    $(".navlink").slideToggle ("fast" );
 });*/

$("#heart-trigger").click(function () {
    $(".navlink").toggleClass("visible");
 });

//If someone knows how to resolve the problem without "!important" statement, please let me know! 
// BUG : 
// 1. Resize to mobile view
// 2. Open - close menu
// 3. Resize to dekstop view => Navlinks are hidden, because of slideToogle function