How do I get my menu blocks to appear over banner again? - html

Question

So initially the top half of my black menu blocks appeared over the top of the banner, but now the top half of them are cut off underneath of the banner like this:
Here is my styles.css file:
/* Base */
* {
margin: 0;
padding: 0;
}
body {
/*background-color: #F5F4F1;*/
background-image: url('./img/bg.jpg');
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 20px;
color: #353535;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
#banner {
position: relative;
}
#banner__text-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
text-align: center;
}
#banner__title {
font-size: 5.8rem;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
h1,h2,h3,h4,h5,h6 {
margin: 30px 0;
/*font-weight: 200;*/
color: #8ca757;
}
h1 {
font-size: 35px;
}
h1 small {
font-size: 25px;
color: #666;
}
h2 + p {
margin-top: -20px;
}
h3 + p {
margin-top: -20px;
}
h2,h3,h4 {
font-size: 30px;
}
h4.error {
color: #faa722;
}
h5,h6 {
font-size: 20px;
}
p {
margin: 0 0 20px;
}
a:link, a:visited {
color: #8ca757;
}
a:hover {
color: #7a9347;
}
ul, ol {
margin: 0 0 10px 18px;
}
ul li, ol li {
margin: 0 0 15px;
}
hr {
border: none;
height: 18px;
width: 114px;
background-image: url('./img/hr.png') center center no-repeat;
margin: 20px auto;
}
small {
font-size: 12px;
}
blockquote {
background: white;
padding: 10px;
margin: 0 0 15px;
border-left: solid 4px #d1cbb8;
font-style: italic;
}
blockquote p {
margin: 5px 0 10px;
}
blockquote code {
font-style: normal;
}
code {
color: #006699;
font-weight: bold;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}
sup {
font-size: 0.6em;
}
/* Layout */
.wrapper {
position: relative;
width: 620px;
margin: 40px auto;
padding: 40px;
background: white;
text-align: center;
}
.wrapper:before, .wrapper:after {
content: "";
position: absolute;
top: 5px;
left: -5px;
width: 100%;
height: 100%;
background: #97917e;
z-index: -1;
}
.wrapper:before {
top: 10px;
left: -10px;
background: #514933;
}
#logo {
width: 240px;
margin: 0 auto;
display: block;
}
.sandbox {
padding: 20px;
background: #f8f5f1;
text-align: left;
}
aside {
background: white;
border: dashed 2px #97917e;
padding: 10px 20px;
margin: 40px;
}
aside h3 {
font-size: 24px;
margin-top: 10px;
}
aside h6 {
margin: 15px 0 5px;
}
table {
width: 100%;
font-size: 13px;
background: white;
margin: 0 0 20px;
}
table td {
border-bottom: solid 1px #d1cbb8;
padding: 4px;
}
table th {
background: #8ca757;
color: white;
padding: 4px;
font-weight: normal;
font-size: 15px;
}
/* Global */
input {
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
autton, input.button {
display: inline-block;
background: #ccc;
outline: solid 2px #ccc;
border: solid 2px white;
color: white;
padding: 10px 15px;
margin: 20px 0;
text-decoration: none;
font-family: inherit;
font-size: inherit;
font-weight: bold;
cursor: pointer;
}
.button:hover, input.button:hover {
background: #bbb;
outline-color: #bbb;
}
.button.prev {
float: left;
background: #514933;
outline-color: #514933;
}
.button.prev:hover {
background: #494331;
outline-color: #494331;
}
.button.next, input.button.next {
background: #8ca757;
outline: solid 2px #8ca757;
float: right;
}
.button.next:hover, input.button.next:hover {
background: #7c9745;
}
input.button.next {
display: block;
float: none;
width: 100%;
}
.block {
display: block;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
.copyright-info h4, .copyright-info h5 {
margin: 0;
line-height: 18px;
font-size: 14px;
text-align: center;
}
.copyright-info h4 {
font-weight: bold;
}
.copyright-info {
margin: 20px 0 40px;
}
/* Final example website */
#final-example .wrapper {
width: 800px;
padding: 0;
}
#final-example .content {
padding: 20px 50px 50px;
text-align: left;
}
#final-example #nav {
margin: -27px 0 0;
}
#final-example #nav ul {
display: inline-block;
list-style: none;
text-align: left;
}
#final-example #nav ul li {
display: inline-block;
text-align: center;
margin: 0 10px;
}
#final-example #nav ul li a {
display: block;
background: #353535;
outline: solid 2px #353535;
border: solid 2px white;
color: white;
padding: 10px 15px;
text-decoration: none;
}
#final-example #nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
#final-example #philosophy {
text-align: center;
font-size: 18px;
line-height: 22px;
}
#final-example #footer {
font-size: 12px;
line-height: 15px;
margin: 60px 0 0 0;
}
#final-example #footer strong {
display: block;
margin: 0 0 20px;
}
#final-example .column {
display: block;
float: left;
}
#final-example .column.three {
width: 203px;
margin-right: 45px;
}
#final-example .column.last {
margin: 0;
}
#final-example small {
display: block;
text-align: center;
margin: 40px 0 0;
}
#final-example .member {
width: 203px;
float: left;
margin-right: 45px;
}
#final-example .member:last-child {
margin: 0;
}
#final-example .member img {
max-width: 100%;
}
#final-example .closed {
color: #d13916;
}
#final-example .open {
color: #67b512;
}
#menu-items ul {
list-style: none;
margin: 0;
padding: 20px 0;
text-align: center;
font-size: 18px;
}
#menu-items ul li a {
text-decoration: none;
font-weight: bold;
}
.price {
float: right;
font-size: 18px;
font-weight: bold;
color: #353535;
}
#contact {
width: 320px;
margin: 0 auto;
}
#contact-form label {
display: block;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
border: solid 2px #353535;
outline: none;
font-size: 18px;
padding: 10px;
margin: 0 0 10px;
width: 300px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
#contact-form textarea {
resize: vertical;
height: 120px;
}
#contact-form input[type="checkbox"] + label {
display: inline;
cursor: pointer;
}
When I try to do this:
#final-example #nav {
margin: -27px 0 0;
position: absolute;
}
to this
#final-example #nav {
margin: -27px 0 0;
}
this happens:
and text-align:center; did not work. Any ideas?
Here is the index.php:
<!DOCTYPE html>
<html>
<head>
<title>MicroUrb</title>
<link rel="stylesheet" href="assets/styles.css">
</head>
<body id="final-example">
<div class="wrapper">
<div id="banner">
<a href="/" title="Return to Home">
<img src="assets/img/banner0.jpg" alt="MicroUrb">
<div id="banner__text-content">
<h1 id="banner__title">MicroUrb</h1>
</div>
</a>
</div><!-- banner -->
<div id="nav">
<ul>
<li>Home</li>
<li>Team</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div><!-- nav -->
<div class="content">
<div id="footer" class="cf">
<div class="column three">
<strong>Phone</strong>
609.505.3395
</div><!-- column -->
<div class="column three">
<strong>Location</strong>
<!-- location to go here -->
</div><!-- column -->
<div class="column three last">
<strong>Hours</strong>
<em>Tuesday - Thursday</em><br>
1:00pm - 9:00pm<br><br>
<em>Friday and Saturday</em><br>
4:00pm - 11:00pm<br><br>
<em>Sunday - Monday</em>
Closed<br><br>
</div><!-- column -->
</div><!-- footer -->
<small>©2017 MicroUrb</small>
</div><!-- content -->
</div><!-- wrapper -->
<div class="copyright-info">
<?php includes('../assets/includes/copyright.php'); ?>
</div><!-- copyright-info -->
</body>
</html>

Answer 1

Put a z-index on the nav and set the position to relative
#final-example #nav {
margin: -27px 0 0;
z-index: 5;
position: relative;
}

Answer 2

I believe to get the navigation in front of the banner like you are trying to achieve you could utilise the z-index property.
Add a z-index of 1 to your #final-example #nav {} and a z-index of 0 to your #banner {} which will bring the navigation in front of the banner while keeping its absolute positioning in the centre.
The final outcome will be:
#final-example #nav {
margin: -27px 0 0;
position: absolute;
z-index: 1;
}
#banner {
position: relative;
z-index: 0;
}
Let me know if you need any other help.

Answer 3

You can use z-index on the nav element to make it appear above the banner if you set the banner to a lower z-index compared to the nav element.
So for example:
#final-example #nav {
z-index:1;
position:relative;
margin:-27px auto 0;
}
That said, it would be useful if you would've posted your html part as well.
Edit:
Further investigation and with a temporary asset, the code seems to work fine with the code posted above as can be seen in this JSFiddle: https://jsfiddle.net/t2d70q3y/2/
Let me know if you require further assistance.