Social Icons not Showing Up on Mobile?

Thanks Mike, that code worked to get them to appear!
However, they are center aligned and it pushed down the other line of text I have in the small top bar on mobile.
Is there some code to make them align on the right and allow room for the other content in that bar?
Thanks again. :)

Thanks so much, I like how that looks? Is there a way to make the social icons a little smaller only on mobile so they and the link all fit nicely in the small top bar?

Thanks, that did make the social icons smaller on mobile, but the line of text is still dropping off below the small top bar… I’d like it all to be centered and contained within the small top bar on mobile (without impacting how it’s aligned on desktop)?

As of right now, it appears there needs to be less space above and below the icons on mobile? Do you have code for that?

Thank you, I was able to get the look I wanted with that! :)

Hello,
I’m following up on this topic again with an issue that’s occurring on tablets size 768 x 1024.
On devices that size, I’d like to have the link and social media icons stacked like we have set up for mobile… but instead right now the entire long opt-in is showing (that is what I want for desktop) for this size when I check my site at:
http://responsivedesignchecker.com/checker.php?url=https%3A%2F%2Fwww.new.barrelracingtips.com&width=1400&height=700

Here’s the CSS I have for this on mobile… wasn’t sure which parts I should update?

@media only screen and (max-width: 767px) {
#custom_html-4.widget {
/*aligns the FB like button script (a custom html widget in the “header” widget area)*/
width: 50px !important;
padding: 12px 0px 0px 70px !important;
display: inline-block !important;
float: left !important;
}
}

@media only screen and (max-width: 479px) {
/*makes SM icons appear in small top bar on mobile*/
.responsive #top #wrap_all #header .social_bookmarks, .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
display: block !important;
}
}

@media only screen and (max-width: 989px) and (min-width: 768px) {
/*makes SM icons appear in small top bar on mobile*/
.responsive.html_mobile_menu_tablet #top #header #header_meta .social_bookmarks {
display: block !important;
}
}

@media only screen and (max-width: 426px) {
.sub_menu h6 a{
/*puts small bar opt-in link centered below social media icons in small top bar on mobile*/
margin-left: 25% !important;
margin-top: -25px !important;
}
}

@media only screen and (max-width: 767px) {
/*size and spacing of SM icons on mobile*/
.social_bookmarks a{
font-size:10px;
margin-top:-2px!important;
}}

@media only screen and (max-width: 767px) {
/*size and spacing for small header bar text on mobile*/
#header_meta h6 a{
font-size:12px!important;
margin-top:-33px!important;
}}

That is a perfect solution, thank you so much Mike! :D