Matthieu Topize Matthieu Topize - 2 months ago 19
CSS Question

Slideshow overtopping nav bar and nav bar elements positioning

I am trying to move the block of elements such as "Home" , "news" etc to the middle or position it where I want in the nav bar. I tried using the "left" in the ul section , but it is moving the whole nav bar.

CSS section
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<head>

<!-- nav section -->
<style>

body {margin:0;}
body {
background-color: #393939;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: fixed;
top: 0;
width: 100%;
left:0px;

}

li {
float: left;

}

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

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4CAF50;
}

#wrapper {
width: 720px;
margin: auto;

}

#slideshow {
padding: 15px 40px;

}

h1{
font-size: 40px;
margin-top:35%;
margin-left:-27%;
font-style: italic;
font-size: 28px;
font-variant: small-caps;
overflow: hidden;

}
h1:after {
background-color: gray;
content: "";
display: inline-block;
height: 1px;
position: static;
vertical-align: middle;
width: 70%;
left: 0.5em;
margin-right: -50%;
}

#images{
float: left;
margin: 0px 0px 10px -150px;}
}

</style>
</head>
<body>

<div id="wrapper">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Trailers</a></li>
<li><a href="#about">Series</a></li>
</ul>

<!-- end of nav section -->


HTML SECTION
<!-- slideshow -->
<div id="slideshow">
<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content" style="max-width:750px;position:relative;left:-200px;height:200px;">

<img class="mySlides" src="images/1.jpg" style="width:100%;height:380px;">
<img class="mySlides" src="images/2.jpg" style="width:100%">
<img class="mySlides" src="images/3.jpg" style="width:100%">
<img class="mySlides" src="images/8.jpg" style="width:100%">

<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">></a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)"><</a>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
showDivs(slideIndex += n);
}

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}

</script>
<!-- end of slideshow -->
</div>

</body>

</html>


My website: http://bcns2k16mt.net16.net/BCNS_16A_FT_160312/

Answer

The reason the navigation gets bellow the slideshow is because you need to set the navigation to an higher layer with z-index this should do the trick.

Use z-index on ul

ul {
   ...
   z-index: 5;
}