Matthieu Topize Matthieu Topize - 2 years ago 107
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
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">

<!-- nav section -->

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%;


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;


font-size: 40px;
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%;

float: left;
margin: 0px 0px 10px -150px;}


<div id="wrapper">
<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>

<!-- end of nav 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>

var slideIndex = 1;

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";

<!-- end of slideshow -->



My website:

Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download