I'm trying to expand my nav bar, however it overlaps into the hero image below it: Current View
My goal is to have the nav bar completely above it and with the light blue background Here is my current nav css:
nav { text-align: center;
background-color: #0170C0;
height: 50px;
font-weight: bold; }
nav ul { list-style-type: none;
padding-left: 0;
border-top: 1px solid #EEEEEE;
background-color: #0170C0;
}
nav li { text-align: center;
padding-top: .5em;
padding-bottom: .5em;
}
nav a { text-decoration: none;
font-weight: bold;
}
Here is my css for the hero image:
#indexhero { height: 350px;
background-image: url(pictures/KIDS.jpg);
background-size: 100% 100%;
background-repeat: no-repeat; }
Here is the html code for the page:
<div id="base">
<header>
<h1><a href="index.html">Introduction of Mac Miller</a></h1>
</header>
<nav>
<ul>
<li><a href="index.html">Introduction</a></li>
<li><a href="swimming.html">Swimming</a></li>
<li><a href="circles.html">Circles</a></li>
<li><a href="concept.html">Concept</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<br>
<div id="indexhero">
</div>
<div>
<piccaption> Mac Miller front and Center of his K.I.D.S. mixtape </piccaption>
</piccaption>
</div>
In case you need it here is the "base" wrapper (contains nav and hero image wrapper)
#base { background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
width: 90%;
min-width: 400px;
padding-top: 0.2em;
box-shadow: 5px 5px 5px #A9BACE; }
My goal is to have something that looks like this: End goal example
Any help is greatly appreciated! P.S. Working minimal example below. 1st example nav inline. 2nd example nav is column (want to keep inline code for desktop screens want column for mobile screens however it overflows onto hero image) trying to get mobile view to 'End Goal Example' seen above.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Swimming In Circles</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* { box-sizing: border-box;
margin: 0; }
#indexhero { height: 350px;
background-image: url(pictures/KIDS.jpg);
background-size: 100% 100%;
background-repeat: no-repeat; }
#base { margin: auto;
width: 90%; }
nav { text-align: center;
background-color: #0170C0;
height: 50px;
font-weight: bold; }
nav a { text-decoration: none; }
nav ul { list-style-type: none;
padding-top:0.9em;
padding-bottom:0.9em; }
li { display: inline;
padding: 3em; }
</style>
</head>
<body>
<div id="base">
<header>
<h1><a href="index.html">Introduction of Mac Miller</a></h1>
</header>
<nav>
<ul>
<li><a href="index.html">Introduction</a></li>
<li><a href="swimming.html">Swimming</a></li>
<li><a href="circles.html">Circles</a></li>
<li><a href="concept.html">Concept</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<br>
<div id="indexhero">
</div>
<div>
<piccaption> Mac Miller front and Center of his K.I.D.S. mixtape </piccaption>
</piccaption>
</div>
<br>
<main>
<p>This is textThis is textThis is textThis is textThis is text
This is textThis is textThis is textThis is textThis is text
This is textThis is textThis is textThis is textThis is text
This is textThis is textThis is textThis is textThis is text</p>
</main>
</body>
Column display (not working)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Swimming In Circles</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* { box-sizing: border-box;
margin: 0; }
#indexhero { height: 350px;
background-image: url(pictures/KIDS.jpg);
background-size: 100% 100%;
background-repeat: no-repeat; }
#base { margin: auto;
width: 90%; }
nav { text-align: center;
background-color: #0170C0;
height: 50px;
font-weight: bold; }
nav{ text-align: center;
background-color: #0170C0;
height: 50px;
font-weight: bold; }
nav ul { list-style-type: none;
padding-left: 0;
border-top: 1px solid #EEEEEE;
background-color: #0170C0;
}
nav li { text-align: center;
padding-top: .5em;
padding-bottom: .5em;
}
nav a { text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body>
<div id="base">
<header>
<h1><a href="index.html">Introduction of Mac Miller</a></h1>
</header>
<nav>
<ul>
<li><a href="index.html">Introduction</a></li>
<li><a href="swimming.html">Swimming</a></li>
<li><a href="circles.html">Circles</a></li>
<li><a href="concept.html">Concept</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<br>
<div id="indexhero">
</div>
<div>
<piccaption> Mac Miller front and Center of his K.I.D.S. mixtape </piccaption>
</piccaption>
</div>
<br>
<main>
<p>This is textThis is textThis is textThis is textThis is text
This is textThis is textThis is textThis is textThis is text
This is textThis is textThis is textThis is textThis is text
This is textThis is textThis is textThis is textThis is text</p>
</main>
</body>