Link zur Website:

Webseite

Die Navigationsleisten-Links werden auf kleineren Bildschirmen zu einem Hamburger-Menü-Dropdown zusammengefasst, und ich habe eine CSS-Eigenschaft für den oberen Rand .navbar { border-top: 3px solid rgba(55,175,75,1.00); } erstellt, die auf die Navigationsleiste angewendet wird. Wenn der Bildschirm jetzt kleiner wird, scheint sich die Hamburger-Menüschaltfläche mit dem grünen Rand oben in der Navigationsleiste zu überlappen!

Vielleicht ist dies ein Anfängerproblem, aber ich habe alles versucht, woran ich denken konnte: Ränder, um die Schaltfläche etwas tiefer zu bewegen (jetzt überlappt sie auch den unteren Rand), Hintergrundfarbe zu entfernen oder sie mit {{X0} transparent zu machen. } (scheint überhaupt nicht zu funktionieren) ...

Anregungen werden sehr geschätzt ...

So sieht es aus:

enter image description here

Der grüne obere Rand wird nicht über die gesamte Länge der Navigationsleiste angezeigt. Es sieht so aus, als ob die Hamburger-Menüschaltfläche mit weißem Hintergrund den oberen Rand der Navigationsleiste überlappt.

0
emgx 23 Feb. 2020 im 01:01

3 Antworten

Beste Antwort

Hinzufügen

margin-top: 0px;
height: 100%;

Zum Hamburger Symbol.

1
Mahatmasamatman 22 Feb. 2020 im 22:15

Ich gehe auf Ihre Website und löse Ihr Problem. füge .navbar padding-top hinzu und subtrahiere von padding-top in .navbar a wie folgt:

.navbar {
    width: 100%;
    height: 75px;
    padding-top: 2px;
    z-index: 2;
    /* background-color: rgba(255,255,255,0.85); */
    /* border-top: 2px solid rgba(55,175,75,1.00); */
    border-bottom: 5px solid rgba(55,175,75,1.00);
    box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}

.navbar a {
   float: left;
   font-size: 16px;
   text-align: center;
   text-decoration: none;
   color: rgba(55,175,75,1.00);
   padding: 30px 16px 11px 16px;
   transition: 0.25s;
   transition-timing-function: ease-in-out;
}

Ich füge padding-top: 2px zu .navbar hinzu und ändere padding: 33px 16px 11px 16px zu padding: 30px 16px 11px 16px

0
Ramin eghbalian 22 Feb. 2020 im 23:18

Hinzufügen:

margin-top: 0.5px;
height: calc(100% - 5px);

Zum Hamburger Menü Icon

0
SW30000 22 Feb. 2020 im 22:52