Edit Sidebar Open/Close Icon; Remove "Follow" Text

  • Resolved AZBros

    (@azbros)


    8 years, 6 months ago

    On the smaller screen sizes, the sidebars close up and need to be clicked on to expand (similar to standard menus). For whatever reason, on my primary menu, the little icon to open the window does not display. It was just a square, which I believe means the icon could not be found.

    I was able to find the code to change it, but the icon is the same when the window is closed or open. On the original theme, I believe it was supposed to be arrows point left when the sidebar was compressed and arrows pointing right when open (signifying that the sidebar could be opened and closed).

    Can anyone tell me where I can locate the code to set the ‘closed’ and ‘open’ right sidebar menu icons? If not, it’s not a big deal, but I think it would look better with the icons changing if the sidebar is open or closed.

    Also, is there a way to completely remove the “Follow” text and center up the social media icons? I know how to change the text, but if I remove it, there’s a large space where it used to say “Follow”.

    Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)

  • Hi there. The menu and sidebar icons are in the font-awesome.min.css file loaded by the theme. If you’re not seeing them it usually indicates that the file could not be loaded for some reason.

    To change the sidebar heading, copy sidebar.php to your child theme.

    Remove this line:

    <p><?php echo hu_has_social_links() ? __('Follow:','hueman') : '&nbsp;' ; ?></p>

    Add this css:

    .s1 .social-links {
    float: none;
    text-align: center;
}
    Thread Starter AZBros

    (@azbros)

    That’s odd, I wonder why it wouldn’t load properly. Is there anything I can do to get it to load correctly? I’d really prefer for the right sidebar to show the ‘open’ and ‘close’ icons correctly rather than just showing the one I set on sidebar.php.

    Also, the above code you gave me worked perfectly, thanks! I’m curious if there’s a way to increase the size of the icons. I know they’re essentially font, but I’m not sure how I’d go about increasing their size. I’d like them to be just a little bigger if possible. If not, it’s not big deal. Thanks!

    One reason it sometimes doesn’t load is CORS, discussed in this post:
    https://www.ads-software.com/support/topic/fa-buttons-are-not-being-appeared-but-just-squares

    /* increase sidebar toggle icon size */
.sidebar-toggle i {
    font-size: 48px;
}
    Thread Starter AZBros

    (@azbros)

    Oops, I think I worded my question wrong. I was wanting to increase the size of the social media icons, not the sidebar button on smaller screen sizes. Sorry about that. Is it possible to increase the size of the social media icons (or should this question be in a new topic)?

    Same idea, different element:

    /* increase social link icons size */
.social-links .social-tooltip {
    font-size: 38px;
}
    Thread Starter AZBros

    (@azbros)

    Thanks, that did the trick.

    Thread Starter AZBros

    (@azbros)

    I finally got around to checking to see what was causing the issue with the Open/Close icons not showing up. I disabled all my plugins to see if they might be the cause. Once I did that, I checked and, sure enough, the sidebar Open/Close icons for mobile displays worked. I then activated each plugin individually to see which was causing the problem. The culprit? Twitch Status (https://www.ads-software.com/plugins/twitch-status/).

    Here’s my dilemma: My website is a gaming site. A big part of our operation is Twitch. I really like having the Twitch Status widget so viewers know when we’re streaming live. Any ideas how I can keep the widget -and- get the Font Awesome icons on the mobile sidebar to function properly? Thanks!

    Off the top of my head it might be that the plugin is somehow overriding the loading of the theme font-awesome.min.css file, or the plugin is loading it’s own font awesome file which doesn’t contain the icons used by the theme, or the plugin’s CSS is overriding the theme CSS used to display the icons. Or it might not be any of those; hard to tell without seeing it.

    Thread Starter AZBros

    (@azbros)

    Interesting. Sounds like it may be difficult to use the plugin and still have the FontAwesome icons on the mobile menu working. It’s odd because every other FontAwesome icon works, but the Open/Closed mobile menu is the only time it shows up blank.

    I’ll continue researching this issue and see if there’s a possible solution or maybe some sort of alternative out there. I really want to display my Twitch stream in the sidebar, so hopefully there’s another way to do it without interfering with standard site elements.

    As always, thank you very much for your input bdbrown, I really appreciate it!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Edit Sidebar Open/Close Icon; Remove "Follow" Text’ is closed to new replies.