CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
SAT Rai
SAT Rai

Reputation: 25

Navbar & container gets collapsed

i m trying to keep Hello as a heading below nav tag. This is my HTML.

<nav class="navbar navbar-default navbar-fixed-top" style="background-color: aliceblue;" role="navigation">
<div class="container-fluid">
    <div class="navbar-header">
        <img class="img-responsive" src="img/logo.png" style="width: 330px; height: 49px;" />
    </div>
    <ul class="nav navbar-nav navbar-right" id="navbarprop">
        <li id="home" class="active">
            <a class="color" href="#"><i class="glyphicon glyphicon-home"></i>&nbsp Home</a>
        </li>              
    </ul>
</div>
</nav>
<div class="container">
<h1>HELLO</h1>
</div>

I want to make my page responsive. The problem arise is the Hello is printed inside the nav tag. i have to apply margin-top:50px; to make "HELLO" visible. How do i make it responsive. This is the image with no margin top https://i.sstatic.net/UZMBK.jpg Hello is inside the nav. This is the image with margin top https://i.sstatic.net/Jrxhg.jpg Thank You in advance!

Upvotes: 0

Views: 66

Answers (2)

ExploreNav
ExploreNav

Reputation: 396

You can solve this with media screen, just give another margin top for screens less than 767px(except tablet,laptop and desktop) Hope it will help you.

<style>
body
{
    background-color:#4FE1A8;
}
 #wrapper
 {
     margin-top:50px;
 }
 @media screen and (max-width:767px)
 {
     #wrapper
 {
     margin-top:100px;
 }
 }
</style>
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: aliceblue;" role="navigation">
<div class="container-fluid">
    <div class="navbar-header">
        <img class="img-responsive" src="img/logo.png" style="width: 330px; height: 49px;" />
    </div>
    <ul class="nav navbar-nav navbar-right" id="navbarprop">
        <li id="home" class="active">
            <a class="color" href="#"><i class="glyphicon glyphicon-home"></i>&nbsp Home</a>
        </li>              
    </ul>
</div>
</nav>
<div class="container" id="wrapper">
<h1>HELLO</h1>
</div>

Upvotes: 1

i7nvd
i7nvd

Reputation: 1318

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

Look particularly at the part where it says the body requires padding.

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

Upvotes: 3

Related Questions