Social Links Hover Issue

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

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

24 minutes ago, bangank36 said:

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

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

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:

 

I scrolled to the end of the site

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?

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?

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

15 hours ago, bangank36 said:

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

 

Yup this code worked thank you!

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. 

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

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.

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.

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

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.

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

thank you for the help!

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?

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.

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).

Thanks!