Hallo,
teste doch mal bitte unter Design > Customizer > Zusätzliches CSS:
@media only screen and (max-width: 1980px) {
.menu-toggle {
background-color: rgba(0, 0, 0, 0);
border: 0 none;
color: #666;
cursor: pointer;
display: inline-block;
font-size: 0;
margin: 10px auto 0;
padding: 20px 0;
width: 30px;
}
}
Entscheidend ist die erste Zeile, bei der ich bezogen auf max-width die maixmale Breite auf 1980px statt 980px geändert habe.
Viele Grüße,
Hans-Gerd
@aurelia33
was genau möchtest du erreichen? Soll immer das Hamburger-Menü (drei Streifen) angezeigt werden?
Hallo Hans-Gerd (@hage),
danke für Dein Mitdenken und Deinen Tipp.
Ich habe das zusätzliche CSS eingefügt (für mich eine Premiere) und veröffentlicht aber leider sehe ich keine Veränderung. Habe ich etwas falsch gemacht? Der Code ist im Quelltext der Seite jetzt sichtbar. Das habe ich überprüft.
Herzliche Grüße
Jessica
Hallo Angelika (@la-geek),
danke für Dein Interesse.
Ja, das Hamburger-Menü mit den drei Streifen (jetzt weiß ich auch, wie man das nennt – danke!) soll immer angezeigt werden.
Herzliche Grüße
Jessica
Entferne den Code von @hage mal wieder und setz das ans Ende der CSS:
@media only screen and (max-width: 3000px) {
.menu-toggle {
background-color: rgba(0, 0, 0, 0);
border: 0 none;
color: #666;
cursor: pointer;
display: inline-block;
font-size: 0;
margin: 10px auto 0;
padding: 20px 0;
width: 30px;
}
.menu-toggle .line-bar:before {
transition: top 0.1s ease 0.14s,
opacity 0.1s ease 0s;
}
.line-bar:before {
top: -8px;
}
.line-bar:after {
bottom: -8px;
}
.line-bar:after,
.line-bar:before {
content: "";
display: block;
}
.line-bar,
.line-bar:after,
.line-bar:before {
border-radius: 5px;
height: 2px;
position: absolute;
transition-duration: 0.15s;
transition-property: transform, -webkit-transform;
transition-timing-function: ease;
width: 30px;
}
.menu-toggle .line-bar:after {
transition: bottom 0.1s ease 0.14s,
transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s,
-webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s;
}
.menu-toggle .line-bar {
transition-duration: 0.1s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.line-bar {
display: block;
margin-top: -2px;
}
.menu-toggle.on .line-bar:before {
opacity: 0;
top: 0;
transition: top 0.1s ease 0s, opacity 0.1s ease 0.14s;
}
.menu-toggle.on .line-bar:after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease 0s,
transform 0.1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.14s,
-webkit-transform 0.1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.14s;
}
.menu-toggle.on .line-bar {
transform: rotate(45deg);
transition-delay: 0.14s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu {
display: none;
}
.toggled-on .menu {
display: block;
padding: 0 10px;
}
.widget_nav_menu .menu {
display: block;
}
.sub-menu-toggle {
background-color: #333;
color: #fff;
float: right;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
margin: 6px;
cursor: pointer;
position: relative;
z-index: 9;
}
.main-navigation {
float: none;
padding: 0;
margin: 0 80px 0 0;
text-align: right;
}
.main-navigation > ul > li {
position: inherit;
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-left: 0;
}
.main-navigation > ul > li::before {
visibility: hidden;
}
.main-navigation a {
float: none;
height: inherit;
line-height: 1.833;
padding: 10px 0;
}
}
Einfach alles komplett kopieren und einfügen.
