CODEWITHSUNDEEP
htmlcss
Master
Master

Reputation: 2163

Adding header above navbar

I'm having trouble style/adding a header above my navbar. I was able to add the header but the alignment is completely off.

I'm trying to have it align with the first navbar button. May I ask how do I create/edit my header such that it'll align with the navbar. 

<div class="container" style="background-color: #00a3a3;">
    <div class="row">
        <div class="col-md-12">
            <h2 class="pull-left" style="color: white">THE COMPANY NAME</h2>
        </div>
    </div>
</div>

http://codepen.io/anon/pen/RrwvNa

I was able to get it to align using this code

<nav class="navbar" style="background-color: #00a3a3;">
    <div class="container-fluid col-sm-1">
    </div>
    <div class="col-sm-7">
        <div>
            <h2 class="pull-left" style="color: white">THE COMPANY NAME</h2>
        </div>
    </div>
</nav>

but there seems to be a space between the header and the nav bar.

Upvotes: 2

Views: 2747

Answers (1)

Chonchol Mahmud
Chonchol Mahmud

Reputation: 2735

Here is the solution. Take a look in Codepen

Change your container to container-fluid and use margin-left:8.5% in your h1 header.

    <div class="container-fluid" style="background-color: #00a3a3;">
        <div class="row">
            <div class="col-md-12">
                <h2 class="pull-left" style="margin-left:8.5%;color: white">THE COMPANY NAME</h2>
            </div>
        </div>
    </div>

Upvotes: 1

Related Questions