Hier noch ne hübsche Hamburger-Navigation
FE-Modul [Eigener HTML-Code] wie folgt anpassen (<span> hinzufügen):
HTML-Code:
<a id="open_mobilenav" href="#mobilenav"><span></span></a>
...und folgenden CSS-Code in deine CSS einfügen:
HTML-Code:
#open_mobilenav {
display: none;
height: 36px;
margin: 20px;
position: absolute;
width: 40px;
z-index: 2;
}
#open_mobilenav span {
margin-top: -3px;
top: 50%;
}
#open_mobilenav::before {
top: 5px;
}
#open_mobilenav::after {
bottom: 5px;
}
#open_mobilenav::before,
#open_mobilenav::after,
#open_mobilenav span {
background: #fff none repeat scroll 0 0;
content: "";
display: block;
height: 6px;
left: 5px;
position: absolute;
width: 30px;
transition-delay: 0.5s;
transition-duration: 0.5s;
transition-property: transform, top, bottom, left, opacity;
transition-timing-function: ease;
}
/* Ab einer gewissen Breite die Hauptnavigation ausblenden und die Hamburger-Navigation einblenden */
@media screen and (max-width: 599px) {
.mod_navigation {
display: none;
}
#open_mobilenav {
display: block;
}
}
Gruss
Marco