0
Wenn meine Navigationsleiste auf Tablet-/Mobil-Größe angezeigt wird und das Hamburger-Symbol angeklickt wird, springt sie nach links und unter meinen Navigations-Tabs erscheint eine seltsame "Lücke". Kannst du mir bitte helfen, das zu lösen? Dies ist mein erstes Mal hier eine Frage zu stellen und zu schreiben HTML ... Vielen Dank im VorausHamburger-Symbol in der Responsive-Nav-Leiste funktioniert nicht richtig
/* NAVIGATION MENU */
.icon img {
\t margin-top: 2.5px;
}
.navbar {
\t padding-left: 0%;
\t background-color: #454242;
\t text-align:center;
}
ul.menu {
\t height: 43px;
\t background-color: #454242;
\t list-style-type: none;
\t margin: 0;
\t padding: 0;
\t overflow: hidden;
\t transiton: 1.0s;
\t font-family: "Gill Sans", Helvetica, Arial, sans-serif;
\t display:inline-block;
\t text-align: center;
}
ul.menu li {
\t float: left;
\t display: inline;
}
ul.menu li a {
\t display: inline-block;
\t color: #FFFFFF;
\t text-align: center;
\t padding: 10px 20px;
\t text-decoration: none;
\t transition: 0.5s;
\t font-size: 17px;
\t height: 23px;
}
ul.menu li a:hover {
\t background-color: #FFFFFF;
\t color: black;
}
ul.menu li a:active {
\t background-color: #FFFFFF;
\t color: black;
}
ul.menu li.icon {
\t display:none;
}
@media screen and (max-width: 680px) { \t
ul.menu li:not(:first-child){
\t display:none;
\t margin: auto;
\t float: left;
}
\t
ul.menu li.icon {
\t display: inline;
\t float: left;
\t position: absolute;
\t left: 0px;
\t text-align: left;
}
}
@media screen and (max-width: 680px) {
.navbar {
\t padding-left: 0%;
}
\t
ul.menu.responsive li.icon {
\t
\t float: left;
\t position: absolute;
\t left: -10px;
\t text-align: left;
\t color: black;
}
\t
ul.menu.responsive{
\t position: relative;
\t height: 258px;
\t transition: 1.0s;
\t width: 100%
}
\t
ul.menu.responsive li{
\t float: none;
\t display: inline;
} \t
ul.menu.responsive li a{
\t display:block;
\t text-align: center;
} \t
}<!--NAVIGATION BAR-->
<div class="navigation col-12">
<div class="navbar">
<ul class="menu">
<li class="icon">
<a href="javascript:void(0);"onClick="dropdownMenu()">☰</a></li>
<li> <a href="test.html">Home</a></li>
<li> <a href="test.html">Eat</a></li>
<li> <a href="test.html">Shop</a></li>
<li> <a href="test.html">Discover</a></li>
<li> <a href="test.html">Edge Club</a></li>
<li> <a href="test.html">Contact</a></li>
</ul>
</div>
</div>
<script>
function dropdownMenu() {
\t document.getElementsByClassName("menu")[0].classList.toggle("responsive");
}
</script>
Entfernen Sie einfach "links: -10px;" von "ul.menu.responsive li.icon" Klasse –
Heyfirst Sache, fügen Sie einen CSS-Reset/Normalizer in Ihrem Code. http://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do! –