1
Ich versuche, ein reaktives Nav mit einem Logo aus dem W3C Beispiel zu erstellen. Ich habe jedoch ein Problem mit dem Nav gefunden. Wenn ich das Element auf der rechten Seite der Seite schwebe, ist die Reihenfolge der Nav-Elemente durcheinander. Ich habe sie auf der Desktop-Version neu geordnet, aber ich kann nicht scheinen, sie im mobilen nav richtig zu bestellen. Ich habe versucht, Schwimmern zu verwenden, aber das vermasselt nur das Styling des Dropdowns.Responsive nav Reihenfolge umgekehrt, wenn es in mobile Medienabfrage geht
</head>
<body>
<div id="container">
<nav class="topnav" id="myTopnav">
<img src="img/logo.png" alt="Logo">
<a href="#home" class="active">Home</a>
<a href="#contact">Contact</a>
<a href="#news">News</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</nav>
</body>
</html>
CSS
html{
min-height:100%;
}
body{
margin:0 auto;
padding:0;
font-family: 'Roboto', sans-serif;
height:100%;
width:100%;
}
#container{
margin:0 auto;
height:100%;
width:100%;
/* min-height:100%;*/
/* position:relative;*/
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
padding-left:20%;
padding-right:20%;
margin:0 auto;
}
.topnav img{
float:left;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
display: inline-block;
padding-right:40px;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
/* position: relative;*/
display: inline;
/* display: inline-block;*/
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav {
background-color: #333;
overflow: hidden;
padding: 0;
margin:0 auto;
/* clear: both;*/
}
.topnav.responsive {
position: relative;
height:210px;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
clear: both;
/* position: relative;*/
top:0px;
/* height:100%;*/
float: none;
display: block;
/* text-align: center;*/
}
.topnav a {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
JS
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
Danke, das hat funktioniert, aber jetzt ist das Hamburgermenü unter dem Logo, das eine größere Navigationsleiste erstellt. es geht aber an die richtige Stelle wenn es angeklickt wird. – 3245737
Ich habe CSS geändert. Probieren Sie es jetzt! :) – sakul