How To Create A Social Media Banner And Fix It To The Top Of Your Site

In this tutorial I show you how to create a Custom Widget Area, add my Social Media Icons to it, and then fix it to the top of my site with some basic styling. I also go into some of the various aspects of how WordPress implements its own fixed top banner on different screen/viewport widths.

Screencast:

Tools Used:

The custom CSS code used:

.fixed-social-top {
background: #f5f5f5;
border-bottom: 1px solid #ddd;
width: 100%;
padding: 10px 5px 0;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.admin-bar .fixed-social-top {
top: 32px;
}
@media only screen and (max-width: 782px) {
.admin-bar .fixed-social-top {
top: 46px;
}
}
@media only screen and (max-width: 600px) {
.fixed-social-top {
position: absolute;
}
}
.override .site-container {
margin-top: 48px;
}

Leave a Reply