Zitat
Ich aber weiß überhaupt nicht was das Script macht und wie ich da mit der CSS gegensteuern könnte.
Das ist eine typische Konsequenz, wenn man eine Fundsache aus dem Web einsetzt ohne sie zu verstehen 
Ich bin ja nicht unbedingt ein Freund von jQuery und hier bestätigt sich das: Es liegt ein undurchsichtiges Mischmasch von Animation der Höhe und Umschalten von display vor, das es schwer macht, die Dinge zu durchschauen und nach den eigenen Vorstellungen umzuändern.
Zitat
Was muss ich in die CSS schreiben?
Wie nextuser schon schrieb, hat der Inlinestyle, den jQuery setzt, eine hohe Priorität. Du kannst jedoch dafür sorgen, dass sich dein CSS dennoch durchsetzt, indem Du "!important" hinzu setzt. Auch davon bin ich kein Freund weil man es i. allg. nur braucht, wenn man sein CSS nicht im Griff hat, aber hier kommt man wohl nicht daran vorbei.
Da kein Freund von jQuery, habe ich mal das Menü aus deinem Codepen hergenommen und mit Vanilla-JS realisiert einschl. Animation.
Das Javascript am Ende des Body:
<script>
const
menu = document.querySelector('ul.menu-list'),
hamburger = document.querySelector('div.humbarger');
hamburger.addEventListener('click', event => {
// Ist das Menü offen? Das zeigt
// die Klasse "open" an:
if (menu.classList.contains('open')) {
/* Menü verbergen indem wir
die Höhe auf 0 setzen: */
menu.style.height = '0';
} else {
/* Menü öffnen indem wir die Höhe
entsprechend Inhalt setzen;
scrollHeight liefert uns diese
auch wenn das Menü geschlossen ist: */
menu.style.height = menu.scrollHeight + 'px';
}
menu.classList.toggle('open');
});
</script>
</body>
Alles anzeigen
Ist doch recht kompakt und einfach, nicht wahr?
Am CSS musste ich nicht viel verändern, siehe meine Kommentare:
/* ====================
Responsive Section
=======================*/
/* Tablet desktop :768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
header .navigation .menu-list {
width: 60%;
/* Hier erzwingen wir mit !important, dass die Höhe auf auto
gesetzt wird und das Menü sichtbar ist: */
height: auto !important;
}
header .navigation .menu-list li a {
font-size: 1rem;
}
}
/* Large Mobile :480px. */
@media only screen and (max-width: 767px) {
header .navigation .menu-list {
position: absolute;
top: 12vh;
min-width: 100%;
background: rgba(15, 20, 35, 0.99);
text-align: center;
/* Statt durc "display: none;" verbergen wir
das Menü durch eine Höhe von 0: */
/* display: none; */
height: 0;
overflow: hidden;
/* Die Animation erledigen wir durch CSS: */
transition: 0.5s height linear;
}
header .navigation .menu-list li {
display: block;
}
header .navigation .menu-list li a {
display: block;
padding: 20px;
transition: color 1s ease, padding 1s ease, background-color 1s ease;
}
header .navigation .menu-list li a:hover {
color: #b1d4e0;
padding-left: 30px;
background: rgba(177, 212, 224, 0.2);
}
header .navigation .humbarger {
display: block;
}
.intro-section .intro-content h1 {
font-size: 2.8rem;
}
.intro-section .intro-content h6 {
font-size: 1.4rem;
}
.intro-section .intro-content .changing {
font-size: 1.5rem;
}
.intro-section .intro-content .header-btn a {
font-size: 1.25rem;
}
}
/* small mobile :320px. */
@media only screen and (max-width: 479px) {
.intro-inner .intro-content h1 {
font-size: 2rem;
letter-spacing: 1px;
}
.intro-inner .intro-content p {
margin-top: 10px;
}
}
Alles anzeigen
