CODEWITHSUNDEEP
htmlcss
arp123
arp123

Reputation: 69

how can i put my navigation bar above header

My question is how can I put my navigation bar above my header. from my current code, my navigation bar is displaying after header image (as you can see in the picture) image

and what I want:-

image

here is my code:-

header {
    width:100%; 
    height:275px; 
    position:relative;
    overflow:hidden; 
    z-index:-1;
    border:1px solid lightgreen;
    background-position: center center;
    display: flex;
    background-image:url("../images/index/header/header.jpg");
    background-size: cover;
}

#navul01 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
}

#navul01 li {
    float: left;
}

#navul01 li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border:1px solid darkgreen;
}

#navul01 li a:hover {
    background-color: lightgreen;
}
  <div> <header> </header> </div>
  <div><nav>
     <ul id="navul01">
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">blog</a></li>
        <li><a href="#contact">subjects</a></li>
        <li><a href="#about">contacts</a></li>
     </ul>
  </nav></div>

Upvotes: 1

Views: 4021

Answers (3)

Zuber
Zuber

Reputation: 3473

your html be like this

.main-wrapper {
  position: relative;
}

.nav-container {
  position: absolute;
  left: 0;
  bottom: 0;
}
<div class="main-wrapper">
  <header> </header>
  <div class="nav-container">
    <nav>
      <ul id="navul01">
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">blog</a></li>
        <li><a href="#contact">subjects</a></li>
        <li><a href="#about">contacts</a></li>
      </ul>
    </nav>
  </div>
</div>

Upvotes: 1

Cata John
Cata John

Reputation: 1401

You can wrap both elements, header and nav in a container and assign position relative to this container. Now you can absolute position the nav element inside that container as you see fit. In our case bottom: 0, left: 0 fits your needs perfectly. (I had to replace your image with a background color as that image is stored locally on your pc and i was not able to acces it, please replace that background-color property with your background-image and all will work fine).

.header {
    position: relative;
}
header {
    width: 100%;
    height: 275px;
    position: relative;
    overflow: hidden;
    z-index: -1;
    border: 1px solid lightgreen;
    background-position: center center;
    display: flex;
    background-color: grey;
    background-size: cover;
}
nav {
    position: absolute;
    bottom: 0;
    left: 0;
}

#navul01 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
}

#navul01 li {
    float: left;
}

#navul01 li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border: 1px solid darkgreen;
}

#navul01 li a:hover {
    background-color: lightgreen;
}
<div class="header">
    <header> </header>
    <nav>
        <ul id="navul01">
            <li>
                <a class="active" href="#home">Home</a>
            </li>
            <li>
                <a href="#news">blog</a>
            </li>
            <li>
                <a href="#contact">subjects</a>
            </li>
            <li>
                <a href="#about">contacts</a>
            </li>
        </ul>
    </nav>
</div>

https://codepen.io/Cata_John/pen/oEGMmR?editors=0100

With best regards, Cata

Upvotes: 2

jimixjay
jimixjay

Reputation: 74

You need to set position: absolute to your div (the nav parent, add a class or id to div element). Then you can move the nav with top, left, right and bottom properties (in px, for example).

For you comfort you can put the div inside the other div (the one with the header) because this way you can use margins relatives to this div. This way:

<div>
    <header>
    </header>
    <div class="navbar">
        <nav>
            <ul>
              ...
            </ul>
        </nav>
    </div>
</div>

And the css:

.navbar{
    position: absolute;
    margin-top: ...px;
    margin-left: ...px;
}

Upvotes: 0

Related Questions