Jump to content

Social Links Hover Issue

Recommended Posts

Site URL: https://www.anqi-wu.com/

Hello,

The hover on my social links doesn't seem to be working properly. When I hover over a social link, the other icons get greyed out versus the one which has the active hover. Is there some way to fix this issue using custom css? I'd like for the social icon button to turn grey when there is a cursor hovering over it, similar to how my other buttons are done. Right now it seems like it is doing the opposite.

Thanks,
-Anqi

 

Link to comment
  • Replies 14
  • Created
  • Last Reply
5 hours ago, MissChi said:

Site URL: https://www.anqi-wu.com/

Hello,

The hover on my social links doesn't seem to be working properly. When I hover over a social link, the other icons get greyed out versus the one which has the active hover. Is there some way to fix this issue using custom css? I'd like for the social icon button to turn grey when there is a cursor hovering over it, similar to how my other buttons are done. Right now it seems like it is doing the opposite.

Thanks,
-Anqi

 

Where is the links, I did not see them in home page

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
3 minutes ago, MissChi said:

Hello! The social links are located at the bottom of my sidebar. You can see here in the screenshot highlighted in yellow:

 

Screenshot 2020-12-18 232430.png

I scrolled to the end of the site

image.thumb.png.d24c35c56def603e13122bf3da072c79.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

Thanks for sending me the screenshot. Oh no, I'm not sure why it's not showing up. I double checked on other browsers as well as other friend's computers, but the social links seem to be appearing when they go on the site. It's also appearing as well when on mobile view. Is there anything I can send you to check the code or figure out why it doesn't seem to be appearing from your end? 

Would this screenshot be helpful at all?
Untitled.thumb.png.ff5e53a335322a2e74cb35d5a585ae1c.png

Link to comment
15 minutes ago, MissChi said:

Thanks for sending me the screenshot. Oh no, I'm not sure why it's not showing up. I double checked on other browsers as well as other friend's computers, but the social links seem to be appearing when they go on the site. It's also appearing as well when on mobile view. Is there anything I can send you to check the code or figure out why it doesn't seem to be appearing from your end? 

Would this screenshot be helpful at all?
Untitled.thumb.png.ff5e53a335322a2e74cb35d5a585ae1c.png

.social-links a:hover .sqs-svg-icon--social {
  opacity: 0.5 !important;
}
.social-links a .sqs-use--mask {
  fill: #000 !important;
}

 

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
17 minutes ago, derricksrandomviews said:

The site sidebar  which is not scrollable appears to be overexpanding vertically causing it to crop. I had to shrink my chrome bowser down to 80 percent to see the icons in question. I have not seen this happen before. 

thanks for letting me know! I double checked on my 13 inch macbook and it seems to be having the same issue with overexpanding (the whole sidebar is only seen when my chrome browser is shrunk down to 80 percent), however anytime i visit on a pc it seems to display perfectly fine. anyone happen to know how to fix this issue?

thanks!

-anqi

Link to comment

You can do a couple of things to fix it. I think the first is your best option, I remembered I had seen this happen before. 

If you have a lot of links in your navigation, uncheck Sidebar Fixed in the Sidebar Options section of Site Styles. The sidebar will now move up the page as you scroll.

If you want a fixed sidebar, consider reducing the number of navigation links or using folders to create drop-down menus. You can also remove blocks from the content area to reduce the height.

Link to comment
5 hours ago, derricksrandomviews said:

You can do a couple of things to fix it. I think the first is your best option, I remembered I had seen this happen before. 

If you have a lot of links in your navigation, uncheck Sidebar Fixed in the Sidebar Options section of Site Styles. The sidebar will now move up the page as you scroll.

If you want a fixed sidebar, consider reducing the number of navigation links or using folders to create drop-down menus. You can also remove blocks from the content area to reduce the height.

Thank you for the help! I will look into these options! Do you happen to know any custom css code that can be used to auto scale the sidebar smaller when viewing in smaller screen sizes (laptop for example)? I really like the fixed sidebar and would love to keep it on if I can.

Link to comment
9 minutes ago, MissChi said:

Thank you for the help! I will look into these options! Do you happen to know any custom css code that can be used to auto scale the sidebar smaller when viewing in smaller screen sizes (laptop for example)? I really like the fixed sidebar and would love to keep it on if I can.

body.sidebar-fixed.sidebar-position-left #headerWrapper {
	top: 10px;
}

try this

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

Thanks for the code! I tried it out, while it did help by showing more of the sidebar navigation when I was viewing on my 13 inch laptop; it was still cut off a bit at the bottom. Alternatively, is there anyway to play around with the outer padding of the website or to shorten the overall height of the site so that it doesn't get cut off when viewing on smaller screens?

For example, on my site styles menu I can adjust the outer padding (only to a maximum of 80px) and the width of the website, however there is no option to adjust the height (shown below). Is there a CSS code to be able to add more than 80px outer padding and to be able to add your own value for the website height? I am hoping that by shortening the proportions of the website it might fix the issue of the fixed sidebar getting cut.

Capture2.thumb.PNG.3e03f672b4e81f7e0524bfa551b5a618.PNG

 

I've attached samples of how the website looks when viewing on my 24 inch monitor vs my 13 inch macbook laptop:

2010078875_24inchmonitornotes.thumb.png.4b0e254c266c67c5737a25c34317b9d7.png

 

1217630049_13inchmonitornotes.thumb.png.e35216f33ca1f4c1cb468258975206b5.png

 

thank you for the help!

Link to comment

Root cause of the cut off is the navigation is too long and there is no scrollbar to see the icons. Could you group some of the items into a folder?

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
54 minutes ago, bangank36 said:

Root cause of the cut off is the navigation is too long and there is no scrollbar to see the icons. Could you group some of the items into a folder?

I grouped the items as best I could into a folder, though I am still getting slight cut off on my laptop screen. Worse case I will switch to non-fixed sidebar if that's my only option. Attached below is the updated image of the new sidebar nav with additional folder items.

2141686819_ScreenShot2020-12-20at12_05.09AM2.thumb.png.dace94b555ce1c72b8217d6477d5b124.png

 

If possible, is there still any custom css code available to adjust the outer padding and site height? If it is easier I can upload the request as a separate thread topic. For example, I want to adjust the outer padding to be 90px or 100px (it's currently at the maximum range available on the style editor menu). The style editor menu only gives me the option to adjust the site width, but I would also like to adjust the site height (for example change to 1000px).

 

180274210_Screenshot2020-12-20001934.png.b1612188bbb6244647a0beb9bfdc3029.png

 

Thanks!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.