Jump to content

Change menu background on hover

Recommended Posts

Posted (edited)

Hello,

I was wondering if someone could help me on this. My header settings on css are as below:

//Header menu settings
.header-nav-wrapper a {
  margin-bottom: 10px !important;
  padding: 10px !important;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

Is there a way to add an image for each menu link to appear when I hover over the links? Similar to the below:

Like this: https://nicolainiermann.com/

I can't really find the answer to this anywhere, would really appreciate the help. Thanks!

Edited by Sal20007
Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

.sqs-video-background {
  position: absolute;
}

.header-nav-item--collection a[href="/link"]:hover + .sqs-video-background::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("https://example.com/image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.5;
  z-index: 1;
}

I have now updated it to such, but it's still not working. I have the url replaced appropriately for testing.

The below is working without the hover, it just places an image right on top of the squarespace video:

.sqs-video-background {
  position: absolute;
}

.sqs-video-background::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("https://example.com/image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.5;
  z-index: 1;
}

 

What am I doing wrong? Please, help.

Link to comment
Posted (edited)

This one here:

https://nicolainiermann.com/

 

I need header hovered links to trigger 

.sqs-video-background::before

 

Current code I got is the below, but this is not working still (mind you I have links for the urls, but have edited them for posting:

.sqs-video-background {
  position: absolute;
}

#header .header-nav-item--collection a[href="/link"]:hover ~ #page .sqs-video-background::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("https://example.com/image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  z-index: 1;
}

 

Edited by Sal20007
Link to comment
On 5/6/2023 at 7:42 PM, Sal20007 said:

This one here:

https://nicolainiermann.com/

 

I need header hovered links to trigger 

.sqs-video-background::before

 

Current code I got is the below, but this is not working still (mind you I have links for the urls, but have edited them for posting:

.sqs-video-background {
  position: absolute;
}

#header .header-nav-item--collection a[href="/link"]:hover ~ #page .sqs-video-background::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("https://example.com/image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  z-index: 1;
}

 

Site url doesn't work. Can you check it again?

image.png.858f127ab3386a9d182017621aa3d0a7.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 5/9/2023 at 11:55 PM, Sal20007 said:

I looked into a bit more - it seems like the only way I can do this is through Javascript so it's no really possible unless I use the Squarespace Portfolio format?

You mean hover on each link >> change background image behind?

You will need to use Portfolio Page

What is problem with Portfolio? If you need to change portfolio link to custom url, this is possible, we can give code

image.thumb.png.b3672b7962913d44402000baf72234ab.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

The problem is that I would have to redirect each link to specific parts of my page, everything is already built. Plus the portfolio format is very limiting so far in my experience and I like to avoid it.

Link to comment

If you keep current layout, still possible, but if you add a new text link, will require to update all code

If you still want, let me know, we will test & give the code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.