I just finished my site. Atleast mostly, because there is a block of white space that is puzzling me. It appears every time, but when i select it, it disappears. Here is what it looks like.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.Jack Murdock,</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="portfolio.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1//style.css" media="screen" />
<script type="text/javascript" src="engine1//jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body bgcolor="#3b3a3b">
<div id="HeaderContainer">
</div>
<h1>.01 Photography</h1>
<ul class="flatflipbuttons">
<li><span><img src="images/photography.png" /></span><b>photography</b></li>
<li><span><img src="images/graphicdesign.png" /></span><b>2D Design</b></li>
<li><span><img src="images/3dwork.png" /></span><b>3D Work</b></li>
<li><span><img src="images/contact.png" /></span><b>Contact</b></li>
</ul>
<!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/1277971_10202333285879975_353051239_o.jpg" alt="1277971_10202333285879975_353051239_o" title="1277971_10202333285879975_353051239_o" id="wows1_0"/></li>
<li><img src="data1/images/14262710457_9135dff762_o.jpg" alt="14262710457_9135dff762_o" title="14262710457_9135dff762_o" id="wows1_1"/></li>
<li><img src="data1/images/dsc_1180.jpg" alt="DSC_1180" title="DSC_1180" id="wows1_2"/></li>
<li><img src="data1/images/dsc_2612.jpg" alt="DSC_2612" title="DSC_2612" id="wows1_3"/></li>
<li><img src="data1/images/dsc_8128.jpg" alt="DSC_8128" title="DSC_8128" id="wows1_4"/></li>
<li><img src="data1/images/image_2.jpg" alt="image_2" title="image_2" id="wows1_5"/></li>
<li><img src="data1/images/image_10.jpg" alt="image_10" title="image_10" id="wows1_6"/></li>
<li><img src="data1/images/image_12.jpg" alt="image_12" title="image_12" id="wows1_7"/></li>
<li><img src="data1/images/image_15.jpg" alt="image_15" title="image_15" id="wows1_8"/></li>
<li><img src="data1/images/image_17.jpg" alt="image_17" title="image_17" id="wows1_9"/></li>
</ul></div>
<div class="ws_bullets"><div>
<img src="data1/tooltips/1277971_10202333285879975_353051239_o.jpg" alt="1277971_10202333285879975_353051239_o"/>1
<img src="data1/tooltips/14262710457_9135dff762_o.jpg" alt="14262710457_9135dff762_o"/>2
<img src="data1/tooltips/dsc_1180.jpg" alt="DSC_1180"/>3
<img src="data1/tooltips/dsc_2612.jpg" alt="DSC_2612"/>4
<img src="data1/tooltips/dsc_8128.jpg" alt="DSC_8128"/>5
<img src="data1/tooltips/image_2.jpg" alt="image_2"/>6
<img src="data1/tooltips/image_10.jpg" alt="image_10"/>7
<img src="data1/tooltips/image_12.jpg" alt="image_12"/>8
<img src="data1/tooltips/image_15.jpg" alt="image_15"/>9
<img src="data1/tooltips/image_17.jpg" alt="image_17"/>10
</div></div><span class="wsl">slider plugin wordpress by WOWSlider.com v5.6</span>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1//wowslider.js"></script>
<script type="text/javascript" src="engine1//script.js"></script>
<!-- End WOWSlider.com BODY section -->
<ul id= "nav2">
<li>Photography</li>
<li>Photo retouching</li>
<li>Studio Work</li>
</ul>
<p> </p>
<p> </p>
</body>
</html>
CSS
#charset "utf-8";
#charset "utf-8";
/* CSS Document */
body {
background-color: #FFFFFF;
}
#HeaderContainer {
width: 102%;
height: 320px;
background-color: #FFFFFF;
background-image: url("title2.png");
background-repeat: no-repeat;
margin-left: 0 auto;
margin-right: 0 auto;
float: center;
position: relative;
top: -50px;
}
.title {
position: relative;
text-align:center;
color: #5f5f5f;
}
#nav {
display: inline;
}
ul {
list-style: none;
display: block;
}
.CenterContainer {
width: 102%;
overflow: visible;
display: block;
height: 210px;
padding-top: 10px;
}
div.img{
height: 133px;
width: 200px;
float: left;
text-align: center;
margin: 20px 30px 20px;
display: block;
line-height:0;
}
#nav li a:hover {
color: #9BACC4;}
/* CSS Document */
a.current:link, a.current:visited {
border-bottom:thick dotted #FFFFFF;
}
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
.TitleImg {
position: relative;
top: 100px;
}
#nav2 {
max-width: 30%;
height: 50px;
float: left;
padding: 0;
list-style: none;
list-style: none;
background-color: #FFFFFF;
z-index: 90;
position: relative;
top: -500px;
left: 800px;
margin: 0 0 10px 0;
font-weight: bold;
font-family: 'Hammersmith One', sans-serif;
}
#nav2 li:hover{
transform: scale(0.862, 1.134);
-webkit-transform: scale(0.862, 1.134);
-moz-transform: scale(0.862, 1.134);
-o-transform: scale(0.862, 1.134);
-ms-transform: scale(0.862, 1.134);
}
#nav2 li {
float: left;
padding-left: 10px;
}
#nav2 li a {
display: inline;
color: #66a9df;
}
.frontimage {
position: absolute;
left: 500px;
display: inline;
}
#nav {
width: 25px;
height: 600px;
}
ul.flatflipbuttons{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}
ul.flatflipbuttons li{
margin:0;
display: block;
width: 100px; /* dimensions of buttons. */
height: 100px;
margin-bottom: 0; /* spacing between buttons */
background: white;
text-transform: uppercase;
text-align: center;
}
ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
color: black;
background: #3B9DD5;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}
ul.flatflipbuttons li:nth-of-type(1) a{
color: green;
background: #3B9DD5;
}
ul.flatflipbuttons li:nth-of-type(2) a{
background: #A1CD3A;
}
ul.flatflipbuttons li:nth-of-type(3) a{
background: #80C5EC;
}
ul.flatflipbuttons li:nth-of-type(4) a{
color: white;
background: #635746;
}
ul.flatflipbuttons li:nth-of-type(5) a{
background: #F2C96D;
}
ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.flatflipbuttons li b{ /* CSS for text alongside button */
display: block;
position: relative;
top: -100%; /* starting vertical position of text */
left: 100%; /* horizontal position of text */
text-align: left;
text-indent: 10px;
width: 100%;
opacity: 0;
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
-moz-transition: all 300ms ease-out 0.2s;
transition: all 300ms ease-out 0.5s;
}
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}
ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #c1e4ec; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover a span{
color: black; /* color of icon font onMouseover */
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover b{
opacity: 1;
top: -65%; /* vertical position of text onmouseover */
}
/* CSS for 2nd menu below specifically */
ul.second li a{
background: #eee !important;
}
ul.second li a:hover{
background: #ddd !important;
}
h1 {
position: relative;
top: -100px;
font-family: 'Special Elite', cursive;
display: inline;
}
#nav3 {
max-width: 30%;
height: 50px;
float: left;
padding: 0;
list-style: none;
list-style: none;
background-color: #FFFFFF;
z-index: 90;
position: absolute;
top: 200px;
left: 800px;
margin: 0 0 10px 0;
font-weight: bold;
color: #5674DC;
}
#nav3 li {
float: left;
margin: 2px;
}
#nav3 li a {
display: inline;
}
#nav4 {
max-width: 30%;
height: 50px;
float: left;
padding: 0;
list-style: none;
list-style: none;
background-color: #FFFFFF;
z-index: 90;
position: absolute;
top: 200px;
left: 800px;
word-spacing:30px;
margin: 0 0 10px 0;
}
#nav2 li {
float: left;
margin: 2px;
}
#nav2 li a {
display: inline;
}
a:link {
text-decoration: none;
color: #0e5b9a;
}
.contact {
margin: 0 auto;
position: relative;
top: -400px;
display: block;
width: 40%;
font-family: 'PT Sans Narrow', sans-serif;
}
Any advice on fixing this would be greatly appreciated!
Change
font-family: 'Special Elite', cursive;
To:
font-family: 'Special Elite', sans-serif;
Cursive seems to have lots of issues.
Related
I am trying to figure out a way to make the black blob go back smoothly as you're dragging the cursor off it. Better yet I was wondering if its possible to make the blob disappear from left to right using css. Also, do you have an idea on how to make the text turn white as the blob goes over them? Thank you so much for help!
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
}
li a::before {
content: "";
position: absolute;
width: 0%;
height: 1.3em;
background-color: black;
visibility: hidden;
transition: width .2s;
}
li a:hover::before {
width: 100%;
visibility: visible;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="stylesheet.css">
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
</nav>
</body>
</html>
No need to use visibility since you already set 0% to width. You can also adjust the position to have a left to right transtion. For the color, simply add another hover declarion on the a:
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
}
li a::before {
content: "";
position: absolute;
z-index: -1;
width: 0%;
left: auto;
right: 0;
height: 1.3em;
background-color: black;
transition: width .2s, left .2s .2s, right .2s .2s;
}
li a:hover::before {
width: 100%;
left: 0;
right: auto;
}
li a:hover {
color: #fff;
}
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
You can also simplify your code using gradient:
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
background: linear-gradient(#000, #000) left/0% 100% no-repeat;
transition:
color 0.2s,
background-size 0.2s,
background-position 0.2s 0.2s;
}
li a:hover {
color: #fff;
background-size: 100% 100%;
background-position: right;
}
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
i have updated your css code. hope this helps you:
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
li a::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
li a:hover:before,
li a:focus:before,
li a:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
li a:hover::before {
width: 100%;
visibility: visible;
}
li a:hover {
color: #fff;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="stylesheet.css">
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
</nav>
</body>
</html>
I'm new to coding and I'm making a website. But I have a problem, it can't get it centered. I don't want it full width but a bit off the side like a box. Like you can see, there is more margin on the right than on the left, how is that possible? Is it a bug or just something that I need to add in order that it will work? Hopefully you can help me! Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: rgb(57, 57, 57);
}
header {
background-color: white;
}
header::after {
content: " ";
display: table;
clear: both;
}
.container {
width: 95%;
margin: 0 auto;
}
.logo {
float: left;
width: 250px;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
}
nav {
float: right;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
nav ul li {
display: inline-block;
margin-left: 45px;
}
nav ul li a {
display: block;
color: black;
text-decoration: none;
padding: 17px 15px;
position: relative;
}
nav ul li a:before {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav ul li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
</style>
</head>
<body>
<header>
<div class="container">
<img class="logo" src="#">
<nav>
<ul>
<li>PROJECTEN</li>
<li>OVER</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Generally to center something we use margin: 0 auto. Try adding that to your nav styling.
To pull your nav items to the right, I would try using flexbox (a great thing to learn if you're new to HTML/CSS).
Here's the final CSS:
nav {
width: 80%;
margin: 0 auto;
display: flex;
flex-direction: row-reverse;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
The CSS you applied to .container should move to header
body {
background-color: rgb(57, 57, 57);
}
header {
background-color: white;
width: 95%;
margin: 0 auto;
}
header::after {
content: " ";
display: table;
clear: both;
}
.container {
}
.logo {
float: left;
width: 250px;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
}
nav {
float: right;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
nav ul li {
display: inline-block;
margin-left: 45px;
}
nav ul li a {
display: block;
color: black;
text-decoration: none;
padding: 17px 15px;
position: relative;
}
nav ul li a:before {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav ul li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<header>
<div class="container">
<img class="logo" src="#">
<nav>
<ul>
<li>PROJECTEN</li>
<li>OVER</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
Set you'r .container to position: relative; or you go like:
.container {
width: 95%;
position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0 auto;}
I made a mobile responsive hamburger menu to horizontal nav bar, but I'm having trouble making a hover style for the links on the horizontal nav bar that don't make them jump. If you look at my Codpen you'll see the general style I want on those links on hover, but I want that highlight to be larger around the wording. When I've tried to do this the links end up jumping on hover. The other thing is that I can't get the top highlight much bigger... it's like it's cut off with some other property. This is the first menu like this I've made (I'm fairly new) so I played around with a lot of different CSS properties and values to get things to look perfect upon first glance and I'm sure some CSS isn't right, I just don't know what or where. I pasted the code below with everything inline but definitely check out the codpen because that's more accurate to how it looks on my computer. Thanks for your help!
http://codepen.io/sshine2/pen/VbjGaE
EDIT: I edited the code in Codepen to show how the top of the highlight gets cut off and the link jumps when the highlight is the size I want it to be.
SECOND EDIT: Fixed the top being cut off myself. Changed where the entire menu was displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background: #ffffff;
background-color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
width: 100%;
background: #ffffff;
position: fixed;
height: 4em;
line-height: 4em;
display: inline-block;
padding-left: 1em;
border-bottom: .1em solid #dddddd;
}
h2 {
font-size: 2.1em;
}
p {
font-size: 10em;
color: white;
padding-top: 1em;
}
#media only screen and (min-width: 319px) {
.menu {
z-index: 1;
display: none;
font-weight: bold;
font-size: 1.2em;
width: 100%;
background: #f1f1f1;
position: fixed;
text-align: center;
margin-top: 3.3em;
color: black;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
border-top: #dddddd 1px solid;
}
.menu li {
display: block;
padding: 1em 0 1em 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #585858;
padding: 1em 0 1em 0;
cursor: crosshair;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: black;
}
.menu ul li a:hover {
color: white;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: black;
}
.menu a:hover {
text-decoration: none;
color: white;
}
#nav-icon4 {
width: 35px;
height: 25px;
float: right;
margin-top: -47px;
margin-right: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: cell;
}
#nav-icon4 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: darkred;
border-radius: 7px;
opacity: 2;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
left: 6px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 25px;
left: 6px;
}
}
#media only screen and (min-width : 768px) {
h2 {
z-index: 1000000;
font-size: 1.5em;
}
p {
font-size: 20em;
color: white;
padding-top: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
margin-left: 20px;
margin-right: 8px;
margin-top: -10px;
}
li a {
display: block;
text-align: center;
text-decoration: none;
}
.menu {
display: block!important;
position: absolute;
right: 0px;
font-size: .9em;
width: 100%;
padding-right: 15px;
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(255, 255, 255, 0);
}
.menu ul {
border-bottom: 0;
border-top: 0;
}
.menu li {
border-bottom: 0;
border-top: 0;
}
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: .4em;
padding-right: 0em;
padding-left: 0em;
}
.menu ul li a:hover {
color: white;
}
#nav-icon4 {
display: none;
}
}
#media only screen and (min-width : 922px) {
li {
margin-left: 55px;
margin-right: 18px;
}
.menu {
padding-right: 1px;
}
}
#media only screen and (min-width : 1400px) {
header {
height: 5em;
line-height: 5em;
}
h2 {
font-size: 2.6em;
}
li {
margin-left: 55px;
margin-right: 30px;
}
.menu {
padding-right: 1px;
font-size: 1.2em;
}
}
</style>
<title>hamburgers</title>
</head>
<body>
<header>
<span>Shine Design</span>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
</header>
<div class="menu">
<ul>
<a href="#">
<li>LINK ONE</li>
</a>
<a href="#">
<li>LINK TWO</li>
</a>
<a href="#">
<li>LINK THREE</li>
</a>
<a href="#">
<li>LINK FOUR</li>
</a>
<a href="#">
<li>LINK FIVE</li>
</a>
</ul>
</div>
</body>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$('#nav-icon4').click(function(){
$(this).toggleClass('open');
});
});
</script>
</html>
The jumping issue is because you add padding on hover which isn't there before.
Before your media queries define the padding ones:
.menu li {
border-bottom: 0;
border-top: 0;
padding: 1em;
}
Then remove the defined paddings for .menu li in your min 768px query.,
code pen
I am working on a responsive Nav menu for a website. I changed the header image into an image slider however now on the index.html page the nav menu is no longer aligned to the websites grid.
In the 'about', 'services' and contact pages the menu is positioned perfectly.
In the index.html page I have css code to position the navbar and logo position:absolute; but the rest of navs on the other page are position relative.
I want all the nav menus on each page to align the same so there is no obvious difference when the user changes pages. It may not be obvious on small screens but when you compare the index and about pages on a mobile device it is obvious the nav is not in the correct grid.
Can someone point me in the right direction?
Here is a link to the live site
http://shaneogrady.me/navtest/
HTML
<!DOCTYPE html>
<html>
<head>
<title> HELLO </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content=""><script> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script src="js/jquery-1.11.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,800,700,600' rel='stylesheet' type='text/css'>
<link href="css/animate.css" rel="stylesheet" type="text/css" media="all">
<script src="js/wow.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
new WOW().init();
</script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
});
});
</script>
</head>
<body>
<div id="home" class="banner a-banner">
<div class="container" style=" position: relative; z-index: 5; top: 0%; left: 5%;">
<div class="head-logo">
<img src="images/logo.png" alt="" />
</div>
<div class="top-nav">
<span class="menu"><img src="images/menu.png" alt=""></span>
<ul class="nav1">
<li class="hvr-sweep-to-bottom">Contact<i><img src="images/nav-but5.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom">Services<i><img src="images/nav-but3.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom">About<i><img src="images/nav-but2.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom active">Home<i><img src="images/nav-but1.png" alt=""/></i></li>
<div class="clearfix"></div>
</ul>
<script>
$( "span.menu" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {});
});
</script>
</div>
</div>
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Batman</h1>
<h3>Batman</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div>
</div>
</div>
<div class="item slides">
<div class="slide-2">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Superman</h1>
<h3>Superman</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div>
</div>
</div>
<div class="item slides">
<div class="slide-3">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Spiderman</h1>
<h3>Spiderman</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="services.html" role="button">See More</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
background:#fff;
font-family: 'Open Sans', sans-serif;
}
body a {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.banner{
background: url(../images/banner2.jpg) no-repeat 0px 0px #eeece9;
min-height: 855px;
background-size: cover;
position: relative;
}
.head-logo{
float: left;
}
.head-logo a {
display: block;
margin-top: 3.5em;
}
.top-nav{
float: right;
width: 70%;
}
.top-nav ul{
padding:0;
margin:0;
}
.top-nav ul li {
display: inline-block;
width: 20%;
margin-right: .4em;
display:block;
float: right;
line-height:38px;
margin:0;
padding:0;
position:relative;
}
.top-nav ul li.active{
background: #5abc5e;
}
.top-nav ul li a{
color: #FFF;
font-size: 18px;
margin-right: .4em;
float: left;
padding: 3em 0em 3em 1.4em;
text-align: center;
width: 79%;
}
.top-nav ul li a i{
display: block;
margin-top: 1em;
color: #FFF;
font-size: 11px;
font-style: italic;
}
.top-nav ul li a:hover{
text-decoration:none;
}
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
height: 100vh;
}
.fade-carousel .carousel-inner .item {
height: 100vh;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: #080d15;
opacity: .3;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(../images/banner2.jpg);
}
.fade-carousel .slides .slide-2 {
background-image: url(../images/squad.jpg);
}
.fade-carousel .slides .slide-3 {
background-image: url(../images/roadside.jpg);
}
/********************************/
/* Media Queries */
/********************************/
#media screen and (min-width: 980px){
.hero { width: 980px; }
}
#media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
/* Sweep To Bottom */
.hvr-sweep-to-bottom {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-ms-osx-font-smoothing: grayscale;
-o-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
-o-transition-property: color;
-moz-transition-property: color;
-ms-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-bottom:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #5abc5e;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
-o-transition-property: transform;
-moz-transition-property: transform;
-ms-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {
color: white;
}
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.banner-bottom-grids{
margin: 5em 0;
}
.banner-bottom-left{
padding: 0;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0;
}
.banner-bottom-left h3{
color: #000;
font-size: 37px;
margin: 0;
line-height: 1.2em;
font-weight: 300;
}
.banner-bottom-left h5{
color: #969696;
font-size: 14px;
margin: 1em 0;
line-height: 1.8em;
}
.banner-bottom-left h5 span{
display:block;
}
.banner-bottom-left p{
color: #333333;
font-size: 14px;
margin: 0;
line-height: 1.8em;
font-weight: 600;
}
.banner-bottom-right img{
width:100%;
}
.see-button{
margin-top: 1em;
}
.see-button a{
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 1em 4em;
outline: none;
background: #393939;
border: none !important;
border-radius:0;
}
.jumbotron.banner-bottom-left {
background: none;
}
/*------------------ Slider Part starts Here----------*/
#slider2,
#slider3 {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
margin: 0 auto;
}
.rslides_tabs {
list-style: none;
padding: 0;
background: rgba(0,0,0,.25);
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}
.rslides_tabs li {
display: inline;
float: none;
margin-right: 1px;
}
.rslides_tabs a {
width: auto;
line-height: 20px;
padding: 9px 20px;
height: auto;
background: transparent;
display: inline;
}
.rslides_tabs li:first-child {
margin-left: 0;
}
.rslides_tabs .rslides_here a {
background: rgba(255,255,255,.1);
color: #fff;
font-weight: bold;
}
.events {
list-style: none;
}
.callbacks_container {
position: relative;
float: left;
width: 100%;
}
.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.callbacks li {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.callbacks img {
position: relative;
z-index: 1;
height: auto;
border: 0;
}
.callbacks .caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
left: 0;
right: 0;
padding: 10px 20px;
margin: 0;
max-width: none;
top: 10%;
text-align: center;
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 52%;
left: 0;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 55px;
background: transparent url("../images/themes.png") no-repeat left top;
margin-top: -65px;
}
.callbacks_nav:active {
opacity: 1.0;
}
.callbacks_nav.next {
left: auto;
background-position: right top;
right: 0;
}
#slider3-pager a {
display: inline-block;
}
#slider3-pager span{
float: left;
}
#slider3-pager span{
width:100px;
height:15px;
background:#fff;
display:inline-block;
border-radius:30em;
opacity:0.6;
}
#slider3-pager .rslides_here a {
background: #FFF;
border-radius:30em;
opacity:1;
}
#slider3-pager a {
padding: 0;
}
#slider3-pager li{
display:inline-block;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li{
position: relative;
display: block;
float: left;
}
.rslides img {
height: auto;
border: 0;
width:100%;
}
.callbacks_tabs{
list-style: none;
position: absolute;
top: 78%;
z-index: 999;
left: 45%;
padding: 0;
margin: 0;
}
.slider-top{
text-align: center;
padding:10em 0;
}
.slider-top h1{
font-weight:700;
font-size:48px;
color:#010101;
}
.slider-top p{
font-weight:400;
font-size:20px;
padding:1em 7em;
color:#010101;
}
.slider-top ul.social-slide{
display:inline-flex;
margin: 0px;
padding: 0px;
}
You might want to try rebuilding your css from scratch instruction by instruction and see what is changing something. If a change doesn't apply, try adding !important at the end (like so :{ width : 30% !important;}), sometimes Bootstrap is a bit possessive.
Maybe throwing a position : absolute ; right :0; top:0; in the .top-nav and building from there would help do the trick.
An element with position: absolute is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed)
position: absolute allows an element to be positioned with respect
to a containing block using left, right, top or bottom (the containing
block is the nearest ancestor node with a position of relative,
absolute or fixed).
To fix it just add left: 0 and right: 0 to .container this will make the div stretch to document width.
Here a minimal snippet example to illustrate (without using left, right):
div.relative {
position: relative;
height: 200px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
height: 100px;
border: 3px solid blue;
display: block;
}
<div class="relative">This
<div>element has position: relative;
<div class="absolute">This
<div>element has position: absolute;</div>
</div>
Now with left: 0, right: 0
div.relative {
position: relative;
height: 200px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
height: 100px;
border: 3px solid blue;
display: block;
left: 0;
right: 0;
}
<div class="relative">This
<div>element has position: relative;
<div class="absolute">This
<div>element has position: absolute;</div>
</div>
Check this out to full information
I'm new to programming. I'm using bootstrap and I'm trying to get the Nav menu to overlay over the slider at the top of the website.
Can someone tell me what I'm doing wrong or point me in the right direction?
Here is a link to the site on codepen
http://codepen.io/anon/pen/MwLBKv
HTML
<!-- bootstarp-css -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- FontAwesome
-->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!--// bootstarp-css -->
<!-- css -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!--// css -->
<script src="js/jquery-1.11.1.min.js"></script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,800,700,600' rel='stylesheet' type='text/css'>
<!--/fonts-->
<link href="css/animate.css" rel="stylesheet" type="text/css" media="all">
<script src="js/wow.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
new WOW().init();
</script>
<!--start-smoth-scrolling-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
});
});
</script>
<!--start-smoth-scrolling-->
</head>
<body>
<!-- banner -->
<div id="home" class="banner a-banner">
<!-- container -->
<div class="container">
<div class="head-logo">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ6FfLzPB1MpLiIxrIapoSbEf0PFvTjQ3TbcLrQCijCN68LfWZi" alt="" />
</div>
<div class="top-nav">
<ul class="nav1">
<li class="hvr-sweep-to-bottom">Contact<i><img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom">Services<i><img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom">About<i><img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom active">Home<i><img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png" alt=""/></i></li>
<div class="clearfix"> </div>
</ul>
<!-- script-for-menu -->
<script>
$( "span.menu" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<!-- /script-for-menu -->
</div>
</div>
<!-- car -->
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Recovery</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div>
</div>
</div>
<div class="item slides">
<div class="slide-2">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Equiped for any Job</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div> </div>
</div>
<div class="item slides">
<div class="slide-3">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Batman</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div> </div>
</div>
</div>
<!-- car -->
</div>
<!-- //container -->
</div>
CSS
body{
background:#fff;
font-family: 'Open Sans', sans-serif;
}
body a {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.banner{
background: url(../images/banner2.jpg) no-repeat 0px 0px #eeece9;
min-height: 855px;
background-size: cover;
position: relative;
}
.head-logo{
float: left;
}
.head-logo a {
display: block;
margin-top: 3.5em;
}
.top-nav{
float: right;
width: 70%;
}
.top-nav ul{
padding:0;
margin:0;
}
.top-nav ul li {
display: inline-block;
width: 20%;
margin-right: .4em;
display:block;
float: right;
line-height:38px;
margin:0;
padding:0;
position:relative;
}
.top-nav ul li.active{
background: #5abc5e;
}
.top-nav ul li a{
color: #FFF;
font-size: 18px;
margin-right: .4em;
float: left;
padding: 3em 0em 3em 1.4em;
text-align: center;
width: 79%;
}
.top-nav ul li a i{
display: block;
margin-top: 1em;
color: #FFF;
font-size: 11px;
font-style: italic;
}
.top-nav ul li a:hover{
text-decoration:none;
}
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
height: 100vh;
}
.fade-carousel .carousel-inner .item {
height: 100vh;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: #080d15;
opacity: .3;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(../images/banner2.jpg);
}
.fade-carousel .slides .slide-2 {
background-image: url(../images/squad.jpg);
}
.fade-carousel .slides .slide-3 {
background-image: url(../images/roadside.jpg);
}
/********************************/
/* Media Queries */
/********************************/
#media screen and (min-width: 980px){
.hero { width: 980px; }
}
#media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
/* Sweep To Bottom */
.hvr-sweep-to-bottom {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-ms-osx-font-smoothing: grayscale;
-o-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
-o-transition-property: color;
-moz-transition-property: color;
-ms-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-bottom:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #5abc5e;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
-o-transition-property: transform;
-moz-transition-property: transform;
-ms-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {
color: white;
}
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.banner-bottom-grids{
margin: 5em 0;
}
.banner-bottom-left{
padding: 0;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0;
}
.banner-bottom-left h3{
color: #000;
font-size: 37px;
margin: 0;
line-height: 1.2em;
font-weight: 300;
}
.banner-bottom-left h5{
color: #969696;
font-size: 14px;
margin: 1em 0;
line-height: 1.8em;
}
.banner-bottom-left h5 span{
display:block;
}
.banner-bottom-left p{
color: #333333;
font-size: 14px;
margin: 0;
line-height: 1.8em;
font-weight: 600;
}
.banner-bottom-right img{
width:100%;
}
.see-button{
margin-top: 1em;
}
.see-button a{
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 1em 4em;
outline: none;
background: #393939;
border: none !important;
border-radius:0;
}
.jumbotron.banner-bottom-left {
background: none;
}
/*------------------ Slider Part starts Here----------*/
#slider2,
#slider3 {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
margin: 0 auto;
}
.rslides_tabs {
list-style: none;
padding: 0;
background: rgba(0,0,0,.25);
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}
.rslides_tabs li {
display: inline;
float: none;
margin-right: 1px;
}
.rslides_tabs a {
width: auto;
line-height: 20px;
padding: 9px 20px;
height: auto;
background: transparent;
display: inline;
}
.rslides_tabs li:first-child {
margin-left: 0;
}
.rslides_tabs .rslides_here a {
background: rgba(255,255,255,.1);
color: #fff;
font-weight: bold;
}
.events {
list-style: none;
}
.callbacks_container {
position: relative;
float: left;
width: 100%;
}
.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.callbacks li {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.callbacks img {
position: relative;
z-index: 1;
height: auto;
border: 0;
}
.callbacks .caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
left: 0;
right: 0;
padding: 10px 20px;
margin: 0;
max-width: none;
top: 10%;
text-align: center;
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 52%;
left: 0;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 55px;
background: transparent url("../images/themes.png") no-repeat left top;
margin-top: -65px;
}
.callbacks_nav:active {
opacity: 1.0;
}
.callbacks_nav.next {
left: auto;
background-position: right top;
right: 0;
}
#slider3-pager a {
display: inline-block;
}
#slider3-pager span{
float: left;
}
#slider3-pager span{
width:100px;
height:15px;
background:#fff;
display:inline-block;
border-radius:30em;
opacity:0.6;
}
#slider3-pager .rslides_here a {
background: #FFF;
border-radius:30em;
opacity:1;
}
#slider3-pager a {
padding: 0;
}
#slider3-pager li{
display:inline-block;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li{
position: relative;
display: block;
float: left;
}
.rslides img {
height: auto;
border: 0;
width:100%;
}
.callbacks_tabs{
list-style: none;
position: absolute;
top: 78%;
z-index: 999;
left: 45%;
padding: 0;
margin: 0;
}
.slider-top{
text-align: center;
padding:10em 0;
}
.slider-top h1{
font-weight:700;
font-size:48px;
color:#010101;
}
.slider-top p{
font-weight:400;
font-size:20px;
padding:1em 7em;
color:#010101;
}
.slider-top ul.social-slide{
display:inline-flex;
margin: 0px;
padding: 0px;
}
Apply position: absolute; and z-index: 5; to your nav .container. I would recommend you use the .container class on your page container and use some of bootstraps nav classes to build your nav bar.