CODEWITHSUNDEEP
csstwitter-bootstrappositioningnav
user3625061
user3625061

Reputation: 31

Bootstrap navbar positioning at the bottom within other div

Hope you can help me out here with the following question: I am playing around with bootstrap, I have created a header with a logo on the left site left, which is fine, and on the right site I have created a div container, within this div I have a div for the tel and then I have the navbar.

Please see the screenshot: http://screencast.com/t/ni4izklqtB

Here is my code:

<header id ="mainHeader" class="row">
        <div class="logo col-lg-3">
            <hgroup>
   <h1 id ="logo"><a href="#"><img src="images/webversielogo.png"    class="img-responsive"></a></h1>
            </hgroup>
        </div>

        <div class="telNav col-lg-9" >

        <div class="telefoon">
        SOME TEXT 
        </div><!--Einde Telefoon Class-->

        <div class="navbar navbar-inverse" role="navigation">
         <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <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="#">Kies uw Pagina:</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div><!--/.container -->
    </div> <!--/.navbar navbar-inverse-->
</div>

and here is the css:

.logo{
z-index:200;
}

#logo img{
width:100%;
max-width:250px;
}

/*Start of the Header*/
header{
background-image: -webkit-gradient(
linear,
right top,
right bottom,
color-stop(0, #5C5656),
color-stop(1, #241E20)
);
background-image: -o-linear-gradient(bottom, #5C5656 0%, #241E20 100%);
background-image: -moz-linear-gradient(bottom, #5C5656 0%, #241E20 100%);
background-image: -webkit-linear-gradient(bottom, #5C5656 0%, #241E20 100%);
background-image: -ms-linear-gradient(bottom, #5C5656 0%, #241E20 100%);
background-image: linear-gradient(to bottom, #5C5656 0%, #241E20 100%);
}
.logo .navbar.navbar-inverse {
overflow: hidden;
}

When I make the #telNav's position relative and the navbar, absolute and bottom: 0 is is jumping out of range and out of the parent div. I would like to stack the right bottom of the navbar always with the rightbottom of the telNav, Thank you for answering already,

EZStack

Upvotes: 3

Views: 2095

Answers (1)

Veita
Veita

Reputation: 519

If you want to push the NavBar down, you could use two more div elements within the enclosing div. The first will hold the content above the NavBar, and the next will hold the NavBar to the bottom of the main div. You will have to specify the height of the first div element though.

Upvotes: 1

Related Questions