CODEWITHSUNDEEP
htmlcss
Tudor Alexandru
Tudor Alexandru

Reputation: 269

how can I make the menu be above?

i have a problem with my website, i made my menu for mobile and when i press on the hamburger and the menu appears is below the description about me, I tried to put a larger z-index on the menu but it doesn't work, I tried to put a smaller z-index on the div with my name but it doesn't work, here it is a picture as shown below the menu and div code.image

and this is the code 

  <header class="navigatie shadow nav">
    <a href="#" class="navbar-brand logo ">Tudor Alexandru</a>
    <label for="toggle">&#9776;</label>
    <input type="checkbox" id="toggle" />
    <ul class="meniu-navbar ml-auto menu ">
      <li class="link-navbar activat">Home</li>
      <li class="link-navbar">About Me</li>
      <li class="link-navbar">Projects</li>
      <li class="link-navbar">Photoshop Creations</li>
    </ul>
  </header>

  <div class="myname">
    <h1 class="introduce">Let me introduce myself</h1>
    <h5 class="mynameis"><em>My name is</em></h5>
    <h1 class="tudor">TUDOR ALEXANDRU</h1>
    <h5 class="and"><em>and</em></h5>
    <p class="ilike">I like to learn programming</p>
    <button type="button" class="btn btn-primary"><a href="#aboutme">About Me</a></button>
  </div>

.navigatie{
    display: flex;
    flex-direction: row;
    width: 100%;
}

.meniu-navbar{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    padding-top: 5px;

}
.link-navbar{
    padding: 15px;
    font-size: 1.1rem;
}
.link-navbar:hover{
    color: #280063;

}


.logo{
    color: black;
    margin-left: 76px;
    padding-top: 15px !important;
    font-size: 1.4rem !important;
}

.logo:hover{
    transform: rotate(360deg) !important;
    color: #280063;
}

.activat{
    color: #280063 !important;
}



label{
    margin: 0 40px 0 0;
    font-size: 33px;
    line-height: 70px;
    display: none !important;
}
#toggle{
    display: none;
}
.myname{
    position: absolute;
    top: 180px;
    left: 70px;
}

.introduce{
    font-size: 2.5rem;
}

.mynameis:before{
    content: "< ";
}
.mynameis:after{
    content: " />";
}

.mynameis, .and{
    color: grey;
}

.and:before{
    content: "< ";
}
.and:after{
    content: " />";
}

.ilike{
    font-size: 1.4rem;
}

Upvotes: 1

Views: 63

Answers (1)

Roopesh
Roopesh

Reputation: 101

Set the background-color property of .navigate class to white. Navigator is transparent, so setting z-index won't alone work.

Upvotes: 2

Related Questions