Fix sliding issue with side navigation bar

Question

I am trying to create my portfolio website. I am all set to publish it but having one small issue. I have side navigation bar but the animation of sliding in and out is a bit clunky. When I mouse hover over an element, it slides up which ends up putting my cursor on a different icon. For eg. If I mouse hover over home button, after the animation of sliding finishes, mouse is over work icon as all the icons have moved upwards. I am trying to identify the issue by modifying many values but nothing seems to give me right result. I have very limited knowledge of html and css so I try to find things I needs for my portfolio and modify it but this one is a bit tricky. Here is HTML code :

body {
  word-spacing: normal;
  letter-spacing: normal;
  text-rendering: optimizeLegibility;
  line-height: 1.8em;
  font: 16px Georgia, Arial, Sans-Serif;
  color: #636363;
  line-height: 24px;
}


p svg {
  display: inline-block;
  vertical-align: middle;
}

a {
  font-size: 1em;
  font-weight: 400;
  line-height: 100%;
  color: #3A53BD;
}

a:hover {
  text-decoration: none;
}

a {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
  text-transform: uppercase;
  margin: 1.4em 0 1.4em;
  display: inline;
}

/* ----------- CodePen styles ----------- */
.codepen-style {
  padding: 1em 0 0 0;

}

/* Structure MOBILE FIRST
------------------------------------- */



/* Navigation
 ----------------- */

.navigation {
  height: 10px;
  width: 100%;
  display: block;
  box-shadow: #D4D4D4 -1px 1px, #D4D4D4 -2px 2px, #D4D4D4 -3px 3px, #D4D4D4 -4px 4px, #D4D4D4 -5px 5px, #D4D4D4 -6px 6px;
  transform: translate3d(4px, 0px, 0);
  background-color: #D4D4D4;

}

.navigation li {
  width: 100%;
}

.navigation a {
  display: block;
  padding: 0.1em 0 0.5em 1em;
  margin: 0;
  line-height: 2em;
  font-weight: 400;
  color: #333;
  text-transform: uppercase;
}

.navigation a:hover {
  background-color: #666;
  color: #333;
  box-shadow: -1px 1px, -2px 2px, -3px 3px, -4px 4px;
  transform: translate3d(4px, -4px, 0);
  transition: .15s;
}

.navigation a>span:after {
  content: " /";
  padding-left: 0.2em;
}

.navigation li:nth-child(1) a {
  background-color: #00FF96;
}

.navigation li:nth-child(2) a {
  background-color: #FF6524;
}

.navigation li:nth-child(3) a {
  background-color: #FFA300;
}

.navigation li:nth-child(4) a {
  background-color: #FFCD00;
}

.navigation li:nth-child(1) a:hover,
.navigation li:nth-child(2) a:hover,
.navigation li:nth-child(3) a:hover,
.navigation li:nth-child(4) a:hover {
  background-color: #666;
}

.navigation svg {
  width: 30px;
  height: 1.5em;
  vertical-align: text-top;
}

svg {
  opacity: 1;
  fill-opacity: 1;
  fill-rule: nonzero;
  vertical-align: top;
  fill: #333;
}

.navigation a:hover svg {
  fill: #333;
}

.navigation span {
  display: inline-block;
  padding-left: 0.5em;
}

/* END Navigation 
 ----------------- */


/* Structure DESKTOP
------------------------------------- */


  body {
    padding: 2em 0 0 4em;
  }


  /* Navigation
 ----------------- */

  .navigation {
    transition-delay: 0s;
    transition-duration: 0.4s;
    transition-property: all;
    transition-timing-function: line;

    box-shadow: 0 0;
    transform: translate3d(0px, 0px, 0);
  }

  .navigation a:hover {
    transition-delay: 0s;
    transition-duration: 0.2s;
    transition-property: all;
    transition-timing-function: line;

    box-shadow: #303030 -1px 1px, #333 -2px 2px, #2E2E2E -3px 3px, #2B2B2B -4px 4px, #292929 -5px 5px, #262626 -6px 6px;
    transform: translate3d(6px, 0px, 0);
  }

  .navigation {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 4em;
    background-color: #313;
  }

  .navigation:hover {
    position: fixed;
    width: 10em;
  }

  .navigation ul {
    display: block;
  }

  .navigation li {
    display: block;
  }

  .navigation a {
    padding: 0.8em 0.6em 0.8em 1em;
    color: #F1F1F1;
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
  }

  .navigation li:nth-child(1) a,
  .navigation li:nth-child(2) a,
  .navigation li:nth-child(3) a,
  .navigation li:nth-child(4) a {
    background-color: transparent;
  }

  .navigation a:hover {
    display: inline-block;
    padding: 0 0 0 1em;
    margin: 0;
    line-height: 2em;
    font-weight: 400;
    width: 6em;
  }

  .navigation:hover a {
    display: inline-block;
    width: 9em;
    padding: 0.8em 0 0.8em 1em;
  }

  .navigation span {
    text-indent: -200px;
  }

  .navigation:hover span {
    display: inline-block;
    text-indent: 0;
  }

  .active {
    background-color: #F1F1F1;
  }

  .navigation a>span:after {
    color: #616;
  }

  .navigation a:hover>span:after {
    color: #313;
  }

  .navigation svg {
    width: 30px;
    height: 1em;
    vertical-align: top;
  }

  .navigation svg:hover {
    fill: #333;
  }

  .home {
    fill: #00FF96;
  }

  .work {
    fill: #FFA300;
  }

  .lab {
    fill: #FFCD00;
  }

  .contact {
    fill: #F2F600;
  }

  /* Menu position on the navigation bar */
  .menu {
    left: 0;
    position: fixed;
    height: auto;
    width: auto;
  }

  .menu {
    top: 0;
  }

  /* END Menu position on the navigation bar */

}



        
            Home
            
Work
            CV
            Contact

I will be very thankful if someone can tell me whats wrong and how can I solve this issue.

user_10921014 · Answer

Try adding this CSS. Hope it helps.

.navigation li img, .navigation li svg{display:block}

user_7950703 · Answer

Two things that i find here that need to be addressed.

As suggested in the above answer by Kevin, use display: block for svg elements in the nav bar. ie

.navigation svg { display:block; }
use a definitive height for your anchor tags. You may not see a problem right now, but as your text starts to grow, it would wrap and again you would find the icons jumping around out of position. According to me

.navigation li a { height:50px; }

should be fine Hope that helps!!!!

Fix sliding issue with side navigation bar

2 Answers