After downloading a scrolling image plugin from the internet, I encountered an issue while trying to implement a left-floating Social Media bar. The CSS for the media bar conflicts with the scrolling plugin's CSS and as a result, the social media bar does not display correctly.
To demonstrate the working Media Bar, here is the JSFiddle source code:
https://jsfiddle.net/6bjbra49/
.media-bar {
position: fixed;
top: 50px;
left: -40px;
}
.social {
width: 200px;
}
.social li a {
display: block;
height: 20px;
width: 40px;
background: #222;
border-bottom: 1px solid #333;
font: normal normal normal
16px/20px
'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif;
color: #fff;
-webkit-font-smoothing: antialiased;
padding: 10px;
text-decoration: none;
text-align: center;
transition: background .5s ease .300ms
}
/* Additional styling rules */
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="media-bar">
<ul class='social'>
<li>
<a class="fa fa-facebook" href="#"><span>Facebook</span></a>
</li>
<li>
<a class="fa fa-yelp" href="#"><span>Yelp!</span></a>
</li>
<li>
<a class="fa fa-instagram" href="#"><span>Instagram</span></a>
</li>
<li>
<a class="fa fa-flickr" href="#"><span>Flickr</span></a>
</li>
<li>
<a class="fa fa-pinterest" href="#"><span>Pinterest</span></a>
</li>
<li>
<a class="fa fa-youtube" href="#"><span>You Tube</span></a>
</li>
</ul>
</div>To resolve this conflict caused by the first line in the CSS file (*, *:after, *:before), you can modify the selectors within the media bar CSS section accordingly.