Why is the navigation bar overwriting the header?

Asked

Viewed 522 times

0

inserir a descrição da imagem aqui

As you can see the navigation bar is covering the header (which the banner as background), but in theory (based on my knowledge, of course) the header should start right after the Nav.

NOTE: I tried to margin-top the header just to test and the Nav went down with it. I tried to use z-index and continued in it.

Anyway, there’s my HTML and CSS code, respectively:

HTML:

<nav>
        <div class="logo">
            <img src="assets/img/logo.png" alt="">
        </div>
        <div class="nav-main">
            <ul>
                <li>Início</li>
                <li>Organização</li>
                <li>Parceiros</li>
                <li>Programação</li>
                <li>Hospedagem</li>
                <li>Trabalhos Cientifícos</li>
            </ul>   
        </div>
        <div class="inscreva-nav">
            <button>Inscreva-se</button>
        </div>
    </nav>

    <header></header>

CSS:

/*barra de navegação*/

nav {
    height: 124px;
    width: 100%;
    background: #c4322e;
    position: fixed;
    opacity: 0.6;
    display: block;
}

.logo{
    height: 124px;
    width: 205px;
    display: inline-block;
}

.logo img{
    width: 100%;
    margin-top: 2.2rem;
}

.nav-main{
    display: inline-block;
}

nav ul{
    float: left;
    list-style: none;
    color: white;
}

nav li{
    font-size: 30px;
    display: inline-block;
    margin-right: 33px;
}

.inscreva-nav {
    float: right;
}

nav button {
    font-size: 30px;
    width: 285px;
    height: 62px;
    background: none;
    border: solid white 3px;
    border-radius: 3px;
    color: white;
    margin-top: 1.8rem;
    margin-right: 23px;
}

/*barra de navegação - fim */

/* header*/
header{
    background: url(../img/teaser.jpg) no-repeat fixed; 
    width: 100%;
    height: 464px;
    display: block;
}
css css3

2 answers

2


As the Nav has Fixed position you need to put a top in the header equal to the Nav height. 

header {
    position: relative;
    top: 124px;
}

  • I had tried to get Fixed off the Nav, but it was still the same thing. But it worked, I didn’t even stop to think about it. Thank you very much, man!

0

You can use a float: left in the header and give a margin-top: 124px; 

/*barra de navegação*/

nav {
    height: 124px;
    width: 100%;
    background: #c4322e;
    position: fixed;
    opacity: 0.6;
    display: block;
}

.logo{
    height: 124px;
    width: 205px;
    display: inline-block;
}

.logo img{
    width: 100%;
    margin-top: 2.2rem;
}

.nav-main{
    display: inline-block;
}

nav ul{
    float: left;
    list-style: none;
    color: white;
}

nav li{
    font-size: 30px;
    display: inline-block;
    margin-right: 33px;
}

.inscreva-nav {
    float: right;
}

nav button {
    font-size: 30px;
    width: 285px;
    height: 62px;
    background: none;
    border: solid white 3px;
    border-radius: 3px;
    color: white;
    margin-top: 1.8rem;
    margin-right: 23px;
}

/*barra de navegação - fim */

/* header*/
header{
    background: url(../img/teaser.jpg) no-repeat fixed; 
    width: 100%;
    height: 464px;
    display: block;
    float: left;
    margin-top: 134px;
}
<nav>
        <div class="logo">
            <img src="assets/img/logo.png" alt="">
        </div>
        <div class="nav-main">
            <ul>
                <li>Início</li>
                <li>Organização</li>
                <li>Parceiros</li>
                <li>Programação</li>
                <li>Hospedagem</li>
                <li>Trabalhos Cientifícos</li>
            </ul>   
        </div>
        <div class="inscreva-nav">
            <button>Inscreva-se</button>
        </div>
    </nav>

    <header>dsada</header>

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.