Need Fix for Shifting Hyperlinks on Hover (in Footer)

Anyone know why the hyperlinks are shifting slightly on hover — and how to fix. I've only seen this happen in my footer so far.

URL: upliftingme.co

 

They are shifting because you've added custom CSS that adds a border to the bottom of the relevant elements. Adding borders with a px of one or more takes space and so the elements shift.

If you want to continue using a border then you need to add a border with transparent color for the non-hover state.

Add the following to Website > Website Tools > Custom CSS.

h1 a,
h2 a,
h3 a,
h4 a,
p a

  {
  
    border-bottom : 1px solid transparent;
    
    }

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
p a:hover

  {
  
    border-bottom-color : currentColor;
    
    }

You can also use LESS syntax which can save some typing and make maintenance easier.

// uses LESS syntax

h1,
h2,
h3,
h4,
p

  {
  
    a {
    
      border-bottom : 1px solid transparent;
      
      &:hover {
      
        border-bottom-color : currentColor;
        
        }
        
      }
      
    }

Alternately you could use the text-decoration propertly.

h1 a span:hover,
h2 a span:hover,
h3 a span:hover,
h4 a span:hover,
p a span:hover

  {
  
    text-decoration : underline;
    
    }

This is for v7.1.

Let us know how it goes.

Hey @creedon thanks for the code.  I tried the first batch with solid transparent but still no change. 

What I don't understand though is why are only the footer links shifting? None of the other links on the site (homepage or anywhere else) shift.

Quote

I tried the first batch with solid transparent but still no change.

I do not see the code installed. My local testing.

When the code is installed, we can then take a look at why it might not be working.

Quote

What I don't understand though is why are only the footer links shifting?

It's probably the structure of the HTML is different between the footer and other sections.

@creedon sorry about that. Okay I added it back in—specifically the code listed below:

h1 a,
h2 a,
h3 a,
h4 a,
p a

  {
  
    border-bottom : 1px solid transparent;
    
    }

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
p a:hover

  {
  
    border-bottom-color : currentColor;
    
    }

It appears you've changed the default text style for links so the code I provided is no longer of use. Before you had turned of the text-decoration underline.