I'm trying to make the text on my navigation bar to show an underline on mouse-over but for some reason it doesn't work. I've used the CSS from the Hover-master collection and just a simple navigation list. What to do?!
Have I used the Hover-master collection wrong?
EDIT: I just inserted my whole code and in the snippet it works but when I run the html file in the browers it doesn't...
EDIT2: The files are hosted # http://fransbergstrom.kaggteknik.se/ and as you can see, the links doesn't work, and the code is an exact copy of the ones pasted below.
HTML & CSS:
#charset "utf-8";
#font-face {
font-family: Fairview;
src: url("fonts/Fairview_Regular.otf");
}
/*PRE-CLASSES:*/
#media screen and (max-width: 1440px) {
html {
-moz-transform: scale(0.75, 0.75);
zoom: 0.75;
zoom: 75%;
}
/*Zooma ut vid mac så websidan anpassar sig*/
}
div {
display: block;
}
* {
margin: 0px;
padding: 0px;
font-weight: normal;
}
body {
background-color: gray;
font-family: 'Fairview';
color: #444444;
}
/* ID's: */
/* NAVIGATION MENU */
#navlist {
margin-top: 35px;
padding: 0;
list-style: none;
}
#navlist li {
display: inline
}
#navlist li a {
font-size: 50px;
text-align: center;
border-right: 3px solid #fff;
text-decoration: none;
width: 200px;
float: left;
color: white;
}
/*FRONT PAGE*/
#container {
width: 70%;
height: 100%;
margin: 0 auto;
}
#menu {
margin-top: 0px;
height: 130px;
width: 100%;
}
#menu-nav {
height: 130px;
width: 80%;
float: left;
}
#menu-logo {
height: 130px;
width: 20%;
background: url("images/menulogo.png") no-repeat;
background-size: contain;
float: left;
}
/* NEWS */
#news {
margin-left: 250px;
margin-top: 140px;
height: 340px;
width: 70%;
float: left;
}
#news-opacity {
position: absolute;
margin-left: 0px;
height: 340px;
width: 49%;
background-color: black;
opacity: 0.5;
float: left;
z-index: -1;
}
#news-right {
height: 100%;
width: 48%;
float: left;
}
#news-right p {
margin-top: 90px;
color: #e04e21;
font-size: 100px;
text-decoration: none;
text-align: center;
}
#news-right b {
margin-top: 90px;
color: white;
font-size: 60px;
text-decoration: none;
text-align: center;
margin-left: 93px;
}
#news-middle {
margin-top: 60px;
height: 70%;
width: 4%;
background: url("images/news-divider.png") no-repeat;
background-size: contain;
float: left;
}
#news-left {
height: 100%;
width: 48%;
float: left;
}
#news-left p {
margin-top: 10px;
margin-left: 50px;
color: white;
font-size: 40px;
text-decoration: none;
text-align: left;
}
#news-left h1 {
margin-top: 70px;
margin-left: 50px;
color: #e04e21;
font-size: 50px;
text-decoration: none;
text-align: left;
}
/* HEADER */
#header {
position: relative;
height: 20px;
width: 100%;
margin: auto;
}
#header-opacity {
position: absolute;
height: 160px;
width: 100%;
margin: auto;
background-color: black;
opacity: 0.6;
z-index: -1;
}
/* CLASSES: */
.background {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background: url("images/background.jpg") no-repeat 0px;
}
/* Underline From Center */
.hvr-underline-from-center {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #2098d1;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before,
.hvr-underline-from-center:focus:before,
.hvr-underline-from-center:active:before {
left: 0;
right: 0;
}
<!DOCUTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="standard.css" media="screen">
</head>
<body>
<div class="background">
<div id="header-opacity"></div>
<div id="container">
<div id="header"></div>
<div id="menu">
<div id="menu-logo"></div>
<div id="menu-nav">
<ul id="navlist">
<li>Start
</li>
<li><font color="#e04e21">Kontakt</font>
</li>
<li>Info
</li>
<li><font color="#e04e21">Turneringar</font>
</li>
<li>Biljetter
</li>
</ul>
</div>
</div>
<div id="news">
<div id="news-opacity"></div>
<div id="news-right">
<p>WELCOME</p>
<b>TO MONSTERHACK</b>
</div>
<div id="news-middle">
</div>
<div id="news-left">
<h1>Har kommer det sta nagot</h1>
<b></b>
<p>Som informerar lasaren</p>
<b></b>
<p>Om eventet med mera</p>
<b></b>
<p>Samt dirigerar den till biljetter</p>
</div>
</div>
</div>
</div>
</body>
</html>
Just remove z-index:-1; from .background{}. You dropped the whole page below "sea level", so hover event do not fires. ;)
have you tried adding the font-size attribute to .hvr-underline-from-center:hover ?
add this to the css:
.hvr-underline-from-center:hover {
font-size: 30px;
}
#navlist li a:hover {
font-size: 55px;
}
Add that line to your CSS and put your own pixels value instead of '55px' to play around the text size when hovering
http://jsbin.com/hesisohuse/1/edit
Okey I just figured it out, for some reason my .background class caused the problem. By removing position=absolute; from the class my tags became clickable again.
I don't know why this happends but at least it fixed my problem.
Related
So i have made a website with HTML and CSS. It has different effects like the parallax effect(a very simple version of it), transparent navbar, and now I am trying to make my Navbar responsive. Everything works, but my hamburger menu is very far to the left and when I find a way to move it, it doesnt work after i moved it.
As you can see it is very close to the top of the screne and so far to the left that it is past the logo. I want it to stay to the right even if i made the screen smaller ofr bigger, like it moves with the screen when i move it.
This is my css code:
#font-face {
font-family: 'Poppins';
src: url(Fonts/Poppins-Regular.ttf
}
#font-face {
font-family: 'Comfortaa';
src: url(Fonts/Comfortaa-VariableFont_wght.ttf);
}
#font-face {
font-family: 'DancingScript';
src: url(Fonts/DancingScript-VariableFont_wght.ttf);
}
* {
padding: 0;
margin: 0;
color: #A6808C;
box-sizing: border-box;
}
body {
background-color: #565264;
font-family: Poppins;
}
html {
overflow: scroll;
overflow-y: hidden;
}
::-webkit-scrollbar {
width: 0%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.4);
border-bottom: 0px solid #fff;
z-index: 9999
}
nav .logo {
padding: -22px 20px;
height: 50px;
float: left;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a {
line-height: 60px;
color: #fff;
padding: 12px 30px;
text-decoration: none;
font-size: 25px;
}
nav ul li a:hover {
background: rgba(0,0,0,0.1);
border-radius: 5px;
}
.text {
font-size: 2rem;
padding: 2rem;
background-color: #565264;
color: whitesmoke;
}
.title {
font-size: 7rem;
color: whitesmoke;
text-shadow: 0 0 5px black;
}
.background {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px) scale(3);
background-repeat: no-repeat;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
.hamburger {
position: relative;
width: 30px;
height: 4px;
background: #fff;
border-radius: 10px;
cursor: pointer;
z-index: 2;
transition: 0.3s;
}
.hamburger:before, .hamburger:after {
content: "";
position: absolute;
height: 4px;
right: 0;
background: #fff;
border-radius: 10px;
transition: 0.3s;
}
.hamburger:before {
top: -10px;
width: 20px;
}
.hamburger:after {
top: 10px;
width: 20px;
}
.toggle-menu {
position: absolute;
width: 30px;
height: 100%;
z-index: 3;
cursor: pointer;
opacity: 0;
}
.hamburger, .toggle-menu {
display: none;
}
.navigation input:checked ~ .hamburger {
background: transparent;
}
.navigation input:checked ~ .hamburger::before {
top: 0;
transform: rotate(-45deg);
width: 30px;
}
.navigation input:checked ~ .hamburger::after {
top: 0;
transform: rotate(45deg);
width: 30px;
}
.navigation input:checked ~ .menu {
right: 0;
box-shadow: -20px 0 40px rgba(0,0,0,0.3);
}
#media screen and (max-width: 1062px) {
.hamburger, .toggle-menu {
display: block;
}
.header {
padding: 10px 20px;
}
nav ul {
justify-content: start;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
right: -300px;
background-color: #565264;
width: 300px;
height: 100%;
padding-top: 65px;
}
.menu li {
width: 100%;
}
.menu li a, .menu li a:hover {
padding: 30px;
font-size: 24px;
box-shadow: 0 1px 0 rgba(112,102,119,0.5) inset;
}
}
<head>
<meta charset="utf-8">
<meta name="veiwport" content="width=device-width, initalscale=1.0">
<Title>Test</Title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<nav>
<div class="logo">
<a href="index.html">
<img src="Pictures\Logo DesignK whitegreen.png" alt="DesignK" height="50px" width="200px">
</a>
</div>
<div class="navigation">
<input type="checkbox" class="toggle-menu">
<div class="hamburger"></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Feedback</li>
</ul>
</div>
</nav>
<div class="wrapper">
<header>
<img src="Pictures/LakeandMoutains.jpg" class="background">
<h1 class="title">Welcome!</h1>
</header>
<section class="text">
<h3>Essay on Mountains</h3>
</section>
</div>
</body>
Does anyone know how to make the hamburger menu move to the right side of the screen?
Update your .hamburger, .toggle-menu styles like this
.hamburger, .toggle-menu {
display: block;
position: absolute;
right: 30px;
}
Update the value of right according to your need.
You could always use flexbox. The following lines of code will display this on the right hand side:-
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.navigation {
margin-left: auto;
}
Add this to your navigation class:
.navigation{
position:relative;
}
and then this to your hamburger menu to make it stick to the right.
.hamburger{
position:relative;
right:8%;
}
The position absolute will make the hamburger-menu stick relative to the navigation bar and right 8% will stick it to the right.
You must understand the importance of HTML structure and positioning because this is the problem in your HTML.
To fix your problem, you need to put the burger menu and the check box in one container and then position the container.
The problem now is that you are positioning every part individually and their width and height are not properly set.
try to follow the steps I mentioned then let us know if you can do it or not.
I have a two-columned div element that I need to have at the bottom of the page to act as a footer. The problem is I have tried using position:fixed and bottom:0 to make the element appear at the bottom. This works but only brings one of the #column divs down to the bottom, the other disappears. I would appreciate any assistance.
Code:
/* ~ Copyright (c) Macleay Netball Association (made by Tom Carpenter for Year 11 IPT Assessment Task #2.) 2019. */
html>body {
background: none;
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
/* Trebuchet MS as main font throughout website, sans-serif acting as a backup */
}
#wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
position: absolute;
background: #1B315E;
}
::-webkit-scrollbar {
display: none;
}
* {
box-sizing: border-box;
/* Alignment of DropDown Navigation Menu and Slideshow */
}
.navigation {
background: #444;
overflow: hidden;
top: 0;
}
.menuDropDown {
overflow: hidden;
float: left;
}
.menuDropDown>#menuButton {
font-size: 12px;
padding: 16px 16px;
/* Will result in final height of navigation */
margin: 0;
outline: none;
border: none;
font: inherit;
background: inherit;
color: #FFF;
}
#menuButton:hover,
.navigation>.menuDropDown:hover>#menuButton {
border: none;
outline: none;
background: #666;
color: #1B315E;
}
.menuDropDown:hover>.menuContent {
display: block;
}
.menuContent {
display: none;
position: absolute;
background: none;
width: 100%;
left: 0;
max-height: 85vh;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.menuRow:after {
display: table;
clear: both;
content: "";
}
.menuColumn {
width: 25%;
height: 100px;
overflow-y: auto;
padding: 5px;
float: left;
background: #666;
}
.menuColumn>a {
float: none;
display: block;
text-align: left;
text-decoration: none;
font-size: 14px;
padding: 8px;
color: #1B315E;
}
.menuColumn>a.current {
background: #777;
}
.menuColumn>a:hover {
background: #888;
}
.logo {
float: right;
padding-right: 10px;
width: 60px;
height: 50px;
}
.main {
width: 100%;
height: calc(100vh - 43px);
float: left;
background: none;
position: absolute;
overflow: auto;
padding: 8px;
}
.mainHeader {
color: #FFF;
text-align: center;
}
.mainImg {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.mainBody {
color: #FFF;
padding: 8px;
}
.row:after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
width: 33.33%;
padding: 8px;
}
#column {
float: left;
width: 50%;
padding: 8px;
background: #888;
bottom: 0;
}
.sponsers {
float: left;
width: 20%;
padding: 8px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.sponsers:hover {
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
}
.slideshow {
/* Slideshow Container containing Images, Sliders and Captions */
position: relative;
margin: auto;
max-width: 1000px;
}
.slides {
display: none;
}
.slideshowImages {
width: 100%;
}
.slideButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: #888;
color: #FFF;
border: none;
cursor: pointer;
padding: 16px 32px;
font-size: 18px;
text-align: center;
border-radius: 10px;
font-weight: bold;
}
.mnaHeader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.slideButton:hover {
background: #666;
}
.previous,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #FFF;
font-weight: bold;
font-size: 18px;
transition: 0.3s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.previous:hover,
.next:hover {
background: rgba(0, 0, 0, 0.8);
}
table {
width: 100%;
font-size: 16px;
color: #FFF;
}
.tableCaption {
font-weight: bold;
font-size: 18px;
color: #33CC33;
}
table,
th,
td {
border-collapse: collapse;
border: 2px solid #888;
}
th,
td {
padding: 8px;
text-align: left;
}
#headerTable {
width: 33.33%;
background: #888;
font-size: 18px;
color: #33CC33;
}
.linkProp {
color: #FFF;
text-decoration: underline;
}
.newsPanel {
width: 100%;
background: #888;
height: 135px;
}
.imgNewsPreview {
width: 215px;
height: 135px;
padding: 4px;
float: left;
}
.newsHeaderPreview {
color: #FFF;
margin-top: 0px;
}
.newsBodyPreview {
color: #FFF;
margin-top: -12px;
}
.caption {
color: #33CC33;
text-align: center;
position: absolute;
font-size: 20px;
width: 100%;
padding: 8px 12px;
bottom: 16px;
}
.collapsible {
background: #888;
color: #FFF;
font-weight: bold;
width: 100%;
padding: 18px;
cursor: pointer;
font-size: 16px;
outline: none;
border: none;
text-align: left;
}
.active,
.collapsible:hover {
background: #666;
}
.collapsible:after {
content: '\002B';
color: #FFF;
font-weight: bold;
float: right;
margin-left: 4px;
}
.active:after {
content: '\2212';
}
.contentCollapsible {
padding: 0px 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background: #F8F8F8;
}
.fade {
-webkit-animation-name: fade;
/* To work on Safari (Apple) */
-webkit-animation-duration: 1s;
/* To work on Safari (Apple) */
animation-name: fade;
animation-duration: 1s;
}
.buttonReturn {
position: absolute;
margin-left: 20px;
margin-top: 20px;
background: #888;
color: #FFF;
border: none;
cursor: pointer;
font-size: 36px;
text-align: center;
border-radius: 50%;
font-weight: bold;
}
.videoProp {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 400px;
}
#-webkit-keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#media screen and (max-width: 600px) {
/* Stacks navigation menu acting for the site to be responsive */
.menuColumn {
width: 100%;
height: auto;
}
}
#media screen and (max-width: 800px) {
/* Stacks Image Header on Top - acting as responsive */
.column,
#column {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Responsive Sponser Images */
.sponsers {
width: 33.33%;
}
}
#media screen and (max-width: 800px) {
/* Increases video resolution as screen reduces */
.videoProp {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Reduces font-size as screen resolution lowers */
.newsBodyPreview {
font-size: 14px;
}
}
#media screen and (max-width: 300px) {
/* Reduces font-sizes within the slideshow <div> */
.previous,
.next,
.caption {
font-size: 14px;
}
}
<!DOCTYPE HTML>
<!--
~ Copyright (c) Macleay Netball Association (made by Tom Carpenter for Year 11 IPT Assessment Task #2.) 2019.
-->
<html lang="en-AU">
<head>
<title>Contact Us — Macleay Netball Association</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="../style.css" type="text/css">
<!-- Internal Stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- External Font Stylesheet -->
<link rel="shortcut icon" href="../Assets/Img/mnaHeader.png">
<!-- Tab Browser Icon (Favicon) -->
</head>
<body>
<div id="wrapper">
<div class="navigation">
<div class="menuDropDown">
<button id="menuButton" title="Navigation Menu"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn">
<a title="Home" href="../index.html"><i class="fas fa-home"></i> Home</a>
<a title="Association Contacts" href="contacts.html"><i class="fas fa-address-book"></i> Association Contacts</a>
</div>
<div class="menuColumn">
<a title="Weekly Draw" href="weekly-draw.html"><i class="fas fa-user-friends"></i> Weekly Draw</a>
<a title="News" href="#"><i class="far fa-newspaper"></i> News</a>
</div>
<div class="menuColumn">
<a title="Quick Links" href="links.html"><i class="fas fa-bookmark"></i> Quick Links</a>
<a title="Representative Teams" href="representative-teams.html"><i class="fas fa-certificate"></i> Representative Teams</a>
</div>
<div class="menuColumn">
<a title="Documentation" href="documentation.html"><i class="fas fa-file"></i> Documentation</a>
<a class="current" title="Contact Us" href="contact-us.html"><i class="fas fa-phone"></i> Contact Us</a>
</div>
</div>
</div>
</div>
<img src="../Assets/Img/mnaHeader.png" alt="Macleay Netball Association" title="Macleay Netball Association" class="logo">
<!-- Macleay Netball Association Main Logo -->
</div>
<!-- End of Navigation -->
<div class="main">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3417.0548484369647!2d152.83521681537312!3d-31.080401281517187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b9ddf84d6da904b%3A0xfc941d1ded8f7a25!2sPam+Guyer+Netball+Centre!5e0!3m2!1sen!2sau!4v1559129788713!5m2!1sen!2sau"
width="100%" height="400px" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- Google Maps Embed -->
<br>
<div class="row">
<div id="column">1</div>
<div id="column">2</div>
</div>
<!-- End of Footer -->
</div>
<!-- End of Main -->
</div>
<!-- End of Wrapper -->
</body>
</html>
Attached are some images if I put position:fixed bottom:0 in the #column CSS Code. Only Column 2 goes down, 1 is hidden.
The best way to achieve this having responsiveness in mind and easier manipulation on different screen sizes is wrapping the two div elements in another div that you will position fixed on the bottom and then adjusting the two divs to take 50% of its parent. You've done half of this job by putting the divs into a .row wrapper.
The best solution would probably be using flex to adjust the divs in their parent wrapper like this:
Plus, you can not use the same id twice as it is in your example.
<div class="row">
<div>1</div>
<div>2</div>
</div>
<style>
.row {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
}
.row > div {
flex: 1;
}
</style>
Then on mobile devices you can just change the flex direction and the footer will become one-columned instead of two-columned. Like this:
<style>
#media only screen and (max-width: 768px) {
.row {
flex-direction: column;
}
}
</style>
Add an id to the element you want as a footer, remove the class and use the css below to style the element.
#footer {
clear: both;
}
<div id="footer">
<div id="column">1</div>
<div id="column">2</div>
</div> <!-- End of Footer -->
Both 1 and 2 are fixed to the bottom. Only the float: left has no effect here and they are at the exactly same position. The 2 is in front of 1 and latter is not visible behind 2
Do this instead.
<div class="row footer">
<div id="column">1</div>
<div id="column">2</div>
</div>
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
/* ~ Copyright (c) Macleay Netball Association (made by Tom Carpenter for Year 11 IPT Assessment Task #2.) 2019. */
html>body {
background: none;
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
/* Trebuchet MS as main font throughout website, sans-serif acting as a backup */
}
#wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
position: absolute;
background: #1B315E;
}
::-webkit-scrollbar {
display: none;
}
* {
box-sizing: border-box;
/* Alignment of DropDown Navigation Menu and Slideshow */
}
.navigation {
background: #444;
overflow: hidden;
top: 0;
}
.menuDropDown {
overflow: hidden;
float: left;
}
.menuDropDown>#menuButton {
font-size: 12px;
padding: 16px 16px;
/* Will result in final height of navigation */
margin: 0;
outline: none;
border: none;
font: inherit;
background: inherit;
color: #FFF;
}
#menuButton:hover,
.navigation>.menuDropDown:hover>#menuButton {
border: none;
outline: none;
background: #666;
color: #1B315E;
}
.menuDropDown:hover>.menuContent {
display: block;
}
.menuContent {
display: none;
position: absolute;
background: none;
width: 100%;
left: 0;
max-height: 85vh;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.menuRow:after {
display: table;
clear: both;
content: "";
}
.menuColumn {
width: 25%;
height: 100px;
overflow-y: auto;
padding: 5px;
float: left;
background: #666;
}
.menuColumn>a {
float: none;
display: block;
text-align: left;
text-decoration: none;
font-size: 14px;
padding: 8px;
color: #1B315E;
}
.menuColumn>a.current {
background: #777;
}
.menuColumn>a:hover {
background: #888;
}
.logo {
float: right;
padding-right: 10px;
width: 60px;
height: 50px;
}
.main {
width: 100%;
height: calc(100vh - 43px);
float: left;
background: none;
position: absolute;
overflow: auto;
padding: 8px;
}
.mainHeader {
color: #FFF;
text-align: center;
}
.mainImg {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.mainBody {
color: #FFF;
padding: 8px;
}
.row:after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
width: 33.33%;
padding: 8px;
}
#column {
float: left;
width: 50%;
padding: 8px;
background: #888;
bottom: 0;
}
.sponsers {
float: left;
width: 20%;
padding: 8px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.sponsers:hover {
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
}
.slideshow {
/* Slideshow Container containing Images, Sliders and Captions */
position: relative;
margin: auto;
max-width: 1000px;
}
.slides {
display: none;
}
.slideshowImages {
width: 100%;
}
.slideButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: #888;
color: #FFF;
border: none;
cursor: pointer;
padding: 16px 32px;
font-size: 18px;
text-align: center;
border-radius: 10px;
font-weight: bold;
}
.mnaHeader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.slideButton:hover {
background: #666;
}
.previous,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #FFF;
font-weight: bold;
font-size: 18px;
transition: 0.3s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.previous:hover,
.next:hover {
background: rgba(0, 0, 0, 0.8);
}
table {
width: 100%;
font-size: 16px;
color: #FFF;
}
.tableCaption {
font-weight: bold;
font-size: 18px;
color: #33CC33;
}
table,
th,
td {
border-collapse: collapse;
border: 2px solid #888;
}
th,
td {
padding: 8px;
text-align: left;
}
#headerTable {
width: 33.33%;
background: #888;
font-size: 18px;
color: #33CC33;
}
.linkProp {
color: #FFF;
text-decoration: underline;
}
.newsPanel {
width: 100%;
background: #888;
height: 135px;
}
.imgNewsPreview {
width: 215px;
height: 135px;
padding: 4px;
float: left;
}
.newsHeaderPreview {
color: #FFF;
margin-top: 0px;
}
.newsBodyPreview {
color: #FFF;
margin-top: -12px;
}
.caption {
color: #33CC33;
text-align: center;
position: absolute;
font-size: 20px;
width: 100%;
padding: 8px 12px;
bottom: 16px;
}
.collapsible {
background: #888;
color: #FFF;
font-weight: bold;
width: 100%;
padding: 18px;
cursor: pointer;
font-size: 16px;
outline: none;
border: none;
text-align: left;
}
.active,
.collapsible:hover {
background: #666;
}
.collapsible:after {
content: '\002B';
color: #FFF;
font-weight: bold;
float: right;
margin-left: 4px;
}
.active:after {
content: '\2212';
}
.contentCollapsible {
padding: 0px 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background: #F8F8F8;
}
.fade {
-webkit-animation-name: fade;
/* To work on Safari (Apple) */
-webkit-animation-duration: 1s;
/* To work on Safari (Apple) */
animation-name: fade;
animation-duration: 1s;
}
.buttonReturn {
position: absolute;
margin-left: 20px;
margin-top: 20px;
background: #888;
color: #FFF;
border: none;
cursor: pointer;
font-size: 36px;
text-align: center;
border-radius: 50%;
font-weight: bold;
}
.videoProp {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 400px;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#-webkit-keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#media screen and (max-width: 600px) {
/* Stacks navigation menu acting for the site to be responsive */
.menuColumn {
width: 100%;
height: auto;
}
}
#media screen and (max-width: 800px) {
/* Stacks Image Header on Top - acting as responsive */
.column,
#column {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Responsive Sponser Images */
.sponsers {
width: 33.33%;
}
}
#media screen and (max-width: 800px) {
/* Increases video resolution as screen reduces */
.videoProp {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Reduces font-size as screen resolution lowers */
.newsBodyPreview {
font-size: 14px;
}
}
#media screen and (max-width: 300px) {
/* Reduces font-sizes within the slideshow <div> */
.previous,
.next,
.caption {
font-size: 14px;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div id="wrapper">
<div class="navigation">
<div class="menuDropDown">
<button id="menuButton" title="Navigation Menu"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn">
<a title="Home" href="../index.html"><i class="fas fa-home"></i> Home</a>
<a title="Association Contacts" href="contacts.html"><i class="fas fa-address-book"></i> Association Contacts</a>
</div>
<div class="menuColumn">
<a title="Weekly Draw" href="weekly-draw.html"><i class="fas fa-user-friends"></i> Weekly Draw</a>
<a title="News" href="#"><i class="far fa-newspaper"></i> News</a>
</div>
<div class="menuColumn">
<a title="Quick Links" href="links.html"><i class="fas fa-bookmark"></i> Quick Links</a>
<a title="Representative Teams" href="representative-teams.html"><i class="fas fa-certificate"></i> Representative Teams</a>
</div>
<div class="menuColumn">
<a title="Documentation" href="documentation.html"><i class="fas fa-file"></i> Documentation</a>
<a class="current" title="Contact Us" href="contact-us.html"><i class="fas fa-phone"></i> Contact Us</a>
</div>
</div>
</div>
</div>
<img src="../Assets/Img/mnaHeader.png" alt="Macleay Netball Association" title="Macleay Netball Association" class="logo">
<!-- Macleay Netball Association Main Logo -->
</div>
<!-- End of Navigation -->
<div class="main">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3417.0548484369647!2d152.83521681537312!3d-31.080401281517187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b9ddf84d6da904b%3A0xfc941d1ded8f7a25!2sPam+Guyer+Netball+Centre!5e0!3m2!1sen!2sau!4v1559129788713!5m2!1sen!2sau"
width="100%" height="400px" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- Google Maps Embed -->
<br>
<div class="row footer">
<div id="column">1</div>
<div id="column">2</div>
</div>
<!-- End of Footer -->
</div>
<!-- End of Main -->
</div>
<!-- End of Wrapper -->
First of all id must be unique for an element, shouldn't set same id on two elements.
When you set position fixed on an element it is positioned relative to viewport, not relative to flow of the page.
Both of your elements have bottom: 0, which is relative to browser window, that's why your first element is covered by the second one (it's not hidden). You can group them in the same parent and position the parent, so your elements are stacked as expected. Take a look at the following code:
body {
min-height: 200vh;
}
#column {
display: block;
padding 15px;
width: 100%;
position: fixed;
bottom: 0;
background: #e5e5e5;
}
#column div {
display: block;
padding: 10px;
width: 100%;
background: #9b009b;
color: #fff;
margin-bottom: 10px;
}
<div id="column">
<div>first col</div>
<div>second col</div>
</div>
My navbar (or something) is extending too far and creating a horizontal scrollbar. I see people asking about this, but I cannot find the answer for my situation. The smaller I make the screen the bigger the space gets. Right now I'm just looking at IE.11.
Can someone please help? Thank you in advance.
Below is the code where I think the problem is. (html, page css and parallax css).
<body>
<div class="wrapper">
<header class="lighthouse">
<nav class="main">
<div class="menu-icon"> <i class="fa fa-bars fa-2x"></i> </div>
<div class="top-nav-logo"> <img src="images/mlc-logo/mlcwhite.png" width="97" height="59" alt="Mission Lighthouse Church Logo"/></div>
<ul>
<li>HOME</li>
<li>WHO JESUS IS</li>
<li>WHO WE ARE</li>
<li>MEDIA</li>
<li>CONNECT</li>
</ul>
</nav>
<div class="logo"><img src="images/mlc-logo/mlc-main-320.png" width="280" height="167" alt="Mission Lighthouse Church Logo" data-enllax-ratio="-.8" data-enllax-type="foreground"/> </div>
<div class="seagull"><img src="images/Parallax/seagull2.png" alt="Seagulls" width="276" height="136" class="seagull" data-enllax-ratio="-3" data-enllax-direction="horizontal" data-enllax-type="foreground"/></div>
<div class="welcome-home" data-enllax-ratio="-1.1" data-enllax-type="foreground">Welcome Home</div>
</header>
CSS:
html, html * {
padding: 0;
margin: 0;
}
body {
font-size: 62.5%;
}
.wrapper {
width: 100%;
background-color: #000000;
position: absolute;
}
.top-nav-logo {
display: block;
width: 100%;
margin: 10px 10px 0 20px;
position: fixed;
z-index: 100;
}
.menu-icon {
width: 50%;
box-sizing: border-box;
background-color: #000;
text-align: right;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
nav.main {
display: inline-block;
position: fixed;
top: 0;
right: 0;
left: 0;
max-width: 1341px;
margin: 0 auto;
overflow: hidden;
width: 100%;
text-align: left;
z-index: 80;
}
nav ul {
list-style: none;
text-align: center;
background-color: rgba(0,0,0,0.0);
overflow: hidden;
color: #fff;
padding: 0;
margin: 0;
transition: 1s;
z-index: 80;
}
nav.blue ul {
background-color: rgba(0,34,73,0.95);
}
nav ul li {
display: inline-block;
padding: 20px;
}
nav ul li a {
display: inline-block;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 1.7em;
text-decoration: none;
}
nav ul li a:visited {
color: rgba(240,183,110,1.00);
}
nav a:hover {
color: #F0F694;
text-decoration: none;
font-weight: 700;
transition: 1.7s;
-webkit-transition: 1.7s; /*Safari*/
}
CSS for Parallax:
.lighthouse {
width: 100%;
height: 768px;
position: relative;
background-image: url(../images/Parallax/front-header-4.jpg), url(../images/Parallax/2nd-header-background.jpg);
background-size: auto 768px, cover;
background-position: top center;
background-attachment: fixed;
background-repeat: no-repeat;
will-change: transform;
overflow: hidden;
}
.logo {
height: 140px;
width: 88%;
position: relative;
top: 170px;
margin: 0 auto;
text-align: center;
opacity: 0.65;
z-index: 20;
}
.seagull {
height: 123px;
width: auto;
position: relative;
left: -190px;
opacity: 0.8;
z-index: 10;
}
.welcome-home {
font-family: 'Kaushan Script', cursive;
font-size: 9.0em;
color: #004391;
position: relative;
text-align: center;
width: 98%;
top: 255px;
}
nav.main {
display: inline-block;
position: fixed;
top: 0;
right: 0;
left: 0;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
width: 100%;
text-align: left;
z-index: 80;
}
Replace this code in your style sheet
You entered max-width:1341px; that is the reason it was expanded so far
On a webpage I am designing, the stylesheet contains an a:hover selector, which I'm using to give some links a different color when the cursor hovers over them. Not only does the color not change when I hover over them, in the "rules" tab of Firefox's inspect element window, the a:hover selector does not appear. Here's a snippet for reference. The links in question are displayed after clicking on the small image thumbnail at the top of the page.
function main() {
$('#arrow').click(function(){
$('#dropdown').animate({
top: '200px'
}, 400);
$('#menu').animate({
top: '75px'
}, 400);
$('#slide-wrapper').animate({
marginTop: '250px'
}, 400);
$(this).attr('src','uparrow.jpg');
$(this).off();
$(this).click(function(){
$('.hidden').animate({
top: '-=250'
}, 400);
$('#slide-wrapper').animate({
marginTop: '0px'
}, 400);
$(this).attr('src','downarrow.jpg');
$(this).off();
main();
});
});
}
$(document).ready(main);
body {
font-family: sans-serif;
padding: 0px;
margin: 0px;
background-image: url("background.jpeg");
background-attachment: fixed;
}
/* Menu elements */
.hidden {
z-index: -5;
top: -50px;
position: absolute;
}
#arrow {
margin-left: auto;
margin-right: auto;
height: 50px;
width: 50px;
display: block;
cursor: pointer;
}
#arrow-box {
background-color: white; /* FOR NOW */
}
#banner {
background-color: #9CAD9D; /* For now, until I get some pictures in */
width: 100%;
height: 200px;
margin: 0px;
padding: 0px;
top: 0px;
}
#banner-border {
width: 100%;
height: 20px;
top: 180px;
position: absolute;
text-align: center;
color: #245F27;
letter-spacing: 1px;
font-size: 10pt;
}
#dropdown {
height: 300px;
width: 100%;
}
#transground {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
.menu {
float: left;
color: #006607;
margin: 15px;
z-index: 1;
font-size: 16pt;
letter-spacing: 3px;
}
.menu-item {
margin-bottom: 10px;
}
/* Fonts and such */
h1 {
color: white;
padding-top: 50px;
margin: 0px;
text-align: center;
}
ul {
margin: 0px;
}
.unstyled {
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
}
a:hover {
color: white;
}
/* General structural elements */
#content {
width: 75%;
height: 500px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding: 10px;
background-color: white;
}
#slide-wrapper {
z-index: -10;
}
/* Footer stuff: Contact form will need a media query to help it fit in the screen in mobile. Or maybe remove it? */
footer {
height: 400px;
background-color: #9CAD9D; /* FOR NOW */
}
#footer-border {
background-color: #165413;
width: 100%;
height: 20px;
}
.right {
float: right;
padding: 10px;
padding-left: 0px;
padding-bottom: 0px;
width: 50%;
}
.left {
padding: 10px;
display: inline-block;
}
#media screen and (max-width: 410px) {
.left {
display: block;
}
.right {
float: none;
}
/* Still can't get the form to fit the screen -- it floats to the right. */
}
.fields {
float: left;
padding: 2px;
}
label {
padding-right: 5px;
}
#message {
height: 150px;
}
form {
margin-left: auto;
margin-right: auto;
width: 250px;
line-height: normal;
}
input, textarea {
width: 200px;
padding: 0px;
margin: 0px;
float: right;
}
.button {
width: auto;
cursor: pointer;
}
#copy {
text-align: center;
background-color: #9CAD9D; /* Same as footer */
margin: 0px;
padding-bottom: 20px;
display: block;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css"/>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
<div id="banner">
<h1>Company Name Placeholder</h1>
<div id="banner-border">CLICK THE ARROW</div>
</div>
<div id="dropdown" class="hidden">
<div id="transground"></div>
<ul id="menu" class="menu hidden unstyled">
<li class="menu-item">HOME</li> <!-- HORIZONTAL OR VERTICAL? -->
<li class="menu-item">ABOUT ME</li>
<li class="menu-item">GET A WEBSITE</li>
<li class="menu-item">PORTFOLIO</li>
</ul>
</div>
<div id="arrow-box">
<img id="arrow" src="downarrow.jpg"/>
</div>
<div id="slide-wrapper">
<div id="content">
Page content will go here.
</div>
<footer>
<div id="footer-border"></div>
<div class="left">
This will be about customers contacting me, etc.
</div>
<div class="right">
<form id="contact" method="post" action"mail.php" accept-charset="UTF-8">
<ul class="fields unstyled">
<li class="fields"><label for="name">Full Name</label></li>
<li class="fields"><input name="name" type="text" maxlength=50 placeholder="Your Name" required=""></input></li>
<li class="fields"><label for="email-address">E-Mail</label></li>
<li class="fields"><input type="email" name="email-address" maxlength=50 placeholder="you#example.com" required=""></input></li>
<li class="fields"><label for="subject">Subject</label></li>
<li class="fields"><input name="subject" type="text" maxlength=50 required=""></input></li>
<li class="fields"><label for="message">Message</label></li>
<li class="fields"><textarea id="message" name="message" maxlength=1000 required=""></textarea></li>
<li class="fields"><input class="button" type="submit" value="Send" name="submit"></input></li>
</ul>
</form>
</div>
</footer>
<p id="copy">© 2015 - Evan Dempsey</p>
</div>
<!-- Scripts down here -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="menu.js"></script>
<script type="text/javscript">
//This is supposed to be to fit the copyright thing underneath the contact form when the browser is ~ iPad size.
</script>
</body>
</html>
Help would be appreciated, I'd like to know why this does not apply. Also, the cursor: pointer; rule under the a selector doesn't seem to be working.
The problem is that some of the a parents have .hidden class and elements with .hidden class have property z-index: -5 as I see.
One way to fix the problem may be to change z-index property after the jQuery animation finishes
You have a problem with Z-indexes: don't use negative z-indexes unless you clearly understand what you are doing (this article from Philip Walton is really nice). And check how position and z-index are related.
Using this CSS stylesheet should be one way of solving your problem:
body {
font-family: sans-serif;
padding: 0px;
margin: 0px;
background-image: url("background.jpeg");
background-attachment: fixed;
}
/* Menu elements */
.hidden {
top: -50px;
position: absolute;
z-index: 1;
}
#arrow {
margin-left: auto;
margin-right: auto;
height: 50px;
width: 50px;
display: block;
cursor: pointer;
}
#arrow-box {
background-color: white;
/* FOR NOW */
z-index: 10;
position: relative;
}
#banner {
background-color: #9CAD9D;
/* For now, until I get some pictures in */
width: 100%;
height: 200px;
margin: 0px;
padding: 0px;
top: 0px;
z-index: 10;
position: relative;
}
#banner-border {
width: 100%;
height: 20px;
top: 180px;
position: absolute;
text-align: center;
color: #245F27;
letter-spacing: 1px;
font-size: 10pt;
}
#dropdown {
height: 300px;
width: 100%;
}
#transground {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
.menu {
float: left;
color: #006607;
margin: 15px;
z-index: 5;
font-size: 16pt;
letter-spacing: 3px;
}
.menu-item {
margin-bottom: 10px;
}
/* Fonts and such */
h1 {
color: white;
padding-top: 50px;
margin: 0px;
text-align: center;
}
ul {
margin: 0px;
}
.unstyled {
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
}
a:hover {
color: white;
}
/* General structural elements */
#content {
width: 75%;
height: 500px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding: 10px;
background-color: white;
}
#slide-wrapper {
z-index: 10;
}
/* Footer stuff: Contact form will need a media query to help it fit in the screen in mobile. Or maybe remove it? */
footer {
height: 400px;
background-color: #9CAD9D;
/* FOR NOW */
}
#footer-border {
background-color: #165413;
width: 100%;
height: 20px;
}
.right {
float: right;
padding: 10px;
padding-left: 0px;
padding-bottom: 0px;
width: 50%;
}
.left {
padding: 10px;
display: inline-block;
}
#media screen and (max-width: 410px) {
.left {
display: block;
}
.right {
float: none;
}
/* Still can't get the form to fit the screen -- it floats to the right. */
}
.fields {
float: left;
padding: 2px;
}
label {
padding-right: 5px;
}
#message {
height: 150px;
}
form {
margin-left: auto;
margin-right: auto;
width: 250px;
line-height: normal;
}
input,
textarea {
width: 200px;
padding: 0px;
margin: 0px;
float: right;
}
.button {
width: auto;
cursor: pointer;
}
#copy {
text-align: center;
background-color: #9CAD9D;
/* Same as footer */
margin: 0px;
padding-bottom: 20px;
display: block;
}
You need to add z-index:99 to your dropdown ID as the links are underneath another element.
I can't figure out why my elements (logo, menu, info box) are outside the light grey container. Could you help me? Many thanks
See: http://jsfiddle.net/vqoudo6d/3/
HTML:
<header class="header">
<div class="header-wrapper">
<img class="header-logo" src="http://lorempixel.com/output/fashion-q-g-284-119-5.jpg">
<nav class="header_nav">
<ul class="header_nav-wrapper">
<li class="header_nav-item"> <a id="aboutOpen" class="header_nav-item-a" href="jkk">l'Atelier</a>
</li>
<li class="header_nav-item"> <a class="header_nav-item-a header_nav-item-a--btn" href="jkjks" target="_blank">La Carte des soins</a>
</li>
<li class="header_nav-item"> <a class="header_nav-item-a header_nav-item-a--btn" href="jkjks" target="_blank">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="infos-pratiques clearfix">
<p class="info-pratiques-tag">Informations pratiques</p>
<div class="info-pratiques-content">
<p>3 rue dfdsf
<br>sdsqdssdd</p>
<p>Lundi:
<br>Mardi:
<br>Mercredi:
<br>Jeudi</p>
</div>
</div>
</header>
<div class="slider">
<ul class="slider__wrapper">
<li class="slider__item">
<div class="box" style="background-image:url(images/test.jpg);background-size: cover;
background-repeat: no-repeat; background-position: 50% 50%;"></div>
</li>
<li class="slider__item">
<div class="box" style="background-image:url(images/test2.jpg);background-size: cover;
background-repeat: no-repeat; background-position: 50% 50%;"></div>
</li>
</ul>
</div>
CSS:
.slider {
position: relative;
margin-left: auto;
margin-right: auto;
width: 90%;
height: 550px;
background: #eee;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
max-width: 1200px;
}
.slider__wrapper {
height: 100%;
list-style: none;
overflow: hidden;
*zoom: 1;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}
.slider__item {
height: 100%;
float: left;
clear: none;
}
.slider__arrows-item {
position: absolute;
display: block;
margin-bottom: -20px;
padding: 20px;
}
.slider__arrows-item--right {
bottom: 50%;
right: 30px;
}
.slider__arrows-item--left {
bottom: 50%;
left: 30px;
}
.slider__nav {
position: absolute;
bottom: 30px;
}
.slider__nav-item {
width: 12px;
height: 12px;
float: left;
clear: none;
display: block;
margin: 0 5px;
background: #fff;
}
.slider__nav-item--current {
background: #ccc;
}
.slider__nav-item:hover {
background: #ccc;
}
.box {
width: 100%;
height: 100%;
}
.header {
z-index: 999;
width: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
}
.header-wrapper {
padding: 54px 60px;
}
.header-logo {
float: left;
clear: none;
}
.header_nav {
float: right;
clear: none;
font-family:'Maven Pro', sans-serif;
font-weight: normal;
}
.header_nav-wrapper {
list-style: none;
}
.header_nav-item {
margin-left: 22px;
float: left;
clear: none;
}
.header_nav-item-a {
color: #474032;
text-decoration: none;
}
.header_nav-item-a:hover {
color: #eee;
}
.header_nav-item-a--btn {
padding: 16px 18px;
border-radius: 5px;
border: 1px solid #474032;
background-color: transparent;
}
.header_nav-item-a--donate {
margin-top: -18px;
}
.header_nav-item-a--btn:hover {
border: 1px solid #eee;
}
.info-pratiques-content {
float: left;
clear: both;
margin-top: 14px;
margin-left: 4.52489%;
font-size: 13px;
line-height: 1.38;
color: #433d2b;
}
.info-pratiques-content p {
margin-bottom: 1em;
}
.info-pratiques-tag {
margin-top: 14px;
margin-right: auto;
margin-left: auto;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
background-color: #9d926a;
font-size: 13px;
font-weight: 400;
line-height: 1.38;
text-align: center;
text-transform: uppercase;
color: rgb(65, 61, 45);
}
.infos-pratiques {
position: absolute;
top: 217px;
right: 5.1984375%;
z-index: 26;
width: 221px;
height: 200px;
background-color: rgb(222, 222, 222);
opacity: 0.91;
}
The max-width and the background are on .slider, but your header is not inside of it. just add the background and max-width to body and everything should be fine.
Also keep in mind that absolutely positioned elements are always relative to the closest non-static element (position: fixed, relative, absolute).
edit: I also agree with Paulie_D's comment, try to reduce absolute positioning