Hier ein Beispiel für eine fixierte Sidebar mit Social Icons aus dem Font-Awesome. Bitte stellt also sicher, dass ihr bereits irgendwo in eurem Projekt ein Icon aus diesem Font-Awesome geladen habt, damit Mobirise diese CSS-Datei auch verlinkt. Natürlich könnte man auch jedes andere Icon einer anderen Gruppe verwenden und das mit seinem CSS-Namen ansprechen.
Ich habe hier den Einbau gleich im obersten Block vom Header vorgenommen, der Einbau kann aber in irgendeinem Block gemacht werden, da diese Sidebar ja fixiert ist.
Bitte denkt daran, dass fixierte Elemente immer auch am mobilen Gerät gut aussehen sollten und dort nicht zu viel Platz in Anspruch nehmen.
Man könnte diese Sidebar natürlich auch über eine Media-Abfrage am Smartphone ausschalten /* display: none; */ oder etwas schmaler gestalten, so wie ich es hier mit dieser Media-Abfrage Anweisung getan habe @media (max-width: 767px).
Diese Sidebar hat beispielhaft diese CSS, die in den Bereich "CSS Editor" vom "Code Editor" gehört. Wer die Position der Sidebar am rechten Rand des Bildschirms haben will, der aktiviert das /* right: 0; */ in der obersten class="icon-bar" indem man den Slash/Stern vorne und hinten entfernt.
.icon-bar {
position: fixed;
top: 50%;
/* right: 0; */
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1000;
}
.icon-bar a {
display: block;
text-align: center;
padding: 12px 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
@media (max-width: 767px) {
.icon-bar a {
padding: 6px 8px;
font-size: 16px;
opacity: 0.7;
/* display: none; */
}
}
.icon-bar a:hover {
background-color: rgba(0, 0, 0, 0.8);
outline: 1px solid white;
outline-offset: -1px;
}
.facebook {
background: #3B5998;
color: white;
}
.twitter {
background: #55ACEE;
color: white;
}
.instagram {
background: #dd4b39;
color: white;
}
.youtube {
background: #bb0000;
color: white;
}
Kopiert dann diesen Code zur Darstellung der Social-Icons vor das schließende </section> in den "Code Editor". Ersetzt dabei jeweils das Raute # Zeichen mit der URL zu euren Social-Media Diensten.
<div class="icon-bar">
<a href="#" target="_blank" class="facebook"><span class="fa fa-facebook"></span></a>
<a href="#" target="_blank" class="twitter"><span class="socicon socicon-twitter mbr-iconfont mbr-iconfont-btn" style="font-size: 14px;""></span></a>
<a href="#" target="_blank" class="instagram"><span class="fa fa-instagram"></span></a>
<a href="#" target="_blank" class="youtube"><span class="fa fa-youtube"></span></a>
</div>
Hier noch ein ähnliches Beispiel mit einer fixierten Sidebar als Slideout-Box.