-1

I am trying to create a spin animation for my hamburger icon and it refuses to work for whatever reason. I have even tried putting it as ".hamburger a:hover" and nothing seems to work. Can anyone find the solution please?

CSS

enter image description here

HTML

enter image description here

Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
Philo Bebzz
  • 3
  • 1

2 Answers2

0

  1. Change .hamburger :hover to .hamburger:hover - no space.

  2. .hamburger a means an element with a hamburger class that contains inside it an a tag. You dont have that in your code. Change .hamburger a to a.hamburger - That measns an a tag with the hamburger class.

YTG
  • 956
  • 2
  • 6
  • 19
  • Hello, I've done both ways, nothing changed. Also when changing the padding in the a.hamburger class, it also does not have any affect whatsoever. – Philo Bebzz Apr 19 '21 at 09:36
0

Use the CSS display: inline-block or display: block so the element will have a width and height.

.hamburger {
  position: relative;
  font-size: 40px !important;
  padding: 0px !important;
  padding-left: 30px !important;
  text-align: left !important;
  color: #000;
  text-decoration: none;
  display: inline-block;
  transition: 0.75 ease-in-out !important;
}

.hamburger:hover {
  transform: scale(1.1) rotate(90deg) !important;
}
<div class="wrapper">
  <div class="header">
    <a class="hamburger" href="#" onclick="dropdown()"> &equiv; </a>
  </div>
nad
  • 1,068
  • 6
  • 16