Pseudo-Element verschiebt sich nach Größenanpassung Browser

Question

Ich definierte Pseudo-Element nach für mein Menü. Und es sieht wie folgt aus:

Jedes Mal, wenn ich auf anderen Link klicken, bewegt er sich unter diesem Link:

ich dieses Pseudo-Element definiert wie folgt aus:

top: 100%; 
    left: 25.8%; //Changed according to the link 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
    border-top-color: #344553; 
    border-width: 16px; 
    margin-left: -20px; 
    @include transition(left 0.7s ease); 

Zu meiner pseudo bewegen -element ändere ich einfach mein "linkes" Attribut.

Das Problem ist, wenn ich Browser Größe ändern, mein Pseudo-Element verschiebt sich nach links:

Gibt es eine Möglichkeit um es fest zu machen? Oder seine Position mit JS berechnen? Oder vielleicht gibt es eine js-Bibliothek, um solche Sachen zu berechnen?

Vielen Dank!

Answer 1

Sie können verwenden, um die aktuelle Breite des Bildschirms zu finden. Sie können das verwenden, um eine JS-Funktion zu schreiben, um Ihr Pseudo-Element abhängig von der Breite des Bildschirms zu verschieben.

Oder Sie können Ihren Navigationsleistenelementen für bestimmte Bildschirmgrößen eine feste Breite geben und in Ihrem CSS reaktionsfähige Haltepunkte hinzufügen, um die Breite der Navigationsleiste zu ändern.