Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts

    Question My NAV links shift down on hover, and shouldn't, please help

    I recently added a border-top to my NAV links for hover purposes, and now it moves my NAV links down each time you hover over it. I tried playing with nav margins, but i only seem to make it worse. How can I fix this?

    Code:
      #nav a:hover{
        border-top:solid 4px #3b5998; 
        color:#b7c3e6; 
        padding: 6px}

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Well, obviously the negative margin must be of the same value as the border width to make it stay in place. But it will still jiggle on hover because of the CSS transition that is applied to the links: It will animate border width and margin but due to differences in rounding and applying the pixel values this doesn’t all happen at the same time. I suppose you only need to animate the text color so that border and margin get applied immediately, so you need to change the transition property:
    Code:
    body .main-nav li > a,
    body .main-nav li > a:visited {
      color: #3b5998;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
    }
    Change “all” to “color”.

    You can also animate the border color but that will require you to write the long winded CSS where you specify each property separately. An example:
    Code:
    body .main-nav li > a, body .main-nav li > a:visited {
      color: #3B5998;
      transition-delay: 0s;
      transition-duration: 0.2s;
      transition-property: color, border-color;
      transition-timing-function: ease-in-out;
    }
    You’d have to repeat that for every experimental vendor prefix.
    Last edited by VIPStephan; 08-30-2013 at 10:25 AM.

  • Users who have thanked VIPStephan for this post:

    jddowell (08-30-2013)

  • #3
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    Change “all” to “color” = gets rid of the gradual fade though?

    I had this same issue a long time ago, and was told (can't remember where) that i just needed to change one of the margins to the opposite or something, and it fixed it.

    however, i removed the line for design reasons. Now i wanted to add it back.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •