Social Media Sidebar Icons

  • Author
    Posts
  • #161051

    goodimprov
    Member
    Original poster

    Hi!

    Just a quick question.

    How can I make it so that the smaller social media icons in the sidebar have their background color fade out like the larger social media icons do?

    For instance, when I hover over the Twitter icon on the large social media icons, it gradually fades a blue bg color in when I hover then slowly fades the blue out when I move my mouse away. When I do the same for the Twitter icon on the sidebar, it fades the blue bg in but abruptly snaps back to a black bg when I move the mouse away. I want to have them both to have the smooth fade out of color.

    Thanks!

    – Dan

    The blog I need help with is: goodimprov.com

    #161053

    goodimprov
    Member
    Original poster

    Hi again!

    Second question that’s unrelated.

    My featured content now seems to “jump” the first time the page is loaded. On desktop, it makes the header a line larger a second after the page loads, tablet seems fine and on phone the image seems to shrink down a second after the page loads. I’d prefer to have them just stay a specific size like they used to.

    Thanks!

    #161086

    tarasdashkevych
    Theme Author

    Hello Dan,
    Thank you very much for providing a very descriptive information about the issue.

    “How can I make it so that the smaller social media icons in the sidebar have their background color fade out like the larger social media icons do?”
    – Please find the following custom CSS on your site:

    
    #toggle-sidebar a {
    	opacity: 1;
    	transition: color 350ms ease-in-out;
    }
    

    Once it’s found, please replace it with this one:

    
    #toggle-sidebar a {
    	opacity: 1;
    }
    

    “My featured content now seems to “jump” the first time the page is loaded. On desktop…”
    – The Featured Content functionality has been refactored in previous updates (I believe it has started in v1.5.0. Changelog can be found here: https://themesharbor.com/changelogs/) to provide a much better performance and accessibility.

    Since the Featured Content section adapts to the amount content in this section, it can automatically change its height. I am not able to reproduce the issue on the demo site: https://demo.themesharbor.com/appetite/

    I’ll keep in mind this issue.

    At the moment, please use this custom CSS to set a fixed height of the Featured Content section on large screens:

    
    /* set fixed height for the featured content section */
    @media (min-width: 992px) {
      .featured-content {
       height: 500px !important; 
      }
    }
    

    Let me know if you have any additional questions.

    Kind regards,
    Taras

    #161095

    goodimprov
    Member
    Original poster

    I’ll get a screen recording of it happening and upload it here tomorrow. I’ll also report back if these fixes worked. Thanks!

    – Dan

    #161104

    tarasdashkevych
    Theme Author

    Dan,

    “I’ll get a screen recording of it happening and upload it here tomorrow. “
    – I was able to reproduce the issue on your site but I am currently not sure what is causing it.

    Kind regards,
    Taras

    #161176

    goodimprov
    Member
    Original poster

    Thanks for testing!

    The fix you suggested for larger screens works perfectly as does the social media icon fix.

    Is there a similar workaround for smaller screens as well?

    Regards,
    Dan

    #161177

    goodimprov
    Member
    Original poster

    Also (and sorry to bombard you with so many questions) is there any way to fix the blog page header at the same size as the homepage one? I’d like my blog page to be consistent with the front page on desktop, tablet and mobile designs.

    Thanks!
    – Dan

    #161228

    tarasdashkevych
    Theme Author

    Dan,

    “Is there a similar workaround for smaller screens as well?”
    – Currently, your site sets a fixed height for the Featured Content section on screens 992px or wider. To set a fixed height of the Featured Content for screens that are smaller 992px, please replace your custom CSS with this one:

    
    /* set fixed height for the featured content section */
    .featured-content {
      height: 450px !important; 
    }
    
    @media (min-width: 992px) {
      .featured-content {
       height: 500px !important; 
      }
    }
    

    “is there any way to fix the blog page header at the same size as the homepage one?”
    – To change a height of the page header located on blog page, please use this custom CSS:

    
    .blog .page-header {
      height: 400px;
    }
    

    If you want to display different height based on the screen size (same as you have for the Featured Content), please use this custom CSS instead:

    
    /* set fixed height for the page header on the blog page */
    .blog .page-header {
      height: 450px;
    }
    
    @media (min-width: 992px) {
       .blog .page-header {
          height: 500px;
        }
    }
    

    Let me know if you have any addition questions.

    Kind regards,
    Taras

    #161358

    goodimprov
    Member
    Original poster

    Thank you so much for looking into this :)

    I’ve been unable to be near a computer to implement these changes but I’ll report back after this weekend.

    Thanks again for all your time.

    #161383

    goodimprov
    Member
    Original poster

    These fixes worked perfectly! Thank you very much :)

    – Dan

    #161401

    tarasdashkevych
    Theme Author

    You are very welcome, Dan! :)

    Kind regards,
    Taras

The topic ‘Social Media Sidebar Icons’ is closed to new replies.