CODEWITHSUNDEEP
htmlcss
Skeptar
Skeptar

Reputation: 149

Bootstrap navigationbar overlay text

i created with bootstrap an "easy" navigationbar. Now the navigationbar overlay the text. I tried to give the .navbar a margin-bottom of 50px, with no result. Here is the Page and here the code:

<!DOCTYPE html>
<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>Seite</title>

        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        
        <link href="css/meine.css" rel="stylesheet">
      
    </head>
    <body>

        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            <a class="navbar-brand" href="#">Startpage4you</a>
            </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Anmelden</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        
        <div class="row">
            <div class="col-md-2">.col-md-4</div>
            <div class="col-md-8">.ccol-md-8</div>
            <div class="col-md-2">.col-md-4</div>
        </div>
        
        
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

.navbar{
    margin-bottom: 50px;
}

Upvotes: 0

Views: 284

Answers (2)

Jack
Jack

Reputation: 2771

Since you are using a fixed navbar, you need to add padding to your body just like the bootstrap docs say:

body {
    padding-top: 70px;
}

http://getbootstrap.com/components/#navbar-fixed-top

Upvotes: 0

Lee
Lee

Reputation: 4323

Because your navigation bar has a fixed property, everything else will appear underneath it, and pushed up to the top of the page.

So you just need to add margin-top:51px to your div 'row', in order for it to be seen.

What I would do though, is put the div class row inside a container, and then apply the margin-top to the container. Then you can use that for subsequent pages.

Upvotes: 2

Related Questions