Hover effect on links in footer

Hi,

I use this code for navigation links (header).

But can i use the same in footer with some adjustments and add-on ?

https://sf.digital/squarespace-solutions/add-a-hover-effect-to-the-squarespace-71-navigation

You could do this, but you'll need to specifically target the block or link type that you want this effect on. Can you share your website URL and the links you want the effect on?

2 hours ago, jacobtdb said:

I use this code for navigation links (header).

But can i use the same in footer

Hi @jacobtdb. I wrote the guide that you're using 🙂.

To add the effect to links in the footer, you'll want to substitute "#footer-sections a" in place of ".header-nav-item". If you experience any difficulties, do post back with a link to your site as it isn't included by default when you post.

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi @paul2009 yes i know 😊 Thanks. 

Now you can update your code and page with footer links also then 😉

Here is the access to test-site:

https://lumega-new.squarespace.com/
PW: TDBLumtest
Thanks.

On 12/18/2023 at 9:57 AM, Ziggy said:

You could do this, but you'll need to specifically target the block or link type that you want this effect on. Can you share your website URL and the links you want the effect on?

Here is the access to test-site:

https://lumega-new.squarespace.com/
PW: TDBLumtest

Is this code also possible in dropdown links ?

Try under "About us":

https://en.lumega.eu/

On 2/13/2024 at 3:09 AM, jacobtdb said:

Is this code also possible in dropdown links ?

 

Try under "About us":

https://en.lumega.eu/

Use this code

div.header-nav-folder-content a {
  position: relative;
}

div.header-nav-folder-content a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: orange;
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

div.header-nav-folder-content a:hover::before {
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
}

Great. Can we change lenght of underline so it fits the lenght of the text?

On 2/16/2024 at 10:07 PM, jacobtdb said:

Great. Can we change lenght of underline so it fits the lenght of the text?

 

 

With header dropdown, use this CSS code

div.header-nav-folder-item a {
    display: inline-block !important;
}