CODEWITHSUNDEEP
css
nellygrl
nellygrl

Reputation: 657

Stop Hover Effect from Moving Other Elements Down on Page

I'm working on my navigation and I've added an effect that when you hover over a link, a blue border is added to the bottom. It works, but the only problem I'm having is that when you hover over a link, the border pushes all the other elements on the page down 3 pixels (the size of the border).

If anyone could clue me in on how to fix this it would be greatly appreciated. Here's the relevent code:

HTML

<div id="nav" class="wrapper">
  <div class="site-navigation">
    <a href="#">About</a>
    <a href="#">Work</a>
    <div class="site-title">Noelle Devoe</div>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
  </div>
</div>

CSS

.wrapper{
    width: 1000px;
    background-color: rgb(255,255,255);
    margin: 0 auto;
    overflow: hidden;
}

.site-navigation {
    text-align: center;
    overflow:hidden;
}

.site-navigation a{
    font-family: 'Arvo', serif, Georgia;
    width: 125px;
    float: left;
    padding: 50px 0 50px 0;
    letter-spacing: 4px;
    text-transform: uppercase;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    color: rgb(82,82,82);
}

.site-navigation a:hover{
    font-weight: bold;
    border-bottom: 3px solid rgb(4,141,195);
    text-shadow: rgb(200, 200, 200) 1px 1px 0px;
}

Upvotes: 2

Views: 8476

Answers (3)

user15875391
user15875391

Reputation:

Simple way to solve the hover problem!

<div class="main">
  <div class="box"></div>
</div>



.main{
        height: 205px;
        width: 405px;
    }
    .box{
        height: 200px;
        width: 400px;
        border:1px solid rgb(0, 0, 0);
        transition: 
        0.3s;
        
    }
    .box:hover{
        margin-left: 5px;
        margin-bottom: 5px;
        box-shadow: -5px 5px black;
    }

Upvotes: 0

TimSPQR
TimSPQR

Reputation: 2984

How about adding below CSS:

border-bottom: 3px solid transparent;

to 

.site-navigation a

Upvotes: 1

j08691
j08691

Reputation: 207901

One easy fix is to add a transparent border when the element isn't being hovered.

Add border-bottom: 3px solid transparent; to .site-navigation a.

.site-navigation a {
    font-family:'Arvo', serif, Georgia;
    width: 125px;
    float: left;
    padding: 50px 0 50px 0;
    letter-spacing: 4px;
    text-transform: uppercase;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    color: rgb(82, 82, 82);
    border-bottom: 3px solid transparent;
}

Upvotes: 9

Related Questions