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;
}
Follow & Share:
Source: https://cobaltapps.com/create-social-media-banner-fix-top-site/