CODEWITHSUNDEEP
htmlcssz-index
Consett web services
Consett web services

Reputation: 5

How do I stack one navigation menu on top other the other using z-index?

I am a bit stuck trying to place or stack two navigation menus on top of each other, I am using Bootstrap, HTML and CSS.

I think I might need to use the z-index, but not sure exactly how.

I have added the code below and included picture of what I would like to achieve.

Code:

<!<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css" type="text/css">
  </head>
  <body>

  <nav class="navbar navbar-expand-md bg-white navbar-white">
    <a class="navbar-brand"  href="#">
    <img src="assets/logo2.png"height="84px">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="accessability">
        <li class="nav-item">
          <a class="contrast">Contrast</a>
        </li>
        <li class="Font-size">Font size</a>
        </li>
        <li class="download">Download a brochure</a>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">New Vehicles</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Nearly New/ Used Vehicles</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Motability</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Aftercare</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact Us</a>
        </li>
      </ul>
    </div>
  </nav>
  <br>
  <nav class="navbar navbar-inverse bg-primary">
  <ul>
      <li class="sec-menu">Versa Connect</li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="sec-menu"><a href="#">Overview</a></li>
        <li class="sec-menu"><a href="#">Offers</a></li>
          <li class="sec-menu"><a href="#">Models</a></li>
            <li class="sec-menu"><a href="#">Optional Extras</a></li>
      </ul>
</nav>
  <section id="cover_image">
    <div class="container">
 <img src="assets/cover_image.jpg" >
 <div class="text-block">
   <h1>Versa Connect</h1>
   <p>The Ford Torneo Connect is a relaxing and comfortable place to be.
   Great to drive, great to sit in, it boasts premium finish, high quality materials
 and fuel efficiency without compromising everyday practicality. </p>
 <button type="button" class="btn btn-lg btn-primary">Make an enquiry</button>
 </div>
</div>


    </body>
</html>

CSS

h1{
  font-family: roboto;
}

p{
  font-family: roboto;
  font-size: 18px;
}
li{
  font-family: roboto;
  font-size: 18px;
  display:inline;

  padding: 30px;
}

li a{
  color: #000;
}
.navbar-right{
  float: right !important;
  margin-right: -15px;
  display: inline;
}
ul.nav navbar-nav navbar-right li a{
  display: flex;
}
li.sec-menu a{
  color: #fff;
  font-family: roboto;
}
.container{
  margin: 0;
  padding: 0;
}
.text-block {
  text-align: center;
  position: absolute;
  bottom: 10px;
  left: 100px;

  background-color:rgba(255,255,255,0.66);
  color:#000;
  width: 380px;
  padding:50px;
}
.btn btn-lg btn-primary{
  padding-left: 10px;
  width: 360px;
}

I would appreciate it if somebody could help me with my coding and show me how or where I should code the z-index in my code. Screenshot

Upvotes: 0

Views: 235

Answers (2)

codeKracken
codeKracken

Reputation: 190

This works, you do not need the z-index. You can view it here on codepen https://codepen.io/anon/pen/Rvdgaq

<nav class="navbar navbar-expand-md bg-white navbar-white">
    <a class="navbar-brand"  href="#">
         <img src="assets/logo2.png"height="84px">
    </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">

 <ul class="accessability">
    <li class="nav-item">
      <a class="contrast">Contrast</a>
    </li>
    <li class="Font-size">Font size</a>
    </li>
    <li class="download">Download a brochure</a>
    </li>
   </ul>
<ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">New Vehicles</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Nearly New/ Used Vehicles</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Motability</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Aftercare</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact Us</a>
    </li>
  </ul>
</div>
</nav>

    <nav class="navbar navbar-inverse bg-primary">
  <ul>
      <li class="nav-item sec-menu">Versa Connect</li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="nav-item sec-menu"><a href="#">Overview</a></li>
        <li class="nav-item sec-menu"><a href="#">Offers</a></li>
        <li class="nav-item sec-menu"><a href="#">Models</a></li>
        <li class="nav-item sec-menu"><a href="#">Optional Extras</a></li>
      </ul>
</nav>

  </div>

</div>
 <section id="cover_image">
    <div class="container">
      <div class="row">
         <img src="assets/cover_image.jpg" >
 <div class="text-block">
<h1>Versa Connect</h1>
<p>The Ford Torneo Connect is a relaxing and comfortable place to be.
   Great to drive, great to sit in, it boasts premium finish, high quality materials
 and fuel efficiency without compromising everyday practicality. </p>
 <button type="button" class="btn btn-lg btn-primary">Make an enquiry</button>
 </div>
</div>
</div>
 </section>

A Few things I noticed, 1. You did not close off your section tag so that could be causing issues. And you do not need postion: absolute; on .text-block, take off bottom: 10px;

Make it position relative

Upvotes: 1

Nick
Nick

Reputation: 1422

The z-index property is used for stacking items on top of each other via the z plane (think of a 3-dimensional plane), so that property would not help you here. All you need to do is create each navbar using a separate "nav" or "div" tag, which will put them on separate lines.

You are on the right track, but you have multiple errors in your code that are causing this issue. Your navbar consisting of "Contrast, Font Size, Download a Brochure" have closing anchor tags but not beginning anchor tags. This navbar is also using a class "accessability" that is not defined in your CSS, which is why it's appearing as an unstyled unordered list.

Here is a simple version of what you are looking for: 

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

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
	<nav>
		<ul>
			<li><a href="#">Contrast</a></li>
			<li><a href="#">Font Size</a></li>
			<li><a href="#">Download a Brochure</a></li>
		</ul>
	</nav>
	<nav>
		<ul>
			<li><a href="#">New Vehicles</a></li>
			<li><a href="#">Nearly New/Used Vehicles</a></li>
			<li><a href="#">Motability</a></li>
			<li><a href="#">Aftercare</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
	</nav>
</body>
</html>

Upvotes: 1

Related Questions