i wrote a code for my navigation bar to stay at fixed position using position: fixed;so that when anybody tried to scroll the page it stay at their current position but i am not getting the desired result.
here is my navigation bar (without changing code):-
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
bottom: 0;
}
but when i add position: fixed; in my coding like :-
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
bottom: 0;
position: fixed;
}
my navigation bar moves to bottom of the page:-
but if i remove bottom: 0; from my code:-
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
}
or
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
position: fixed;
}
in both the cases my navigation bar moves to this position:-
and also i cannot remove position: absolute; from my code as it also changes the position of my navigation bar:-
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
right: 0;
}
what i want ?:-
here is my code:-
header {
width:100%;
height:350px;
position:relative;
overflow:hidden;
z-index:-1;
border:3px solid grey;
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
.main-wrapper {
position: relative;
}
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
bottom: 0;
}
#navul01 li {
float: left;
}
#navul01 li a {
display: block;
color: white;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 14px 16px;
font-size: 25px;
text-decoration: none;
border:2px solid white;
}
#navul01 li a:hover {
background-color: lightgreen;
}
#subjects_nav {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
left: 10%;
width: 80%;
}
#subjects_nav li a {
display: block;
color: white;
font-size: 5vw;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 50px 50px;
text-decoration: none;
border:3px solid white;
transition: 1s;
}
#subjects_nav li a:hover {
margin: 0 -5%;
}
#physics_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#chemistry_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#maths_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#space {
list-style: none;
}
<!DOCTYPE html>
<html>
<head>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main-wrapper">
<header> </header>
<div><nav>
<ul id="navul01">
<li>Home</li>
<li>blog</li>
<li>contacts</li>
</ul>
</nav></div>
</div>
<div>
<ul id="space">
<li><a></a></li>
</ul>
</div>
<div>
<ul id="subjects_nav">
<li><a id="physics_image" href="#home">PHYSICS</a></li>
<li><a id="chemistry_image" href="pages\chemistry\chemistry.html">CHEMISTRY</a></li>
<li><a id="maths_image" href="#contact">MATHS</a></li>
</ul>
</div>
</body>
</html>
Use fixed, z-index and calculate the postion using top and not bottom. The value should be the height of the header minus the height of the navbar:
run the snippet full width as it won't work on the reduced size since the header is big
header {
width:100%;
height:350px;
position:relative;
overflow:hidden;
z-index:-1;
border:3px solid grey;
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
.main-wrapper {
position: relative;
}
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: fixed;
right: 0;
top: 300px;
z-index:999;
}
#navul01 li {
float: left;
}
#navul01 li a {
display: block;
color: white;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 14px 16px;
font-size: 25px;
text-decoration: none;
border:2px solid white;
}
#navul01 li a:hover {
background-color: lightgreen;
}
#subjects_nav {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
left: 10%;
width: 80%;
}
#subjects_nav li a {
display: block;
color: white;
font-size: 5vw;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 50px 50px;
text-decoration: none;
border:3px solid white;
transition: 1s;
}
#subjects_nav li a:hover {
margin: 0 -5%;
}
#physics_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#chemistry_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#maths_image {
background-position: center center;
display: flex;
background-image:url("https://placeimg.com/640/480/any");
background-size: cover;
}
#space {
list-style: none;
}
<!DOCTYPE html>
<html>
<head>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main-wrapper">
<header> </header>
<div><nav>
<ul id="navul01">
<li>Home</li>
<li>blog</li>
<li>contacts</li>
</ul>
</nav></div>
</div>
<div>
<ul id="space">
<li><a></a></li>
</ul>
</div>
<div>
<ul id="subjects_nav">
<li><a id="physics_image" href="#home">PHYSICS</a></li>
<li><a id="chemistry_image" href="pages\chemistry\chemistry.html">CHEMISTRY</a></li>
<li><a id="maths_image" href="#contact">MATHS</a></li>
</ul>
</div>
</body>
</html>
Related
So here's the HTML code for my website about a holiday destination (New York). I've so far made a nav bar and implemented parallax scrolling with two background images. I then saw when running the code that there was a white space after the nav bar and the first background image and I'm not sure how to solve this. I've tried changing the padding and margins around but that's not working :( Some help would be greatly appreciated!
body, html{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 50px;
}
header{
background:plum;
position: relative;
}
header::after{
content: "";
display: table;
clear:both;
}
.logo{
width: 100px;;
height: 60px;
float: left;
padding: 0px;
}
nav{
float: inline-end;
overflow: auto;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 70px;
padding-top: 20px;
font-size: 18px;
position: relative;
}
nav a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: rgb(0, 0, 0);
}
nav a::before{
content: "";
display: block;
height: 3px;
background-color: rgb(0, 0, 0);
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.bg-one{
background-image: url("bg-one.jpg");
height: 100%;
padding-top: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position:relative;
}
.transbox{
padding: 10px;
width: 30%;
background-color: white;
border: 10px double black;
opacity: 0.6;
margin-left: 50px;
margin-right: auto;
margin-top: 4%;
margin-bottom: auto;
display: block;
}
.transbox p{
margin: 5%;
font-weight: bold;
color: black;
}
h1{
text-align: center;
font-size: 65px;
}
.first-block{
height: 100px;
background-color:rgb(109, 176, 243);
text-align: center;
border: 10px double white;
padding-bottom: 60px;
vertical-align: auto;
}
h3{
text-transform: uppercase;
font-size: 50px;
text-align: center;
color: rgb(13, 97, 170);
}
.bg-two{
background-image: url("bg-two.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New York</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#400&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<img src="nyc-logo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
<div class="bg-one">
<div class="transbox">
<h1>NEW YORK</h1>
</div>
</div>
<div class="first-block">
<h3>Welcome to the city that never sleeps...</h3>
</div>
<div class="bg-two"></div>
</body>
</html>
I'm not fully understand what is white space you mean, but try to delete margin-top: 4% in
.transbox{
padding: 10px;
width: 30%;
background-color: white;
border: 10px double black;
opacity: 0.6;
margin-left: 50px;
margin-right: auto;
margin-bottom: auto;
display: block;
}
I used a pseudo element, :before, to help with my fixed background image because if not, it would cause my website to scroll slow due to the background-attachment repaint function. I fixed the background image to run smoothly, but now the background image is overflowing throughout the whole document and not staying in the div.
I have tried to use different overflow options and tried putting the hero class that controls the pseudo element on different elements to see if that would help.
https://jsfiddle.net/4prhubwy/
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ukiyo Sushi ツ</title>
<link href = "/style.css" type = "text/css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div class = "hero">
<header>
<nav class = "navbar">
Ukiyo Sushi ツ
<ul>
<li>About us</li>
<li>Menu</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class = "sushiPlatter">
<h2>Chef's Special Sushi Platter</h2>
<br>
View Menu
</div>
</header>
</div>
<section class = "idkYet">
<div>
<span>hello</span>
</div>
</section>
</body>
</html>
css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: white;
/*overflow: hidden;*/
}
.hero{
position: relative;
overflow: hidden;
min-height: 100%;
}
.hero::before{
background-image: url("/img/header.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
content: '';
height: 100%;
position: fixed;
left: 0;
top: 0;
width: 100%;
will-change: transform;
z-index: -1;
}
body{
font-family: "Fira Sans", sans-serif;
font-size: 2rem;
color: white;
}
.logo{
font-size: 3rem;
margin: .5em;
border-bottom: 2px solid transparent;
}
.logo:hover{
border-bottom: 2px solid white;
}
.navbar{
/*position: fixed;*/
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.navbar ul{
display: inline-flex;
list-style: none;
margin-left: auto;
}
.navbar li{
margin: 1.15em;
border-bottom: 2px solid transparent;
}
.about:hover, .menu:hover, .services:hover, .contact:hover{
border-bottom: 2px solid white;
}
.sushiPlatter{
font-size: 1rem;
text-align: left;
display: flex;
height: 100vh;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 2.15em 2em;
}
.sushiPlatter h2{
font-weight: bold;
}
.sushiPlatter a{
margin: 0em 7em;
}
.sushiPlatter a:hover{
opacity: .25;
transition: 1s;
}
section{
height: 100vh;
color: black;
}
.idkYet{
color: white;
display: block;
}
add a background to the rest of the element so it hides the pseudo while scrolling on top of it, section for instance here :
example
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* selector moved here to be seen */
section {
height: 100vh;
color: black;
background: white;/* rule added , use your own color or img */
}
/* end selector moved */
a {
text-decoration: none;
color: white;
/*overflow: hidden;*/
}
.hero {
position: relative;
overflow: hidden;
min-height: 100%;
}
.hero::before {
background-image: url(https://i.imgur.com/bs8H4p7.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
content: '';
height: 100%;
position: fixed;
left: 0;
top: 0;
width: 100%;
will-change: transform;
z-index: -1;
}
body {
font-family: "Fira Sans", sans-serif;
font-size: 2rem;
color: white;
}
.logo {
font-size: 3rem;
margin: .5em;
border-bottom: 2px solid transparent;
}
.logo:hover {
border-bottom: 2px solid white;
}
.navbar {
/*position: fixed;*/
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.navbar ul {
display: inline-flex;
list-style: none;
margin-left: auto;
}
.navbar li {
margin: 1.15em;
border-bottom: 2px solid transparent;
}
.about:hover,
.menu:hover,
.services:hover,
.contact:hover {
border-bottom: 2px solid white;
}
.sushiPlatter {
font-size: 1rem;
text-align: left;
display: flex;
height: 100vh;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 2.15em 2em;
}
.sushiPlatter h2 {
font-weight: bold;
}
.sushiPlatter a {
margin: 0em 7em;
}
.sushiPlatter a:hover {
opacity: .25;
transition: 1s;
}
.idkYet {
color: white;
display: block;
}
<div class="hero">
<header>
<nav class="navbar">
Ukiyo Sushi ツ
<ul>
<li>About us</li>
<li>Menu</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="sushiPlatter">
<h2>Chef's Special Sushi Platter</h2>
<br>
View Menu
</div>
</header>
</div>
<section class="idkYet">
<div>
<span>hello</span>
</div>
</section>
How can I increase the width of an element in HTML when someone hover on that element.
I wrote some code for that animation using CSS but I am not getting the expected result.
Here's what I am getting when I hover on that element:-
image.gif
Here's what I want:-
image
here is my code:-
HTML:-
<!DOCTYPE html>
<html>
<head>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="animations/index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main-wrapper">
<header> </header>
<div><nav>
<ul id="navul01">
<li><a class="active" href="#home">Home</a></li>
<li>blog</li>
<li>subjects</li>
<li>contacts</li>
</ul>
</nav></div>
</div>
<div>
<ul id="space">
<li><a></a></li>
</ul>
</div>
<div>
<ul id="subjects_nav">
<li><a id="physics_image" href="#home">PHYSICS</a></li>
<li><a id="chemistry_image" href="#news">CHEMISTRY</a></li>
<li><a id="maths_image" href="#contact">MATHS</a></li>
</ul>
</div>
</body>
</html>
CSS:-
header {
width:100%;
height:350px;
position:relative;
overflow:hidden;
z-index:-1;
border:3px solid grey;
background-position: center center;
display: flex;
background-image:url("../images/index/header/header.jpg");
background-size: cover;
}
.main-wrapper {
position: relative;
}
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
bottom: 0;
}
#navul01 li {
float: left;
}
#navul01 li a {
display: block;
color: white;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 14px 16px;
font-size: 25px;
text-decoration: none;
border:2px solid white;
}
#navul01 li a:hover {
background-color: lightgreen;
}
#subjects_nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
left: 10%;
width: 80%;
}
#subjects_nav li {
float: center;
}
#subjects_nav li a {
display: block;
color: white;
font-size: 5vw;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 50px 50px;
text-decoration: none;
border:3px solid white;
}
#subjects_nav li a:hover {
animation-name: subject_animation;
animation-duration: 1s;
}
#physics_image {
background-position: center center;
display: flex;
background-image:url("../images/index/subjects/physics.jpg");
background-size: cover;
}
#chemistry_image {
background-position: center center;
display: flex;
background-image:url("../images/index/subjects/chemistry.jpg");
background-size: cover;
}
#maths_image {
background-position: center center;
display: flex;
background-image:url("../images/index/subjects/maths.jpg");
background-size: cover;
}
#space {
list-style: none;
}
(ANIMATION) CSS :-
#keyframes subject_animation {
from {
width: 80%;
}
to {
width: 90%;
}
UPDATE - 1:-
i used this code in CSS transform: scale(1.2, 1); but it stretch the images and make them look ugly and i only want transformation in x-axis so i used transform: scaleX(1.4); this also stretch the image
Think differently and instead of changing the width change the margin to make them negative values. You can also use transition instead of animation:
By the way there is no float:center, you need to correct this on your code.
Here is the relevant part of the code to show the result:
#subjects_nav {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
left: 10%;
width: 80%;
}
#subjects_nav li a {
display: block;
color: white;
font-size: 5vw;
font-weight: bold;
text-shadow: 2px 2px black;
text-align: center;
padding: 50px 50px;
text-decoration: none;
border: 3px solid white;
transition: 1s;
}
#subjects_nav li a:hover {
margin: 0 -30px;
}
#physics_image {
background-position: center center;
display: flex;
background-image: url("https://lorempixel.com/1000/1000/");
background-size: cover;
}
#chemistry_image {
background-position: center center;
display: flex;
background-image: url("https://lorempixel.com/800/1000/");
background-size: cover;
}
#maths_image {
background-position: center center;
display: flex;
background-image: url("https://lorempixel.com/1000/600/");
background-size: cover;
}
#space {
list-style: none;
}
<ul id="subjects_nav">
<li><a id="physics_image" href="#home">PHYSICS</a></li>
<li><a id="chemistry_image" href="#news">CHEMISTRY</a></li>
<li><a id="maths_image" href="#contact">MATHS</a></li>
</ul>
I have a problem with putting an img for hover background.
It should look like this : Navigation
These 2 lines, represent the hover transparent image, and the text "home" should be in center of that img.. I have no idea how to do that... Anyone ?
Sorry if my english is bad
.page-container {
width: 980px;
margin: 0 auto;
text-align: center;
}
header {
margin: 0;
padding: 0;
width: 100%;
height: 220px;
background-color: #EAEAEA;
}
.logo {
text-align: center;
}
.logo img {
margin: 30px 0 0 0;
}
nav {
height: 136px;
}
ul {
list-style-type: none;
display: inline-block;
margin: 70px 0 0 0;
padding: 0;
}
nav li {
float: left;
text-align: center;
}
nav li a {
margin-right: 165px;
text-decoration: none;
float:left;
font-size: 22px;
letter-spacing: 3px;
text-transform: uppercase;
font-family: font91477;
color: #9E9E9E;
background-size: 75px;
}
a:focus {
text-decoration: none;
color: #9E9E9E;
}
a:hover {
height: 75px;
text-decoration: none;
color: #9E9E9E;
background: url(http://i.imgur.com/P5tF09r.png) no-repeat center;
}
<header>
<div class="logo">
<img src="img/logo.png"/>
</div>
<nav>
<div class="page-container">
<ul>
<li>Home</li>
<li>O Podjetju</li>
<li>Produkti</li>
<li><a class="last-child" href="#">Kontakti</a></li>
</ul>
</div>
</nav>
</header>
just add the following css styles
a:hover {
height: 75px;
text-decoration: none;
color: #9E9E9E;
background: url(http://i.imgur.com/P5tF09r.png) no-repeat center;
/*****************here they are ************/
display:flex;
align-items: center;
}
Why you don't make it in css ? Something like this
.menu{
list-style: none;
background-color: #EAEAEA;
margin: 0;
padding: 20px 0;
overflow: hidden;
}
.menu__item{
float: left;
margin: 0 20px;
position: relative;
}
.menu__item a{
background-color: #EAEAEA;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.menu__item::after{
content:'';
width: 1px;
height: 1px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: rotate(-45deg);
z-index: 0;
transition: all .25s ease;
}
.menu__item:hover::after{
width: 50px;
margin: -1px 0 0 -25px;
}
<ul class="menu">
<li class="menu__item"><a>Home</a></li>
<li class="menu__item"><a>test</a></li>
<li class="menu__item"><a>very long title for test</a></li>
<li class="menu__item"><a>test</a></li>
</ul>
I’m creating this website and I made this nav bar. It had dummy links in the anchor tags and I had a hover property on my buttons. All of this was working properly. I had made a few changes to the code and now none of it works. I cannot figure out where I went wrong. I was editing properties and things just stopped working.
* {
margin: 0 auto;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Arial";
color: white;
}
html,
body {
margin: 0 auto;
background-color: black;
max-width: 940px;
min-height: 100%;
}
.wrapper {
margin: 0 auto;
width: 92%;
background-image: url("images/backgrounds/wood.jpg");
}
/*********************************************************************************************************************************************
HEADER STYLING
*********************************************************************************************************************************************/
.header {
position: relative;
height: 100px;
background-color: #111111;
}
.header h1 {
position: relative;
margin: 0;
height: 20px;
text-align: center;
font-size: 2.3em;
top: 25%;
}
.header p {
position: relative;
top: 25%;
width: 100%;
font-size: 1em;
text-align: center;
}
/*********************************************************************************************************************************************
NAVIGATION BAR STYLING
*********************************************************************************************************************************************/
nav {
height: 40px;
}
nav ul {}
nav ul li {
background-color: #111111;
text-align: center;
list-style-type: none;
width: 25%;
float: left;
/*margin: 0 1%;
border-radius: 10px;
box-shadow: 5px 5px 5px #000;*/
}
nav ul li a {
text-decoration: none;
line-height: 40px;
display: block;
}
nav ul li a:hover {
background-color: #222222;
}
/*********************************************************************************************************************************************
JUMBOTRON STYLING
*********************************************************************************************************************************************/
.jumbotron {
position: relative;
background-image: url(images/jumbotron/studiopic.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-height: 53%;
}
.jumbotext h1 {
display: inline-block;
position: absolute;
bottom: 0px;
text-align: right;
}
/*********************************************************************************************************************************************
FOOTER STYLING
*********************************************************************************************************************************************/
.footer {
height: 100px;
width: 100%;
background-color: #111111;
}
<!DOCTYPE html>
<html>
<head>
<title>CM Sound | Home</title>
<meta charset="UTF-8">
<meta name="description" content="CM Sound's studio webpage">
<meta name="author" content="Ryan Buck | May 2015">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>CM Sound</h1><br/>
<p>Create with us</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Audio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
<div class="jumbotron">
<div class="jumbotext">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Add this in nav ul li a
:
position: relative;
* {
margin: 0 auto;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Arial";
color: white;
}
html, body {
margin: 0 auto;
background-color: black;
max-width: 940px;
min-height: 100%;
}
.wrapper {
margin: 0 auto;
width: 92%;
background-image: url("images/backgrounds/wood.jpg");
}
/*********************************************************************************************************************************************
HEADER STYLING
*********************************************************************************************************************************************/
.header {
position: relative;
height: 100px;
background-color: #111111;
}
.header h1 {
position: relative;
margin: 0;
height: 20px;
text-align: center;
font-size: 2.3em;
top: 25%;
}
.header p {
position: relative;
top: 25%;
width: 100%;
font-size: 1em;
text-align: center;
}
/*********************************************************************************************************************************************
NAVIGATION BAR STYLING
*********************************************************************************************************************************************/
nav {
height: 40px;
}
nav ul {
}
nav ul li {
background-color: #111111;
text-align: center;
list-style-type: none;
width: 25%;
float: left;
/*margin: 0 1%;
border-radius: 10px;
box-shadow: 5px 5px 5px #000;*/
}
nav ul li a {
text-decoration: none;
line-height: 40px;
display: block;
position: relative;
}
nav ul li a:hover {
background-color: #222222;
}
/*********************************************************************************************************************************************
JUMBOTRON STYLING
*********************************************************************************************************************************************/
.jumbotron {
position: relative;
background-image: url(images/jumbotron/studiopic.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-height: 53%;
}
.jumbotext h1 {
display: inline-block;
position: absolute;
bottom: 0px;
text-align: right;
}
/*********************************************************************************************************************************************
FOOTER STYLING
*********************************************************************************************************************************************/
.footer {
height: 100px;
width: 100%;
background-color: #111111;
}
<div class="wrapper">
<div class="header">
<h1>CM Sound</h1><br/>
<p>Create with us</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Audio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
<div class="jumbotron">
<div class="jumbotext">
</div>
</div>
<div class="footer">
</div>
</div>
nav {
height: 40px;
position: relative;
}
just add the position relative to nav