Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by abhisheklomsh5
abhisheklomsh5
4,365 Points

Unable to display content below Nav Bar in Html. The “Hello World” should display below navigation bar

This hello world doesn't displays. On the inspect element, it appears to be on the top of the page. If I add Hello world before nav ending bracket, then it displays within navigation bar at the relative position to the other elements.

I am using bootstrap.css and my own styles. It should display as shown in image in google drive... https://drive.google.com/file/d/0B3RZkWk-pASgelVKSl9LZkZndTQ/view?usp=sharing

<!DOCTYPE html> <html>

<head> <link rel="stylesheet" type="text/css" href="bootstrap.css">

</head> <style type="text/css"> .navbar{ padding-bottom:25px; background-color: #808080; } a { color: white;

} .menu{ margin: auto; width: 50%;

padding: 10px;

} body,html { overflow: hidden; }

</style> <!-- Main Body-->

<body> <div class="container"> <!-- Navigation Bar starts--> <nav class="navbar navbar-default navbar-fixed-top">

    <div class="container">
    <div class="well"> Smart Campus
    </div>
    </div>
            <div class="menu">
            <ul class="nav nav-pills">
                <li role="presentation" class="active"><a href="#">Ideas</a></li>
                  <li role="presentation"><a href="#">Projects</a></li>
                  <li role="presentation"><a href="#">Communities</a></li>
                  <li role="presentation"><a href="#">Knowledge</a></li>
                  <li role="presentation"><a href="#">Showcase</a></li>
                  <li role="presentation"><a href="#">News&Events</a></li>
                  <li role="presentation"><a href="#">About</a></li>
            </ul>
            </div>
    <div class="menu" >
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
            </button>




        </div>
    </div>


</nav>
<!-- Navigation Bar starts-->
<!-- But this hello world doesn't displays. On the inspect element, it appears to be on the top of the page.-->
<div>Hello World</div>

</div>

</body>

</html>

1 Answer

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Body padding is required for navbar-fixed-top.

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. See the Bootstrap Components Guide for more info.

According to the devtools, your navbar is 232 pixels high.

body { padding-top: 232px; }

Next time, please use a publicly-accessible CDN to include your bootstrap. Or at least mention which version you are using.

And when posting code, be sure to format it using the instructions from the Markdown Cheatsheet found below the "Add an Answer" area :arrow_heading_down: