Responsive Navigation nicht funktioniert, verlorene Übersicht über meine CSS

hoffe, ich kann hier Hilfe finden. Ich versuche, diese Navigationsleiste ansprechbar zu machen. Ich begann mit einem W3Schools Tut dafür, aber ich verlor den Überblick über meine CSS-Datei und kann nicht das Problem finden, warum das nicht funktioniert. Danke für jede Hilfe!Responsive Navigation nicht funktioniert, verlorene Übersicht über meine CSS

Live-Seite: www.air-transfer.at

CodePen: https://codepen.io/gosagir/pen/vpgJrW

HTML-Code:

<!DOCTYPE html> 
<html lang="de-AT"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="title" content="&#9654; Umzug nach Berlin | Ihr Umzugsprofi | Europaweite Umzüge -50%" /> 
    <meta name="description" content="Ihr verlässlicher Partner rund um Ihren Umzug nach Berlin. Mit Erfahrung aus über 15.000 Umzügen in ganz Europa. Jetzt unverbindlich anfragen. ✓ EU-Umzug -50%"> 
    <meta name="robots" content="index, follow" /> 
    <meta name="keywords" content="umzug nach berlin, umzug berlin, umzug, berlin, umzugsfirma, übersiedlung" /> 
    <title>Umzug nach Berlin - umzugdirekt.at</title> 
<link href="css/styles.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<!-- start header --> 
<header> 
    <!-- start navigation --> 
    <nav class="navbar"> 
     <div class="nav-elements"> 
      <div class="umzugdirekt_logo_nav"> 
      <a href="http://www.air-transfer.at/"> 
       <img src="img/umzugdirekt_logo.svg" alt="umzugdirekt_logo" class="umzugdirekt_logo_link" /> 
      </a> 
      </div> 
      <div class="menu" id="mymenu"> 
      <ul class="menu-ul" id="mymenu-ul"> 
       <li><a href="http://www.air-transfer.at/">Home</a></li> 
       <li class="dropdown"> 
        <a href="javascript:void(0)" class="dropbtn">Leistungen =</a> 
       <div class="dropdown-li"> 
        <a href="http://www.air-transfer.at/Privatumzug/">Privatumzug</a> 
        <a href="http://www.air-transfer.at/Firmenumzug">Firmenumzug</a> 
        <a href="http://www.air-transfer.at/Auslandsumzug">Auslandsumzug</a> 
        <a href="http://www.air-transfer.at/Entruempelung">Entrümpelung</a> 
        <a href="http://www.air-transfer.at/Raeumung">Räumung</a> 
        <a href="http://www.air-transfer.at/Transport">Transport</a> 
        <a href="http://www.air-transfer.at/Einlagerung">Einlagerung</a> 
       </div> 
       </li> 
       <li><a href="http://www.air-transfer.at/Preise">Preise</a></li> 
       <li><a href="http://www.air-transfer.at/Kontakt">Kontakt</a></li> 
       <li><a href="javascript:void(0);" class="icon" onclick="myFunction()">\</a></li> 
      </ul> 


     </div> 
     </div> 
     </nav> 
     <script> 
function myFunction() { 
    var x = document.getElementById("menu li"); 
    if (x.className === "menu li") { 
     x.className += " responsive"; 
    } else { 
     x.className = "menu li"; 
    } 
} 
</script> 
     <!-- end navigation --> 
</header> 
<!-- end header --> 
<!-- start section 1 --> 
</body> 
</html>

CSS-Code: /*

Table of contents 

    01. Font & Typographic 
    02. Navbar 
    03. 

*/ 


/* =================================== 
    01. Font & Typographic 
====================================== */ 

/* Font */ 
@font-face { font-family: 'titillium'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('../fonts/TitilliumWeb-Regular.woff2') format('woff2'), 
      url('../fonts/TitilliumWeb-Regular.woff') format('woff'), 
      url('../fonts/TitilliumWeb-Regular.ttf') format('ttf'), 
      url("../fonts/TitilliumWeb-Regular.svg#TitilliumWeb-Regular") format("svg"), 
      url('../fonts/TitilliumWeb-Regular.eot') format('eot'); 
} 

@font-face { 
    font-family: 'titillium'; 
    font-style: bold; 
    font-weight: 700; 
    src: url('../fonts/TitilliumWeb-Bold.woff2') format('woff2'), 
      url('../fonts/TitilliumWeb-Bold.woff') format('woff'), 
      url('../fonts/TitilliumWeb-Bold.ttf') format('ttf'), 
      url("../fonts/TitilliumWeb-Regular.svg#TitilliumWeb-Regular") format("svg"), 
      url('../fonts/TitilliumWeb-Bold.eot') format('eot'); 
} 

html { 
    font-family: 'titillium', sans-serif; 
    font-smoothing: antialiased; 
    -moz-font-smoothing: antialiased; 
    -webkit-font-smoothing: antialiased; 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-tap-highlight-color: transparent; 
} 

/* heading */ 
h1, h2, h3 {margin:0 0 25px; padding:0; letter-spacing: 0; font-weight: 700;} 
h1 {font-size:70px; line-height: 70px;} 
h2 {font-size:55px; line-height:60px} 
h3 {font-size:48px; line-height:54px} 


/* =================================== 
    02. Navbar 
====================================== */ 

/* Navbar */ 

body {margin:0;} 

.navbar { 
    box-sizing: border-box; 
    background-color: #FFFFFF; 
    position: fixed; 
    top: 0; 
    padding: 0 30px; 
    width: 100%; 
    height: 80px; 
    box-shadow: rgba(0,0,0,.12) 0 1px 3px; 
} 

.nav-elements { 
    box-sizing: border-box; 
    background-color: #FFFFFF; 
    height: 80px; 
    overflow: hidden; 
    max-width: 1400px; 
    margin: 0 auto; 
} 

.umzugdirekt_logo_nav { 
    display: block; 
    float: left; 
} 


.umzugdirekt_logo_nav img { 
    display: block; 
    height: 40px; 
    width: 240.984px; 
    padding: 20px; 

    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;  
} 

.menu { 
    float: right; 
} 

.menu ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    font-size: 19px; 


} 

.menu li { 
    float: left; 
} 

.menu li a { 
    display: block; 
    padding: 25.5px 20px; 
    text-decoration: none; 

} 

a:link { 
    color: #132539; 
    -webkit-transition: all .2s ease-in-out; 
    -moz-transition: all .2s ease-in-out; 
    -ms-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
} 

a:visited { 
    color: #132539; 
} 

a:hover { 
    color: #05aee9; 
} 

.active { 
    color: #05aee9; 
} 

.dropdown-li { 
    display: block; 
    margin: 0 0 0 22px; 
    position: absolute; 
    background-color: #FFFFFF; 
    min-width: 210px; 
    line-height: 0px; 
    box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.06); 
    border-top: 3px solid #05aee9; 
    visibility:hidden; 
    opacity:0; 
    transition:visibility 0s linear 0.2s,opacity 0.2s linear; 
} 

.dropdown-li a { 
    text-decoration: none; 
    display: block; 
    text-align: left; 
    border-bottom: 1px solid #dcdadb; 
} 

.dropdown-li a:last-child { border-bottom: none; } 

.dropdown-li a:hover { 
    background-color: #f6f6f6; 
    color: #132539; 
} 

.dropdown:hover .dropdown-li { 
    visibility:visible; 
    opacity:1; 
    transition-delay:0s; 
} 

.menu .icon { 
    display: none; 
} 

@media screen and (max-width: 1000px) { 
    .menu li a:not(:first-child) {display: none;} 
    .menu li a.icon { 
    float: right; 
    display: block; 
    } 
} 

@media screen and (max-width: 1000px) { 
    .menu li.responsive {position: relative;} 
    .menu li.responsive .icon { 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
    .menu li.responsive a { 
    float: none; 
    display: block; 
    text-align: left; 
    } 

}

Quelle

2017-12-26 Gökhan Sagir

Medienanfragen sind die Schlüssel, sie zu lösen, werfen Sie einen Blick: https: //www.w3schools .com/cssref/css3_pr_mediaquery.asp – danielarend

Sie haben einige Probleme mit Ihren Selektoren. Übrigens, ich weiß nicht, warum Sie die Klassen in JS statt in HTML hinzufügen. –

Du hast ein Cou Probleme. Erstens sind Sie ein Klasse-Selektor, .icon, in Ihren Medien-Anfragen, die zu Ihrem Anker nicht angewandt wird (a-Elemente) etwas wie das folgende wird es beheben:

<li><a class="icon" href="http://www.air-transfer.at/">Home</a></li>

Zusätzlich in Ihrem JS "menu li" ist ein Tag-Selektor und es gibt kein Menü-Tag. Sie möchten eine Klassenauswahl ".menu li" und getElementById wird nicht mit einer „CSS-Selektor“ arbeiten Sie unten sehen wollen querySelectorAll:

window.onload = myFunction 

function myFunction() { 
    var x = document.querySelectorAll(".menu li"); 
    for(var i=0; i< x.length; i++) { 
     if (x[i].className === "") { 
      x[i].className += " responsive"; 
     } else { 
      x[i].className = ""; 
     }  
    } 
}

Quelle

2017-12-26 22:07:07

Responsive Navigation nicht funktioniert, verlorene Übersicht über meine CSS

Antwort

Verwandte Themen