CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tebel Kiser
Tebel Kiser

Reputation: 3

Issue with hover movement on navigation bar

I am working on a fictitious website for my portfolio and am stuck on why the hover is moving the words. It moves every time I hover over the word.

Here is the code:

 nav{
 position:fixed;
 z-index:1000;
 top:0;
 bottom:0;
 width:150px;
 background-color:black;
 color:white; 
 line-height:60px;
  }

 nav a{
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.3s;
  }


  nav ul{
 list-style-type:none; 
 margin-top:100px;
 text-align:center;}

  nav ul li a{
   text-decoration: none;
   display:inline-block;
   text-align:center;
   color:#fff;
    }

 nav a:hover {
 background-color: #EBEBEB;
 color: black;
 margin: 0.5em 0;
 display:block;
 cursor:pointer;
 }

 nav a: hover: after{
                 text-decoration: none;
                 display:inline-block;
                 text-align:center;
                 color:#fff;
                  }

I really appreciate any feedback.

Upvotes: 0

Views: 107

Answers (1)

Aziz
Aziz

Reputation: 7783

nav a:hover { background-color: #EBEBEB; color: black; margin: 0.5em 0; display:block; cursor:pointer; }

When you change the margin, the element will move. Change it to margin:0;

 nav a:hover {
    background-color: #EBEBEB;
    color: black;
    margin: 0;
    display:block;
    cursor:pointer;
 }

If you want some sort of movement effect to happen without breaking the layout, you can try playing with position:relative and top:0.5em

Upvotes: 3

Related Questions