how do I make my side nav float over my full width slider
Question
Im trying to get my side nav to float over the top of my full width slider at the top of the web page, when I place a slider on the webpage the nav button for my side nav becomes un-clickable tried z-index method It don't seem to be working for some reason any advice would be great thanks in advance.
<header>
<!-- sidebar starts-->
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn hvr-grow-rotate" onclick="closeNav()">×</a>
<h3 class="nav-title">test</h3>
<li><a href="index.html"><span class="fa fa-home nav-icon"> Home</span></a></li>
<li><a href="#"><span class="fas fa-store nav-icon"> About</span></a></li>
<li><a href="#"><span class="fas fa-cut nav-icon"> Services</span></a></li>
<li><a href="#"><span class="far fa-images nav-icon"> Gallery</span></a></li>
<li><a href="#"><span class="fas fa-comments nav-icon"> Reviews</span></a></li>
<li><a href="#"><span class="fas fa-map-marked-alt nav-icon"> Location</span></a></li>
<li><a href="#"><span class="fas fa-envelope nav-icon"> Contact Us</span></a></li>
<h5 class="nav-title-Socials">Our Socials</h5>
<ul class="icons">
<li class="facebook-icon hvr-bounce-in"><a href="#"><i class="fab fa-facebook color-facebook"></i></a></li>
</ul>
</div>
<div id="main" class="text-right">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
</div>
</header>
<body>
<div class="">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x400/cccccc/ffffff">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/999999/cccccc">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/dddddd/333333">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/999999/cccccc">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
</ul>
</div><!-- End Carousel -->
</div>
/* Nav CSS */
.sidenav {
z-index : 99999;
height: 100%;
width: 0;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
opacity: 0.9;
letter-spacing: 1.5px;
background: #a2a9b4;
position: absolute;
clear: both;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
transition: 0.3s;
color: white;
}
.sidenav .closebtn {
position: absolute;
top: 5px;
right: 15px;
font-size: 36px;
margin-left: 50px;
color: #fff;
background-color: rgba(66, 66, 66, 0.5);
padding: 0px 14px;
border-radius: 5px;
}
#main {
transition: margin-right 0.5s;
padding: 16px;
float: right;
}
#main span {
position: fixed;
top: 15px;
right: 15px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 0px 10px;
border-radius: 5px;
}
.nav-title{
font-family: 'fiolex_girls';
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 32px;
color: #818181;
display: block;
transition: 0.3s;
color: white;
}
/* = slider
----------------------------------------------- */
#myCarousel .nav a small {
display:block;
z-index: -98;
}
#myCarousel .nav {
background:#eee;
}
#myCarousel .nav a {
border-radius:0px;
}
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginRight = "0";
}
1 answers
solution1
1 ACCPTED 2018-08-05 23:41:04
Using CSS target your Navigation Div using .sidenav and replace the Height and width with
height:100vh; width:100vw;
which will allow your navigation DIV to use Whole screen. for more HELP please give JavaScript Code so we can see what are you trying to do using JS click Events.
Thanks
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I make my JQuery image slider the width of the screen?
How do I make my Bootstrap Carousel the full width of the page?
How do i make my side menu push my website over?
How do I add text over my image slider and make it different for each image?
How do i make my Nav Display This popup using reactjs
How do I make a full width slider in index.html.erb of spree commerce
How i can make my nav bar to come over my background
How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over is?
How would I make the slider cover the full width and height of this page?
How do I make this bullet navigation work in my Jquery slider?
Related Tags