HTML CSS, Bootstrap responsive DIV height

Question

Good day,

I am trying to make my first responsive layout with the help of the Bootstrap Framework.

As a base layout I have taken an example template and I am now trying to modify this template.

I have added the following:

    <div class="row col-xs-12 col-md-6 border1" id="HeadBar">
        This is not showing up
    </div>

Here I want to place the page header (logo and company title)

My CSS code :

#HeadBar {
    background-color: #ffffff;
    height: 10%;
    width: 100%;
    position: relative;
    display: block;
}
#HeadBar h1 {
    margin: 0px;
    padding: 10px;
}

The problem is.. The #HeadBar doesn't show up at all. Let alone being responsive.

Adding a H1 tag does make it visible. But I want it to be visible without any additions.

I hope that anyone could see my errors. I know this is very basic. But I need to get a hang of it

https://jsfiddle.net/ferencik/zb50wgve/

Answer 1

Still need some addition, like adding z-index:1001 (or any value more than 1000 because you have class navbar-static-top in your nav - it have z-index:1000 - which overlap your #HeadBar) in #HeadBar

#HeadBar {
    background-color: #FFF;
    width: 100%;
    position: relative;
    display: block;
    height: 10%;
    z-index: 1001;
}

Answer 2

Add z-index: 9999; to the css.

Fiddle