NAVBAR nach rechts auf Medienabfrage bewegen

Question

Ich versuche, eine Navigationsleiste zu einer festen Position auf der rechten Seite zu bewegen, wenn das Browserfenster eine bestimmte Größe erreicht und es auf der Oberseite hat, wenn es weniger als diese Größe ist. Mit dem Code unten (wie in der Jfiddle gezeigt) richtet sich die Navigationsleiste auf der linken (und nicht auf der rechten) Seite aus, wenn ich die Größe des HTML ändere.

Frage, wie kann ich die Navigationsleiste auf der rechten Seite des Bildschirms auf der Medienabfrage bewegen. Nach einigen Fragen, die ich über SO fand, sollte es ausreichen, position: fixed; top:50%; right:0; zu verwenden, aber es funktioniert nicht wie vorgesehen.

(Beachten Sie, dass Sie die Grenzen des HTML-Abschnitts erweitern können, um die Medienabfrage auszulösen, wenn Sie die Verbindung zu jsfiddle testen möchten.)

Snippet und jsfiddle:

.navbar { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    background-color: #ddd; 
 
} 
 

 
.navbar ul, 
 
.navbar li { 
 
    display: inline-block; 
 
} 
 

 
@media (min-width: 767px) { 
 
    .navbar { 
 
    position: fixed; 
 
    top: 50%; 
 
    right: 0; 
 
    background-color: #ddd; 
 
    width: 0%; 
 
    } 
 
    .navbar ul, 
 
    .navbar li { 
 
    display: block; 
 
    } 
 
}

<nav class="navbar"> 
 
    <ul class="navbar-top-right"> 
 
    <li><button onclick="jump('header')">home</button></li> 
 
    <li><button onclick="jump('special')">Special</button></li> 
 
    <li><button onclick="jump('menu')">Menu</button></li> 
 
    <li><button onclick="jump('map')">Map</button></li> 
 
    <li><button onclick="jump('about')">About</button></li> 
 
    </ul> 
 
</nav>

Answer 1

Ja, Du hast right gesetzt, und das zu Recht. Aber wenn Sie inpsect können Sie sehen, dass das Element auch eine gesetzt hat.

Zurücksetzen der leftleft: initial in der Medienabfrage verwenden und einige width auf Ihre navbar gesetzt - siehe Demo unter:

.navbar { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    background-color: #ddd; 
 
} 
 

 
.navbar ul, 
 
.navbar li { 
 
    display: inline-block; 
 
} 
 

 
@media (min-width: 767px) { 
 
    .navbar { 
 
    position: fixed; 
 
    top: 50%; 
 
    right: 0; 
 
    left: initial; 
 
    width: 125px; 
 
    background-color: #ddd; 
 
    /*width: 0%;*/ 
 
    } 
 
    .navbar ul, 
 
    .navbar li { 
 
    display: block; 
 
    } 
 
}

<nav class="navbar"> 
 

 
    <ul class="navbar-top-right"> 
 
    <li><button onclick="jump('header')">home</button></li> 
 
    <li><button onclick="jump('special')">Special</button></li> 
 
    <li><button onclick="jump('menu')">Menu</button></li> 
 
    <li><button onclick="jump('map')">Map</button></li> 
 
    <li><button onclick="jump('about')">About</button></li> 
 
    </ul> 
 

 
</nav>