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:
- Genesis Framework
- Dynamik Website Builder (Genesis, Beaver, or GP Extender would work here was well, though Beaver Extender requires the Beaver Builder Theme instead of Genesis and GP Extender requires the GeneratePress theme, of course)
- Simple Social Icons by StudioPress, the developers of Genesis
- Dynamik Custom Widget Areas
- Dynamik Front-End CSS Builder
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;
}
