Our entire footer shifts left because of one link

[agorder]

If you visit our website, go to the footer and hover over “Leadership Team,” the entire footer shifts to the left. I realize it is because of the lengthier text and the addition of a border to the left of the text on hover. I’ve tried playing around with the styling and am unable to get it to work properly. What’s more, I tried to strip all styles in the builder but even with all the styles removed, that border and padding on hover is still being applied. Is this a default behavior with the theme? If so, is there a way to undo it? Thanks

[prakash_s]

Hello @agorder,

Thanks for writing to us.

I checked your site it seems that you have added custom CSS code for the hover effect, please note it is a larger text and on hover, it adds the border of 2px and padding-left of 6px. To disable this you need to remove your custom CSS code. It seems that you added this code with multiple CSS selectors.

For a quick fix, you can override the style by this code under the Theme option —>CSS.

#widget-footer ul li a:hover {
border-left: none !important;
padding-left: 0px !important;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[agorder]

Ahh, the issue was that the styles were being added not just from the CSS section of our Footer component but from the home page’s CSS as well. Thank you. Issue resolved.

[prakash_s]

Hello @agorder,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks