Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
actualginger

Make logo change on hover

Question

Site URL: https://www.startupvillage.nl/

Hello, on my site I'm having some issues making my header logo change to a different image when the logo is hovered over. 

https://www.startupvillage.nl/

I have tried following tutorials from here and here with, pasting code into the Custom CSS, with no results. I think perhaps the main confusion is that in my Custom CSS there is no reference to .header-title-logo

If someone could help me figure 1. which code to insert, and 2. where to insert it on the Custom CSS, that would be greatly appreciated!

Share this post


Link to post

15 answers to this question

Recommended Posts

  • 0
.header-title-logo a:hover img {
  visibility: hidden;
}
.header-title-logo a:hover {
  background-image: url('https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.png');
  background-size: contain;
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
7 minutes ago, rwp said:

.header-title-logo a:hover img {
  visibility: hidden;
}
.header-title-logo a:hover {
  background-image: url('https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.png');
  background-size: contain;
}

 

Thanks, but it still is not working. Should I insert this in my Custom CSS or in Code Injection?

Share this post


Link to post
  • 0

Css


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
15 minutes ago, rwp said:

Css

Here is what the my CSS looks like for my Navigation section (all the other sections are for specific pages.) No matter where I put that code it there is no effect. Do you know where I should paste it?

/* --- NAVIGATION --- */
#header > div.header-announcement-bar-wrapper > div > div.header-display > div.header-title-nav-wrapper > div.header-nav > div > nav > div:nth-child(n) > a{
        display:inline-block;
        position: relative;
}

#header > div.header-announcement-bar-wrapper > div > div.header-display > div.header-title-nav-wrapper > div.header-nav > div > nav > div:nth-child(n) > a::before{
    content:'';
    position: absolute;
    width:100%;
    transform: scaleX(0);
    height:2px;
    bottom:0;
    left:0;
    background-color: #000000;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

#header > div.header-announcement-bar-wrapper > div > div.header-display > div.header-title-nav-wrapper > div.header-nav > div > nav > div:nth-child(n) > a:hover::before{
    transform: scaleX(1);
    transform-origin: bottom left;
}

 

Share this post


Link to post
  • 0

Add it below and hit the save button so I can see what its doing.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

You have an error in the CSS

Nothing after that is loading.

image.png.a97a302a1bfff18778251d75128ab0ab.png


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
4 minutes ago, rwp said:

You have an error in the CSS

Nothing after that is loading.

image.png.a97a302a1bfff18778251d75128ab0ab.png

Damn okay, do you have any idea how I can fix this? We hired an external company to build the site initially so I didn't add in any original CSS. 

Share this post


Link to post
  • 0

Post all of the CSS


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
3 minutes ago, rwp said:

Post all of the CSS

Quote

https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902a8f49de1a6c63629294/1586506383842/meetings_grid.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902a8f49de1a6c63629294/1586506383842/meetings_grid.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e90267cf9c5f208f22ab146/1586505341004/flexdesks_grid.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902a8f49de1a6c63629294/1586506383842/meetings_grid.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.png/* ----------------- HOME PAGE -----------------  */

/* --- NAVIGATION --- */
#header > div.header-announcement-bar-wrapper > div > div.header-display > div.header-title-nav-wrapper > div.header-nav > div > nav > div:nth-child(n) > a{
        display:inline-block;
        position: relative;
}

#header > div.header-announcement-bar-wrapper > div > div.header-display > div.header-title-nav-wrapper > div.header-nav > div > nav > div:nth-child(n) > a::before{
    content:'';
    position: absolute;
    width:100%;
    transform: scaleX(0);
    height:2px;
    bottom:0;
    left:0;
    background-color: #000000;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

#header > div.header-announcement-bar-wrapper > div > div.header-display > div.header-title-nav-wrapper > div.header-nav > div > nav > div:nth-child(n) > a:hover::before{
    transform: scaleX(1);
    transform-origin: bottom left;
}
.header-title-logo a:hover img {
  visibility: hidden;
}
.header-title-logo a:hover {
  background-image: url('https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.png');
  background-size: contain;
}
/* --- Work Spaces --- */
#header > div.header-announcement-bar-wrapper > div > div.header-display > div.header-title-nav-wrapper > div.header-nav > div > nav > div.header-nav-item.header-nav-item--folder > div > div:nth-child(n) > a{
    text-align: left;
    padding-top: 10px;
}

#header > div.header-announcement-bar-wrapper > div > div.header-display > div.header-title-nav-wrapper > div.header-nav > div > nav > div.header-nav-item.header-nav-item--folder > div{
    right:auto !important;
  	left:-1em !important;
}

/* --- Community tabs --- */

.tab-btn{
  font-family:"Space Mono";
  color:#F95043;
  max-width:200px;
  display: inline-block;
  padding: 12px 18px;
  font-size:1.2em;
  background:white;
  border:2px solid #F95043;
  margin:20px;
}

.tab-btn:hover{
  background-color:#F95043;
  color:white;
  transition: 0.5s;
}

.tab-btn.active{
  background:#F95043;
  color:white;
 font-family:"Space Mono"
}

.tab-section-hide{
  display:none;
}
.tab-section-show{
  display:block;
}

/* --- Font styles --- */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500&display=swap');

.sqsrte-large {
  font-family:"Work Sans", sans-serif;
  font-weight:500;
}

.sqsrte-small{
  color:#A9A9A9;
  }

/* --- Offices background red --- */

.background-right-blocks{
  width:80%;
  background-color:#F95043; 
  padding:10%;
  }

.background-right-blocks > p.sqsrte-large, .background-right-blocks, .background-right-blocks > p.sqsrte-small, .background-right-blocks-blue > p.sqsrte-large, .background-right-blocks-blue, .background-right-blocks-blue > p.sqsrte-small{
  color:white;
}

.background-right-blocks > a, #background-right-meetings > p.sqsrte-medium > a{
  text-decoration:underline;
  color:white;
}

#background-right-offices_image {
  background-image:url("https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e8ee73ad24dde73b9f88cc9/1586423610491/02_offices_offices%401x.png");
  width:606px;
  height:188px;
  float:right;
  margin-top:8px;
}

/* --- Flexdesks background red --- */

#background-right-flexdesks-image {
  background-image:url("https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e90267cf9c5f208f22ab146/1586505341004/flexdesks_grid.png");
  width:606px;
  height:188px;
  float:right;
  margin-top:8px;
  margin-bottom:20px;
}


/* --- Meetings background blue --- */

.background-right-blocks-blue{
  width:80%;
  background-color:#0F5B6D; 
  padding:10%;
  }

#background-right-meetings-image {
  background-image:url("https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902a8f49de1a6c63629294/1586506383842/meetings_grid.png");
  width:606px;
  height:188px;
  float:right;
  margin-top:8px;
  margin-bottom:20px;
}

/* --- Events background red --- */

#background-right-events-image {
  background-image:url("https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902c11e5b08e4c70caa11b/1586506770208/events_grid.png");
  width:606px;
  height:188px;
  float:right;
  margin-top:8px;
  margin-bottom:20px;
}

/* --- Our Story background red --- */

#background-right-ourstory-image {
  background-image:url("https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902cef8d142251c7baabef/1586506991815/ourstory_sciencepark_grid.png");
  width:606px;
  height:188px;
  float:right;
  margin-top:8px;
  margin-bottom:20px;
}

/* --- Calendar cursor inactive --- */

#yui_3_17_2_1_1586507539487_262 > div.summary-thumbnail-outer-container > a{
  cursor:default !important;
}

 

 

Share this post


Link to post
  • 0

This all needs to be on one line

Screenshot_20200730-095101_Firefox Beta~2.jpg


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
12 minutes ago, rwp said:

This all needs to be on one line

Screenshot_20200730-095101_Firefox Beta~2.jpg

Hi, I fixed that so it is all one line. Additionally, I am now having problems on other areas of our website that used custom CSS. Any solution would be great if we could get this code working again!! Haha, I'm kind of freaking out

Share this post


Link to post
  • 0

What isn't working?

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
https://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902a8f49de1a6c63629294/1586506383842/meetings_grid.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902a8f49de1a6c63629294/1586506383842/meetings_grid.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e90267cf9c5f208f22ab146/1586505341004/flexdesks_grid.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5e902a8f49de1a6c63629294/1586506383842/meetings_grid.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.pnghttps://static1.squarespace.com/static/5e789f950317543ce8f43447/t/5f2292c9d3288d283c2af685/1596101322262/black+backgroun+logo.png

Those are all links to images, is that part of the CSS or was that accidentally pasted?

/* --- Calendar cursor inactive --- */

#yui_3_17_2_1_1586507539487_262 > div.summary-thumbnail-outer-container > a{
  cursor:default !important;
}

This won't work because #yui blocks do not have static numbers.

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Did you get this figured out @actualginger?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...