Body contents überlappende bootstrap navbar?

Ich baue eine Website mit Bootstrap. Die Navigationsleiste verhält sich nicht wie ein statisches Element relativ zu den übrigen Körperelementen. In einigen Fällen werden die Elemente im Körper nach oben gedrückt und decken die Navigationsleiste ab. Dies passiert besonders, wenn ich in die Seite zoome und alles im Body die Navbar verdeckt und die Links nicht klickbar macht. Here is one example of what is occuring. Ich habe ein paar Dinge ausprobiert: Ich habe die Bootstrap-Klasse .navbar-static-top zur navbar hinzugefügt, aber das hatte keine Wirkung. Ich habe mehrere Berichte über die Navbar gelesen, die den Körper verdeckt, aber das Gegenteil passiert mir. Ich habe auch überlegt, den Z-Index zu ändern, aber dann wird der Inhalt der Seite einfach hinter die Navigationsleiste geschoben. Ich habe mir mehrere Fragen zu Stack angesehen, aber keine von ihnen hat es für mich gelöst. HTML:Body contents überlappende bootstrap navbar?

<html lang="EN"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Title</title> 
    <link href="/stylesheets/bootstrap.css" rel="stylesheet"> 
    <link href="/stylesheets/custom.css" rel="stylesheet"> 
</head> 

<body> 
    <nav class="navbar navbar-custom" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
     ...various links... 
     </div> 
    </div> 
    </nav> 
</body>

Hier ist die CSS für .navbar und .navbar-custom:

.navbar { 
    position: relative; 
    min-height: 50px; 
    margin-bottom: 20px; 
    border: 1px solid transparent; 
} 

.navbar-custom { 
    margin-bottom: 0; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
    text-transform: uppercase; 
    font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; 
    background-color: black; 
}

Mein Impuls die Position .navbar zu static statt `` relativ zu ändern war aber das hat es auch nicht getan. Wie kann ich die Navbar wie ein normales statisches Element verhalten und sich nicht vom Rest des Seiteninhalts überlappen lassen?

GitHub Repo

Quelle

2016-10-25 Joel Hoelting

Ihre Frage ist ein wenig unklar. Deine Navbar wird abgedeckt, wenn es nicht sein sollte? Hast du ein Arbeitsbeispiel, das du teilen kannst? – worc

Also, ein bisschen peinlich, aber ich habe herausgefunden, was das verursacht hat. Einige CSS, die ich vor ein paar Tagen in mein Stylesheet geschlichen habe, wodurch das div automatisch vertikal zentriert wurde, was nicht für responsives Design geeignet ist. –

ich es herausgefunden. Ich hatte etwas Code, der das Div vertikal zentriert hat. Das war was die navbar durch die div abgedeckt werden, wenn ein-

Der Täter war einige CSS, die ich auf der div in Frage zu stellen.

.vert-center { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

Quelle

2016-10-25 23:29:18

Body contents überlappende bootstrap navbar?

Antwort

Verwandte Themen