Why is my icon moving when I click it?

HTML & CSS
1

I am trying to figure out why my menu-icon is getting moved to the side when I click on it in mobile view.
When I inspect the elements it does not look like any of them are overlapping each other, so what is causing this?
This is the test page I made for the navigation.
https://www.handig.dk/testing/index.html

I put it into codepen too, but the navbar does not seem to work there. But then at least you can see the whole code.

2

You have set the width for the whole menu as 25px and clearly the menu is much wider than that. You also don’t do anything to centre the toggle item itself either.

I would remove the width from .nav-mobile then you can centre the toggle in the available space. You also have more padding on one side than the other.

Try these changes:
e.g. From here down.

/* Mobile navigation */
.nav-mobile {
  display: none;
  height: 35px;/* ???? */
  /*width: 25px;*/
}

@media only screen and (max-width: 798px) {
  .nav-mobile {
    display: block;
    position:relative;
  }
  nav {
    width: 100%;
    padding: 70px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }
  nav ul li ul li a {
    padding-left: 30px;
  }

  .nav-dropdown {
    position: static;
  }
}
@media screen and (min-width: 799px) {
  .nav-list {
    display: block !important;
  }
}
 #nav-toggle{
    position:relative;
    padding:10px 35px 16px;
    display:table;
    margin:-35px auto 0;
  }
#nav-toggle span{margin:auto;left:0;right:0;}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #333;
  position: absolute;
  display: block;
  content: "";
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before,
#nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

You didn’t link to jquery in the settings :slight_smile:

2 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.