user6797937 user6797937 - 2 months ago 8
CSS Question

Navigation bar is underneath sections

If you load up this code and scroll around, you will notice that my navigation bar is for some reason, behind the sections of picture. Due to my minute experience with HTML and CSS (~1 week), my efforts to figure out why this is the case has proven futile. If someone could point out to me how to put the navigation bar over these images (sections), it would be extremely helpful.

Additionally, I was wondering whether or not it was possible to center the elements in the nav bar if the positioning was not absolute. However, my first question is of far more priority than this one is.

Thank you,

John



$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
* {
margin: 0;
padding: 0;
}

.font {
font-family: 'Josefin Sans', sans-serif;
}

html, body {
height: 100%;
}
section {
position: relative;
width: 100%;
height: 100%;
}
section::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 80%;
}
section h1.main {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 300 64px/1 'Josefin Sans', sans-serif;
font-weight: bold;
text-align: center;
white-space: nowrap;
}
section h5.main {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 300 16px/1 'Josefin Sans', sans-serif;
text-align: center;
white-space: nowrap;
}

section h1.main2 {
position: absolute;
top: 25%;
left: 25%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 300 64px/1 'Josefin Sans', sans-serif;
font-weight: bold;
text-align: center;
white-space: nowrap;

}

#section01 {
background: url(http://wallpapercave.com/wp/LekAYO3.jpg) center center / cover no-repeat ;
}

#section02 {
background: url(http://i.huffpost.com/gen/1760918/images/o-HIGH-SCHOOL-BUILDING-facebook.jpg) center center / cover no-repeat ;
}

.arrow a {
position: absolute;
bottom: 20px;
left: 48%;
/* z-index: 2; */
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
font-weight: bold;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}

/*
.arrow a:hover {
opacity: .5;
}
*/

#section01 a, #section02 a {
padding-top: 60px;
}
#section01 a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb01 2s infinite;
animation: sdb01 2s infinite;
box-sizing: border-box;
}

#section02 a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid black;
border-bottom: 1px solid black;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb01 2s infinite;
animation: sdb01 2s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb01 {
0% {
-webkit-transform: rotate(-45deg) translate(0, 0);
}
20% {
-webkit-transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
-webkit-transform: rotate(-45deg) translate(0, 0);
}
}
@keyframes sdb01 {
0% {
transform: rotate(-45deg) translate(0, 0);
}
20% {
transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
transform: rotate(-45deg) translate(0, 0);
}
}

/* NAV BAR */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
transform: translateX(-50%);
left: 50%;
top: 0;
width: 100%
}

li {
float: left;
}

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

li a:hover:not(.active) {
color: grey;
transition: 0.2s;
transition-timing-function: ease-in;
}

.active {
color: grey;
}

/* Other styling */

header.mainpage {
textalign: center;
color: black;
position: relative;
}

#h1mainpage{
font-size: 2em;
padding: 2em;
color: black;
}

.maincontainer {
background: white;
margin-top: 8px;
margin-bottom: 8px;
text-align: center;
}

.textalign {
text-align: center;
}


/* Images organization */

#containermain {
display: flex;
justify-content: space-between;
}

#containermain div {
width: 250px;
height: auto;
background: rgb(255,255,255,0);
}

#containermaintext div {
width: 250px;
height: auto;
background: rgb(255,255,255,0);
}

#containermain div:first-child {
border-left: 0;
}

#containermain div:last-child {
border-right: 0;
}

<head>
<meta charset="UTF-8">
<title>Welcome</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="http://www.justinaguilar.com/animations/css/animations.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body style="font: 'Josefin Sans', sans-serif; margin: 0;">
<ul class="mainpage">
<li><a class = "font active" href="#">Home</a></li>
<li><a class = "font" href="#section02">Classes</a></li>
<li><a class = "font" href="contactme.html">About Me</a></li>
<li><a class = "font" href="stemproject.html">STEM Project</a></li>
<li><a class = "font" href="soccer.html">Sports</a></li>
</ul>
<section id="section01" class="arrow">
<h1 class="main">Welcome</h1> <h5 class="main"> <br> <br> <br> <br> A Website </h5>
<a href="#section02"><span></span>Scroll</a>
</section>
<section id="section02" class="arrow">
<h1 class="main" style = "color: black">What school do I attend?</h1> <h5 class="main"> <br> <br> <br> <br> A Website </h5>
<a href="#section02"><span></span>Scroll</a>
</section>
<section id="section03">
<div class="maincontainer">
<header class = "mainpage"> <h1 class="font" id = "h1mainpage"> Use the navigation bar or click the pictures to begin </h1> </header>
</div>
</section>
</body>




Answer

Set the css class mainpage css to have a z-index of 3

For example:

.mainpage {
    z-index:3;
}

This will place the whole ul navbar 'infront' of the sections

For more info on how the z-index property works see This

Comments