Jump to content

Changing the Hover Colour in Footer only

Recommended Posts

Hello. I have a yellow hover in my nav bar and in my footer I want a grey hover. This is the code and it doesn't seem to work. I am getting a hover in the footer but it appears to be a pale yellow. Any help is greatly appreciated.

Here's the code that I am using for the nav and the footer

/* Remove 'Featured' Heading from Summary Block Carousel */
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-heading {
  display: none;}

/* remove underline on nav */
.header-nav-item--active a {
  background-image: none !important;
}

/* Nav item hover color */
.header-nav-item a:hover {
    color:  #ffd54f !important;
}

/* Nav item active color */
.header-nav-item--active a {
  color: #ffd54f !important;
}

/* Footer Link - Normal */
.footer a {
    color: white;
}
/* Footer link - Hover */
.footer a:hover {
    color: #424147 !important;
}
/* Footer Link - Active */
.footer a:active {
    color: #424147;
}

p a {  background-image: none !important;  }

Link to comment
28 minutes ago, BrownKatUK said:

Hello. I have a yellow hover in my nav bar and in my footer I want a grey hover. This is the code and it doesn't seem to work. I am getting a hover in the footer but it appears to be a pale yellow. Any help is greatly appreciated.

Here's the code that I am using for the nav and the footer

/* Remove 'Featured' Heading from Summary Block Carousel */
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-heading {
  display: none;}

/* remove underline on nav */
.header-nav-item--active a {
  background-image: none !important;
}

/* Nav item hover color */
.header-nav-item a:hover {
    color:  #ffd54f !important;
}

/* Nav item active color */
.header-nav-item--active a {
  color: #ffd54f !important;
}

/* Footer Link - Normal */
.footer a {
    color: white;
}
/* Footer link - Hover */
.footer a:hover {
    color: #424147 !important;
}
/* Footer Link - Active */
.footer a:active {
    color: #424147;
}

p a {  background-image: none !important;  }

Please share your site url we can have a look

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 year later...
25 minutes ago, Iwan said:

Hi @bangank36 or @tuanphan

I used this code to remove the underline from my footer navigation:

/* remove underlines from footer links */
footer a {
text-decoration: none !important;
  font-size: 18px !important;
}

But what code do I add next to apply a colour change on hover for the navigation items?

Kindly share your site with the site-wide password so we can take a look

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
31 minutes ago, Iwan said:

Hi @bangank36 or @tuanphan

I used this code to remove the underline from my footer navigation:

/* remove underlines from footer links */
footer a {
text-decoration: none !important;
  font-size: 18px !important;
}

But what code do I add next to apply a colour change on hover for the navigation items?

You can try adding to Home > Design > Custom Css

#block-f1ef39b8fb9899ecadc0 a:hover {
  color :#f45ec6;
}

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing

image.thumb.png.f498888b1060e33e11bbfda7e3d96339.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 minute ago, Iwan said:

@bangank36 one more thing, please, is there a way with my header navigation to underline the specific drop down item (page) when the drop down menu is active? 

@bangank36 ... when that page is selected? So for example when SPEAKING is selected, and you're on that page, the navigation header item is underlined...

Link to comment
  • 1 month later...
7 hours ago, IwanJ said:

Hi @bangank36 Hope you're well, I'm trying various codes to change colour-on-hover footer navigation items...can you help please?

https://deep-learning-cafe.squarespace.com/ password: password123

You can try adding to Home > Design > Custom Css

#block-c8b8e06bb4251545263a a:hover .sqsrte-text-color--custom {
  color: red !important;
}

Change the color as you wish

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.