I have been working on a new site and when I was trying to use the navigation bar (while in mobile device mode) the navigation bar started drawing under the text. I have checked the code from my previous website and I just do not understand why it does not work. I can't even interact with the navigation bar.
Here is what happens: https://gyazo.com/91ca07c2fafd81355152f5c2379fd89d
Here is the code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<title>Landing Page</title>
</head>
<body>
<div class="main">
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbutton">
<i class="fas fa-bars"></i>
</label>
<img src="./img/logo.png" alt="Logo" />
<ul>
<li><a class="active" href="./">Home</a></li>
<li>Store</li>
<li>Download</li>
</ul>
</nav>
<main>
<div class="header"><p>Example Client</p></div>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id
pharetra metus. Nullam sit amet lorem sapien. Aliquam commodo
pretium.
</p>
</div>
<div class="footer">
<a href="https://t.me/scaldings">
<i class="d-block fab fa-telegram text-muted fa-lg mx-2"></i>
</a>
<a href="https://discord.com/channels/#me/394894093437763594">
<i class="d-block fab fa-discord text-muted fa-lg mx-2"></i>
</a>
<p>© Example Client</p>
</div>
</main>
</div>
</body>
</html>
CSS:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap");
::-webkit-scrollbar {
display: none;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
}
.main {
width: 100vw;
height: 100vh;
background: url("/img/bg.jpg") no-repeat;
background-size: cover;
}
nav {
height: 100px;
width: 100%;
background: rgba(97, 97, 97, 0.4);
}
/*Logo*/
nav img {
width: 80px;
float: left;
margin-top: 10px;
margin-left: 80px;
transition: 0.3s;
}
nav img:hover {
filter: brightness(80%);
}
/*Logo*/
/*Navigation links*/
nav ul {
float: right;
margin-right: 80px;
}
nav ul li {
display: inline-block;
line-height: 100px;
margin: 0 10px;
font-size: 20px;
}
nav ul li a {
padding: 0 10px;
color: #ffffff;
transition: 0.3s;
}
nav ul li a:hover {
color: #bdbdbd;
}
a.active {
border: 1.9px solid #ffffff;
border-radius: 1px;
}
a.active:hover {
border: 1.9px solid #bdbdbd;
}
.checkbutton {
float: right;
line-height: 100px;
margin-right: 80px;
color: #ffffff;
font-size: 30px;
transition: 0.3s;
cursor: pointer;
display: none;
}
.checkbutton:hover {
color: #bdbdbd;
}
#check {
display: none;
}
/*Navigation links*/
/*Main wrapper*/
main {
height: calc(100vh - 100px);
position: relative;
}
.header {
position: absolute;
top: 30%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size: 72px;
color: #ffffff;
transition: 0.3s;
}
.description {
text-align: center;
position: absolute;
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 600px;
font-size: 18px;
color: #d8d8d8;
word-wrap: normal;
transition: 0.3s;
}
.footer {
position: absolute;
float: left;
bottom: 0;
margin-left: 10px;
color: #ffffff;
}
.footer a {
color: #ffffff;
}
.footer a:hover {
color: #bdbdbd;
}
/*Main wrapper*/
/*Responsive part*/
#media (max-width: 952px) {
nav ul li a {
font-size: 20px;
}
main h1 {
font-size: 64px;
}
}
#media (max-width: 858px) {
.checkbutton {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background-color: rgba(97, 97, 97, 0.4);
top: 100px;
left: -100%;
text-align: center;
transition: all 0.8s;
}
nav ul li {
display: block;
margin: 60px 0;
}
nav ul li a {
font-size: 20px;
}
main h1 {
font-size: 60px;
}
#check:checked ~ ul {
left: 0;
}
}
/*Responsive part*/
Thank you in advance!
Increase z-index of the if the element you want to be on top.
simple example:
.below-item{
z-index:1;
}
.top-item{
z-index:2;
}
Related
lately I've started coding with some css and html and I decided to make my own first website, so I had some problems in changing the position of a div containing two buttons("s'inscrire" and "se connecter") ... Also when I hover on the header list, it starts moving upwards and downwards, I changed the padding, the margin... But nothing happens!
#import url('https://fonts.googleapis.com/css?family=Montserrat|Raleway');
*{
margin:0;
padding: 0;
font-family: Raleway;
}
body{
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url('1.jpg');
background-position: center;
background-size: cover;
height: 100vh;
}
.main ul{
float: right;
display: block;
list-style-type: none;
font-size: 15px;
margin-top: 20px;
position: sticky;
}
.main ul li{
display: inline-block;
width: 150px;
}
.main ul li i{
padding-right: 5px;
color: #eccc68;
opacity: 0.6;
}
.main ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
border-radius: 7px;
}
.main ul li a:hover{
position: relative;
display: block;
background-color: #fff;
color: #000;
transition: 0.6s ease;
}
.main ul li.active a{
background-color: #fff;
color: #000;
}
.main ul ul li{
list-style-type: none;
display: none;
}
.main ul li:hover ul li{
display: block;
}
.login ul{
float: right;
position: fixed;
list-style-type: none;
display: inline-block;
font-size: 12px;
}
.logo img{
float: left;
width: 150px;
height: auto;
margin-top: 15px;
margin-left: 0;
}
header{
background-color: rgba(202, 211, 200,0.6);
}
.main{
max-width: 1200px;
margin: auto;
}
.title img{
width: 40%;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-100%);
}
.title p{
width: 40%;
position: absolute;
top: 54%;
left: 50%;
font-size: 25px;
font-family: Montserrat;
font-weight: lighter;
transform: translate(-50%,-100%);
text-align: center;
color: #F8EFBA;
}
.button{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%,-100%);
}
.button a i{
padding-right: 5px;
color: #eccc68;
opacity: 0.6;
}
.btn{
border: 1px solid #eccc68;
border-radius: 15px;
padding: 10px 30px;
color: #fff;
font-size: 20px;
text-decoration: none;
}
.btn:hover{
background-color: #fff;
color: #000;
transition: 0.6s ease;
}
.footer{
width: 100%;
position: fixed;
bottom: 0;
background-color: rgba(0,0,0,0.4);
height: 60px;
}
.footer ul{
transform: translateX(1800px);
margin-right: 0px;
list-style-type: none;
font-size: 15px;
margin-top: 20px;
}
.footer ul li a i{
font-size: 20px;
padding-right: 5px;
color: #eccc68;
}
.footer ul li{
display: inline-block;
}
.footer h5{
font-size: 11px;
color: #eccc68;
text-align: center;
opacity: 0.7;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trip Buddy | Your free online travel guide</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="image/png" href="favicon.ico">
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="2.png">
</div>
<ul>
<li class="active"><i class="fas fa-home"></i>Accueil</li>
<li><i class="fas fa-city"></i>Villes dispo
<ul>
<li>Marrakech</li>
<li>Rabat</li>
<li>Tanger</li>
<li>Essaouira</li>
</ul>
</li>
<li><i class="fas fa-hand-holding"></i>Services</li>
<li><i class="fas fa-user-alt"></i>Contact</li>
</ul>
</div>
<div class="login">
<ul>
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</div>
<div class="title">
<img src="2.png">
<p>Trip Buddy est ton premier accompagnant guide en ligne. Rejoignez notre nombreuse communauté et télecharger l'application sur toutes les platformes GRATUITEMENT!</p>
</div>
<div class="button">
<i class="far fa-play-circle"></i>Regarder video
<i class="far fa-question-circle"></i>Aide
</div>
</header>
<footer>
<div class="footer">
<ul>
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-twitter-square"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-snapchat-square"></i></li>
</ul>
<h5>
©Khalil 2019
</h5>
</div>
</footer>
</body>
</html>
Please if you can fix this problem I'm gonna be so grateful for your help. Thanks.
I have Changed the following CSS code and menu now fixed.
.main ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
border-radius: 7px;
position: relative;
display: block;
transition:all 0.6s ease; /* this will be always at normal stage not at hover*/
}
.main ul li a:hover{
background-color: #fff;
color: #000;
}
Please have a look at this at codepen
#import url('https://fonts.googleapis.com/css?family=Montserrat|Raleway');
*{
margin:0;
padding: 0;
font-family: Raleway;
}
body{
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url('1.jpg');
background-position: center;
background-size: cover;
height: 100vh;
}
.main ul{
float: right;
display: block;
list-style-type: none;
font-size: 15px;
margin-top: 20px;
position: sticky;
}
.main ul li{
display: inline-block;
width: 150px;
}
.main ul li i{
padding-right: 5px;
color: #eccc68;
opacity: 0.6;
}
.main ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
border-radius: 7px;
position: relative;
display: block;
transition:all 0.6s ease; /* this will be always at normal stage not at hover*/
}
.main ul li a:hover{
background-color: #fff;
color: #000;
}
.main ul li.active a{
background-color: #fff;
color: #000;
}
.main ul ul li{
list-style-type: none;
display: none;
}
.main ul li:hover ul li{
display: block;
}
.login ul{
float: right;
position: fixed;
list-style-type: none;
display: inline-block;
font-size: 12px;
}
.logo img{
float: left;
width: 150px;
height: auto;
margin-top: 15px;
margin-left: 0;
}
header{
background-color: rgba(202, 211, 200,0.6);
}
.main{
max-width: 1200px;
margin: auto;
}
.title img{
width: 40%;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-100%);
}
.title p{
width: 40%;
position: absolute;
top: 54%;
left: 50%;
font-size: 25px;
font-family: Montserrat;
font-weight: lighter;
transform: translate(-50%,-100%);
text-align: center;
color: #F8EFBA;
}
.button{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%,-100%);
}
.button a i{
padding-right: 5px;
color: #eccc68;
opacity: 0.6;
}
.btn{
border: 1px solid #eccc68;
border-radius: 15px;
padding: 10px 30px;
color: #fff;
font-size: 20px;
text-decoration: none;
}
.btn:hover{
background-color: #fff;
color: #000;
transition: 0.6s ease;
}
.footer{
width: 100%;
position: fixed;
bottom: 0;
background-color: rgba(0,0,0,0.4);
height: 60px;
}
.footer ul{
transform: translateX(1800px);
margin-right: 0px;
list-style-type: none;
font-size: 15px;
margin-top: 20px;
}
.footer ul li a i{
font-size: 20px;
padding-right: 5px;
color: #eccc68;
}
.footer ul li{
display: inline-block;
}
.footer h5{
font-size: 11px;
color: #eccc68;
text-align: center;
opacity: 0.7;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trip Buddy | Your free online travel guide</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="image/png" href="favicon.ico">
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="2.png">
</div>
<ul>
<li class="active"><i class="fas fa-home"></i>Accueil</li>
<li><i class="fas fa-city"></i>Villes dispo
<ul>
<li>Marrakech</li>
<li>Rabat</li>
<li>Tanger</li>
<li>Essaouira</li>
</ul>
</li>
<li><i class="fas fa-hand-holding"></i>Services</li>
<li><i class="fas fa-user-alt"></i>Contact</li>
</ul>
</div>
<div class="login">
<ul>
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</div>
<div class="title">
<img src="2.png">
<p>Trip Buddy est ton premier accompagnant guide en ligne. Rejoignez notre nombreuse communauté et télecharger l'application sur toutes les platformes GRATUITEMENT!</p>
</div>
<div class="button">
<i class="far fa-play-circle"></i>Regarder video
<i class="far fa-question-circle"></i>Aide
</div>
</header>
<footer>
<div class="footer">
<ul>
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-twitter-square"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-snapchat-square"></i></li>
</ul>
<h5>
©Khalil 2019
</h5>
</div>
</footer>
</body>
</html>
Currently coding a responsive navbar however 2 things are really bothering me that I can't get my head round. Any help would be appreciated:
1/ With my original logo pic I have been using, I have got the nav links to line up with it (like a sort of display inblock) but I have noticed only lines up in full screen view, as you minimize the screen the links cluster up underneath and then eventually disappear when the screen is really small and the togglebox appears. How can you fix this problem.
2/ I can’t get the icons to hide from the links in fullscreen view, yet I have done the display:none in the coding
My html code so far:
<!DOCTYPE html>
<html>
<head>
<title>nav bar</title>
<link rel="stylesheet" type="text/css" href="CSS/style.CSS">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- awesome.min.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<h1 class="Logo">logo</h1>
<nav class="site-nav">
<ul>
<li><i class="fa fa-home site-nav--icon"></i>Home</li>
<li><i class="fa fa-info site-nav--icon"></i>About us</li>
<li><i class="fa fa-bus site-nav--icon"></i>blogger</li>
<li><i class="fa fa-envelope site-nav--icon"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudfare.com/ajax/libs/jqueryui/1.12.0/jquery- ui.min.js"></script>
<script type="text/javascript">
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
</script>
</body>
</html>
My CSS so far:
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
#import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
:root {
--background: rgba(253, 254, 254, .85);
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
background: #2b58de;
font-family: 'Work Sans', sans-serif;
font-weight: 600;
}
header{
background: var(--background);
text-align: left;
position: fixed;
z-index: 999;
width: 100%;
height: 92px;
}
h1{
margin-left: 82px;
display: inline-block;
}
.site-nav {
position: absolute;
top: 100%;
left:0;
background: #2043a9;
height: 0px;
overflow: hidden;
}
.site-nav--open {
height: auto;
}
.site-nav ul{
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li{
border-bottom: 1px solid #575766;
}
.site-nav li:last-child{
border-bottom: none;
}
.site-nav a{
color: #b99902;
display: block;
padding: 2em 4em 2em 1.5em;
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus {
background:#802CED;
color: #000000;
}
.site-nav--icon{
display: inline-block;
font-size: 1.5em;
margin-right: .75em;
width: 1em;
text-align:right;
color: rgba(185,153,2,1);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 1.7em;
right:1em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background:#000000;
height: 3px;
width:1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before{
transform: translateY(-6px);
}
.hamburger::after{
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before{
opacity: 0;
}
.open .hamburger::after{
transform: translateY(-3px) rotate(-90deg);
}
#media (min-width: 700px) {
.menu-toggle{
display: none;
}
.site-nav{
height: auto;
position: relative;
background:transparent;
float: right;
font-size: 21px;
padding-top: 2em;
}
.site-nav li {
display: inline-block;
border:none;
}
.site-nav a {
padding: 0;
margin-left: 5em;
margin-right: 3.5em;
}
.site-nav a:hover,
.site-nav a:focus{
background:transparent;
}
.site-nav--icon {
display: none;
}
}
Put de icon into a div block and hidden the div object.
<div class="boton-menu"><i class="fa fa-bars"></i></div>
and the css:
.boton-menu{
display: none;
}
.fa:fullscreen {
display: none
}
... should do it.
At this point, unprefixed support sits at 1.99% while the prefixed support should be 81.71%:
.fa:-webkit-full-screen {
display: none
}
.fa:-moz-full-screen {
display: none
}
.fa:-ms-fullscreen {
display: none
}
.fa:fullscreen {
display: none
}
However, in my Chrome (v70.0.3538.77) it doesn't seem to work.
According to this article Chrome v71 will support it.
Spec here.
Browser compat here.
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
#import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
:root {
--background: rgba(253, 254, 254, .85);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: #2b58de;
font-family: 'Work Sans', sans-serif;
font-weight: 600;
}
header {
background: var(--background);
text-align: left;
position: fixed;
z-index: 999;
width: 100%;
height: 92px;
}
h1 {
margin-left: 82px;
display: inline-block;
}
.site-nav {
position: absolute;
top: 100%;
left: 0;
background: #2043a9;
height: 0px;
overflow: hidden;
}
.site-nav--open {
height: auto;
}
.site-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li {
border-bottom: 1px solid #575766;
}
.site-nav li:last-child {
border-bottom: none;
}
.site-nav a {
color: #b99902;
display: block;
padding: 2em 4em 2em 1.5em;
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus {
background: #802CED;
color: #000000;
}
.site-nav--icon {
display: inline-block;
font-size: 1.5em;
margin-right: .75em;
width: 1em;
text-align: right;
color: rgba(185, 153, 2, 1);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 1.7em;
right: 1em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: #000000;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
}
#media (min-width: 700px) {
.menu-toggle {
display: none;
}
.site-nav {
height: auto;
position: relative;
background: transparent;
float: right;
font-size: 21px;
padding-top: 2em;
}
.site-nav li {
display: inline-block;
border: none;
}
.site-nav a {
padding: 0;
margin-left: 5em;
margin-right: 3.5em;
}
.site-nav a:hover,
.site-nav a:focus {
background: transparent;
}
.site-nav--icon {
display: none;
}
}
.fa:-webkit-full-screen {
display: none
}
.fa:-moz-full-screen {
display: none
}
.fa:-ms-fullscreen {
display: none
}
.fa:fullscreen {
display: none
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<header>
<div class="container">
<h1 class="Logo">logo</h1>
<nav class="site-nav">
<ul>
<li><i class="fa fa-home site-nav--icon"></i>Home</li>
<li><i class="fa fa-info site-nav--icon"></i>About us</li>
<li><i class="fa fa-bus site-nav--icon"></i>blogger</li>
<li><i class="fa fa-envelope site-nav--icon"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
I wanted to make a parallax effect but I try lots of ways still can't do it. now I have half of the parallax effect which is the background image are fixed, without moving and the next image will cover the previous image, but now I want it to become when I scrolling down the background image will move down too but just slower than the original speed.
My code here
<!DOCTYPE html>
<html>
<style>
html, body
{
height: 100%;
width: 100%
}
html
{
overflow:hidden;
}
body
{
color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
overflow-x:hidden;
overflow-y:scroll;
}
*
{
margin:0;
padding:0;
font-family: Century Gothic;
}
.top
{
background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.5)), url('../image/Kinkis-Bottomless-Brunch-Lead-Image.jpg');
height: 100vh;
background-size: cover;
background-position:center;
background-attachment:fixed;
}
.bottom
{
background-image:url('../image/AdobeStock_80592193.jpeg');
height: 100vh;
background-size: cover;
background-position:center;
background-attachment:fixed;
}
.main{
max-width: 1500px;
margin: auto;
margin-left:80px;
}
.main2{
max-width: 1500px;
margin: auto;
margin-left:80px;
}
.nav
{
float:left;
list-style-type: none;
margin-top:55px;
margin-left:65px;
}
.account
{
font-size: 25px;
font-family:"Times New Roman", Times, serif;
}
ul li
{
display: inline-block;
}
ul li a
{
text-decoration:none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover
{
background-color: #fff;
color:#000;
}
ul li .active a
{
background-color: #fff;
color: #000;
}
.logo img
{
float: left;
width: 150px;
height: auto;
margin-top: 40px;
}
.title
{
position: absolute;
top: 45%;
left: 34%;
}
.title h1
{
color:#fff;
font-size:70px;
font-family: "Brush Script MT",Arial, Helvetica, sans-serif;
}
.title2
{
position: absolute;
top: 110%;
left: 23%;
}
.title2 h2
{
color: black;
font-size:70px;
font-family: "Brush Script MT",Arial, Helvetica, sans-serif;
}
</style>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Home Page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="top">
<div class="main">
<div class="logo">
<img alt="" src="TAO_LOGO1.jpg">
</div>
<ul class="nav">
<li>Gallary</li>
<li>Account</li>
</ul>
<div class="title">
<h1>TAO Restaurant</h1>
</div>
</div>
</div>
<div class="bottom">
<div class="main">
<div class="title">
<h1>TAO Restaurant</h1>
</div>
</div>
</div>
</body>
</html>
Here's a very simple example of a parallax effect using jQuery:
$(document).scroll(function() {
var scroll = $(window).scrollTop();
$("img").css("top", "0" + (scroll / 1.8) + "px");
});
body {
margin: 0;
}
img {
position: absolute;
top: 0;
z-index: -1;
}
.block {
background: #ffffff;
position: relative;
margin-top: 100px;
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<img src="https://placeimg.com/640/480/any">
<div class="block">Some text</div>
</div>
and here the same approach is specifically applied to your case:
$(document).scroll(function() {
var scroll = $(window).scrollTop();
$("#header").css("background-position", "0%" + (scroll / -1.8) + "px");
});
html,
body {
height: 100%;
width: 100%
}
html {
}
body {
color: #fff;
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
font-family: Century Gothic;
}
.top {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url('https://placeimg.com/640/640/any');
height: 500px;
background-size: cover;
background-position: 0 0;
background-attachment: fixed;
}
.bottom {
height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.main {
max-width: 1500px;
margin: auto;
margin-left: 80px;
}
.main2 {
max-width: 1500px;
margin: auto;
margin-left: 80px;
}
.nav {
float: left;
list-style-type: none;
margin-top: 55px;
margin-left: 65px;
}
.account {
font-size: 25px;
font-family: "Times New Roman", Times, serif;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover {
background-color: #fff;
color: #000;
}
ul li .active a {
background-color: #fff;
color: #000;
}
.logo img {
float: left;
width: 150px;
height: auto;
margin-top: 40px;
}
.title {
position: absolute;
top: 45%;
left: 34%;
}
.title h1 {
color: #fff;
font-size: 70px;
font-family: "Brush Script MT", Arial, Helvetica, sans-serif;
}
.title2 {
position: absolute;
top: 110%;
left: 23%;
}
.title2 h2 {
color: black;
font-size: 70px;
font-family: "Brush Script MT", Arial, Helvetica, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="top">
<div class="main">
<div class="logo">
<img alt="" src="TAO_LOGO1.jpg">
</div>
<ul class="nav">
<li>Gallary</li>
<li>Account</li>
</ul>
<div class="title">
<h1>TAO Restaurant</h1>
</div>
</div>
</div>
<div class="bottom">
<div class="main">
<div class="title">
<h1>TAO Restaurant</h1>
</div>
</div>
</div>
I'm trying to make css drop-down menu responsive according to the browser window.
I want the menu text to stay centered according to the browser window
Please see this video as examples of the intended behavior:
https://youtu.be/ZPWforRw_cc?t=34m23s
/* ------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-wrap {
width: 1216px;
margin: 0 auto;
}
/* ------------------------------------------ */
/* PAGE CONTENT */
/* ------------------------------------------ */
.box1 {
height: 30px;
width: 300px;
background: #8242b1;
}
.box2 {
height: 30px;
width: 300px;
background: #b14242;
}
.box3 {
height: 30px;
width: 300px;
background: #424bb1;
}
.page-content {
display:flex;
justify-content: center;
transition: ease-in-out 0.3s;
position:relative;
top: -260px;
z-index: 0; }
.toggle {
transition: ease-in-out 0.3s;
text-decoration: none;
font-size: 30px;
color: #eaeaea;
position:relative;
top: -120px;
left: 20px;
z-index: 1; }
.toggle:hover {
color:#cccccc; }
.sidebar {
display:flex;
justify-content: center;
align-items: center;
transition: ease-in-out 0.3s;
position: relative;
top: -220px;
bottom: 0px;
left: 0px;
height: 220px;
width: auto;
padding: 30px;
background: #333;
z-index: 1; }
.sidebar li {
display:flex;
justify-content: center;
list-style: none;
color: rgba(255, 255, 255,0.8);
font-family: 'Lato', sans-serif;
font-size: 16px;
margin-bottom: 16px;
cursor: pointer; }
.sidebar li:hover {
color: rgba(255, 255, 255,1); }
#sidebartoggler {
display: none; }
#sidebartoggler:checked + .page-wrap .sidebar {
top: 0px; }
#sidebartoggler:checked + .page-wrap .toggle {
top: 100px; }
#sidebartoggler:checked + .page-wrap .page-content {
padding-top: 220px; }
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
</head>
<body>
<input type="checkbox" id="sidebartoggler" name="" value="">
<div class="page-wrap">
<div class="sidebar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<label for="sidebartoggler" class="toggle">☰</label>
<div class="page-content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
</body>
</html>
this will work,
.page-wrap{
width:1216px;
}
+ use Media Queries as follows:
#media only screen and (max-width: 1216px) {
.page-wrap{
width: 100%;}
}
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)