CODEWITHSUNDEEP
csstwitter-bootstrap
Kach
Kach

Reputation: 111

Bootstrap container-fluid and container

I am designing a website using twitter bootstrap. Everything is working fine except the header area.

Screenshot

I have used .container-fluid to set the full-width background. And used .container to put the contents within 960px. But the problem is with the logo background. I want logo background area to fill out the left area outside the .container class. Is it possible?

Here is my markup -

<div class="container-fluid full-width">
        <div class="row-fluid header-top">
            <div class="container">
                <div class="span4 logo-area">
                    <div class="logo">
                        <h1> <a href=""> hello.</a></h1>
                    </div>
                </div>

                <div class="menu span8">
                    <div class="navbar">
                        <ul class="nav" id="nav">
                            <li><a href="#"> Home </a></li>
                            <li><a href="#"> Menu Item2 </a></li>
                            <li><a href="#"> Menu Item3 </a></li>
                            <li><a href="#"> Menu Item4 </a></li>
                            <li><a href="#"> Menu Item5 </a></li>
                            <li><a href="#"> Menu Item6 </a></li>               
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </div>

Thanks in advance.

Upvotes: 2

Views: 17358

Answers (2)

Mike Phils
Mike Phils

Reputation: 3505

I think you don't want to use position:absolute property.However you can't make your logo background area to fill out the left area outside the .container class.Because whatever you do it will remain inside .container class. The only way is to either you make the position:absolute or move the your .logo class outside of .container class(just above the the .container class).

Upvotes: 0

feitla
feitla

Reputation: 1334

It is, but you will need to remove it from the flow of the container either by placing it outside of it, or using CSS to control it by giving it position:absolute etc.

Something like:

          <div class="logo">
                <h1> <a href=""> hello.</a></h1>
            </div>

<style>
.logo {
position:absolute;
top:100px;
left:100px;
}
</style>

<div class="container-fluid full-width">
        <div class="row-fluid header-top">
            <div class="container">

                <div class="menu span8">
                    <div class="navbar">
                        <ul class="nav" id="nav">
                            <li><a href="#"> Home </a></li>
                            <li><a href="#"> Menu Item2 </a></li>
                            <li><a href="#"> Menu Item3 </a></li>
                            <li><a href="#"> Menu Item4 </a></li>
                            <li><a href="#"> Menu Item5 </a></li>
                            <li><a href="#"> Menu Item6 </a></li>               
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </div>

Upvotes: 1

Related Questions