CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Dan
Dan

Reputation: 597

How to keep navbar height fixed even if it contains a bigger item (Bootstrap)

I have a NavBar in Boottrap that holds couple of times. One of them is a box that its height is bigger than the whole bar. The problem is the navbar height increases while the item is bigger. I want to item fall out of the navbar if its bigger. and also keep the responsive aspect too.

DEMO:http://www.bootply.com/oeFRrvH8pl

My code:

<nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">NAME</a>
                
            </div>
            <div class="nav navbar-nav navbar-right">
                <div class="red">
                12345678 <br> Call us
                </div>
            </div>
        </div>
</nav>

This image is what I am looking to achieve: enter image description here

Any idea ?

Upvotes: 0

Views: 6198

Answers (4)

Abruzzi
Abruzzi

Reputation: 495

Except other answer to set a height for .navbar, you can also change the position of .red like below:

.red{
    position: absolute;
    padding:15px;
    background-color:red;
    font-size:20px;
}

Upvotes: 1

SergeDirect
SergeDirect

Reputation: 2069

Take that element out of your nav

<style>
.red{
position:relative;
margin-top:-"here specify the nav height";
right:0;
z-index:99
}

</style>
<nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">NAME</a>

            </div>

        </div>
</nav>
                <div class="red">
                12345678 <br> Call us
                </div>

Upvotes: 0

michaelpri
michaelpri

Reputation: 3651

Set the .navbar's height to 10px (or however big you want to make it) using CSS.

Upvotes: 1

nunoarruda
nunoarruda

Reputation: 2904

Set a fixed height on the nav. Like so:

.navbar {
    height: 50px;
}

Upvotes: 1

Related Questions