I followed a tutorial about sticky navbar with pure css without javascript. The problem is that the sticky navigation bar is not fixed at the top of the page when i scroll down. Under this sticky navbar I have 3 other sections. Every time I scroll down the page that the navbar goes under sections and does not work anymore. In the header I have a full-width image and I have some text and a button on it.
Here is my code of navbar in HTML:
header {
margin: auto;
position: relative;
width: 100%;
height: 100vh;
background: linear-gradient(black, transparent, black), url(images/architecture2.jpg);
background-size: cover;
background-position: center;
display: table;
top: 0;
}
nav {
position: absolute;
width: 100%;
height: 50px;
background: rgba(0, 0, 0, .1);
position: sticky;
top: 0;
}
nav ul {
display: flex;
margin: 0;
padding: 0 100px;
float: right;
}
nav ul li {
list-style: none;
}
nav ul li a {
display: block;
color: #fff;
padding: 0 15px;
text-decoration: none;
text-transform: capitalize;
font-weight: bold;
line-height: 90px;
}
.intro .inner {
margin-top: 200px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
z-index: 10;
color: #fff;
}
.content h1 {
font-weight: 800;
color: #fff;
text-transform: uppercase;
font-size: 3.5rem;
}
.content p {
padding: 0;
margin-top: -35px;
margin-left: -1px;
color: #fff;
font-size: 2.2rem;
padding-bottom: 35px;
}
.btnD1 {
border: 2px solid #fff;
color: #000;
background: #fff;
border-radius: 50px;
padding: 16.5px 50px;
font-size: 1.15rem;
font-weight: 500;
text-decoration: none;
}
<html>
<head>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu">
<ul>
<li>Acasa</li>
<li>Despre Noi</li>
<li>Calatorii</li>
<li>Contact</li>
<li>SignIn</li>
</ul>
</div>
</nav>
<div class="intro">
<div class="inner">
<div class="content">
<h1>Călătoreşte cu noi în jurul lumii</h1>
<p>Destinaţia visată este la un click distanţă!</p>
<a class="btnD1" href="#">Rezervă acum</a>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
Sorry for my bad english.
Thanks!
The reason why it behave is the use of z-index in the .intro .inner class. You will need to set the z-index: 11; on the .nav class for it to appear on top of everything.
header {
margin: auto;
position: relative;
width: 100%;
height: 100vh;
background: linear-gradient(black, transparent, black), url(images/architecture2.jpg);
background-size: cover;
background-position: center;
display: table;
top: 0;
}
nav {
position: absolute;
width: 100%;
height: 50px;
background: rgba(0, 0, 0, .8);
position: sticky;
top: 0;
z-index: 11;
}
nav ul {
display: flex;
margin: 0;
padding: 0 100px;
float: right;
}
nav ul li {
list-style: none;
}
nav ul li a {
display: block;
color: #fff;
padding: 0 15px;
text-decoration: none;
text-transform: capitalize;
font-weight: bold;
line-height: 90px;
}
.intro .inner {
margin-top: 200px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
z-index: 10;
color: #fff;
}
.content h1 {
font-weight: 800;
color: #fff;
text-transform: uppercase;
font-size: 3.5rem;
}
.content p {
padding: 0;
margin-top: -35px;
margin-left: -1px;
color: #fff;
font-size: 2.2rem;
padding-bottom: 35px;
}
.btnD1 {
border: 2px solid #fff;
color: #000;
background: #fff;
border-radius: 50px;
padding: 16.5px 50px;
font-size: 1.15rem;
font-weight: 500;
text-decoration: none;
}
<html>
<head>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu">
<ul>
<li>Acasa</li>
<li>Despre Noi</li>
<li>Calatorii</li>
<li>Contact</li>
<li>SignIn</li>
</ul>
</div>
</nav>
<div class="intro">
<div class="inner">
<div class="content">
<h1>Călătoreşte cu noi în jurul lumii</h1>
<p>Destinaţia visată este la un click distanţă!</p>
<a class="btnD1" href="#">Rezervă acum</a>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
If you're not sure what other z-index values you gonna use. Most people set it to 999 for things that supposed to appear on top of everything at all times.
The nav is sticky, but only within it's parent (which is the .header). To fix this, simply make the .header sticky - this way it will be sticky as long as it's parent (which is .wrapper) is being scrolled.
And also give it a higher z-index than it's siblings (.intro inner has z-index: 10), or it will come underneath the intro inner when scrolled pass it :
header {
position: sticky;
top: 0;
z-index: 11;
}
The problem was that sticky propriety. i removed that from the nav and i added a transition and z-index as well.
nav{
position: fixed;
width: 100%;
height: 50px;
background: rgba(0,0,0,.2);
top: 0;
z-index:999;
transition: 0.5s;
}
nav ul{
display: flex;
margin: 0;
padding: 0 100px;
float:right;
}
nav ul li{
list-style: none;
}
nav ul li a{
display: block;
color: #fff;
padding: 0 15px;
text-decoration: none;
text-transform: capitalize;
font-weight: bold;
line-height: 90px;
}
Thank you all!
Make your wrapper's Height auto. this will fix your issue.
Related
This is the html code:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<img src="/static/sun1.png" id="sun">
<h2 id="text"><span>Help save our</span><br>Planet</h2>
<img src="/static/water1.png" id="water">
</section>
<!-- Page content -->
<div class="w3-content w3-padding" style="max-width:1564px">
And here is the code to the nav bar:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-top">
<div class="w3-bar w3-white w3-wide w3-padding w3-card">
<b>Taco</b> Project
<!-- Float links to the right. Hide them on small screens -->
<div class="w3-right w3-hide-small">
Home
Upload
Library
Search
Capabilities
Process
About
</div>
</div>
This is the CSS for the parallex section of the website. I believe the problem has something to do with something within the parallex being of higher priority than the navigation bar. A fix I did that stopped the text from going above the nav bar is by changing the z index of the Navbar to 999. I still have the error of not being able to click on the Navbar once I start scrolling as well as it going below the transition between the parallex and the rest of the website :
#header{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 10px 10px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10000;
}
#header .nav{
color: #fff;
font-weight: 700;
font-size: 2em;
text-decoration: none;
}
#header .logo{
color: #094b65;
font-weight: 700;
font-size: 2em;
text-decoration: none;
padding-right: 400px;
}
#header ul{
display: flex;
justify-content: center;
align-items: center;
}
#header ul li{
list-style: none;
margin-left: 20px;
}
#header ul li a{
text-decoration: none;
padding: 6px 15px;
color: #094b65;
border-radius: 20px;
}
#header ul li a:hover,
#header ul li a.active{
background: #094b65;
color: #fff;
}
body {
background: #01191d;
min-height: 1500px;
}
section {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
section:before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #01191d, transparent);
z-index: 10000;
}
section:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
mix-blend-mode: color;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section #text{
position: relative;
color: #094b65;
font-size: 10vw;
text-align: center;
line-height: 0.55em;
font-family: 'Rancho', cursive;
transform: translateY(-50%);
}
section #text span{
color: #094b65;
font-size: 0.20em;
letter-spacing: 2px;
font-weight: 400;
font-family: 'Poppins', sans-serif;
}
#text {
position: relative;
color: #ffffff;
font-size: 10em;
z-index: 1;
}
#road {
z-index: 2;
}
p, h3{
color: white;
}
.sec {
position: relative;
padding: 100px;
}
.sec h2{
font-size: 3.5em;
color: #fff;
margin-bottom: 10px;
}
.sec p{
font-size: 1em;
color: #fff;
}
It seems like the issue is that the navbar is going below the parallex, but that doesn't really make sense since I can view it the whole time.
video demo of the page
Its probably z-index. Since the banner section has stacked layers it should have z-index set. You need to set a higher z-index for .w3-top. May be add .w3-top{z-index:999} to the css and check.
Try to pass the entire nav bar (all elements supposed to be clickable) in tags and add
The function javascript_function() has to contain everything you want to do after the click.
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I’m trying to move my text to the middle of my header on the image but as soon as I move it the whole header follows. Could someone try to help me solve this issue? As you see I’m trying to make it using margin-top but when I implement this the header follows. I have closed all the divs that affects the image.
html, body {
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
body {
font-family: 'Josefin Sans', sans-serif;
text-align: center;
}
header {
width: 100%;
height: 400px;
background: url(/assets/image/tjanst.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 10;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
padding: 16px 40px;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
}
.move-down h3{
margin-top: 200px;
max-width: 400px;
}
nav ul li a {
font-family: 'Josefin Sans', sans-serif;
font-size: 14px;
color: #fff;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
}
a {
color: #fff;
text-decoration: none;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 20px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo wow tada">
</div>
<div class="menu">
<ul>
<li>START</li>
<li>TJÄNSTER</li>
<li>OM OSS</li>
<li>KONTAKT</li>
</ul>
</div>
</nav>
<div class="move-down wow fadeInUp"><h3> VILL GÖRA KUNDEN NÖJD</h3>
<h3> tel: 070719763 </h3></div>
</header>
how it looks now
https://i.stack.imgur.com/vOQGa.png
Well remove 'margin-top: 200px;' in the '.move-down h3' and add 'padding: 200px 0px 0px 0px;' or 'padding-top: 200px;'
Yes, Simple solution is.
Add this CSS
h3{
maring:0;
}
Hope this helps.
Instead of adding margin-top add top value to relatively positioned element.
.move-down h3 {
max-width: 400px;
position: relative;
top: 205px;
}
https://jsfiddle.net/6uedrb89/12/
This is my code (im a total noob in html) this code gives me whitespace on top and on the left of my navigation... do you guys have any idea of what im doing wrong?
div.nav {
background-color: black;
color: white;
font-size: 20px;
font-weight: bold;
position: fixed;
width: 100%;
text-align: center;
}
ul {
}
li {
display: inline-block;
list-style: none;
}
li a {
padding: 15px;
color: white;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Wat is D&B</li>
<li>D&B in Nederland</li>
</ul>
</div>
Added html
this is CSS. Add this
body{
padding: 0;
margin: 0;
}
body{
padding: 0;
margin: 0;
background-color: #e8e4e5;
}
div.nav {
background-color: black;
color: white;
font-size: 20px;
font-weight: bold;
position: fixed;
width: 100%;
text-align: center;
}
ul {
}
li {
display: inline-block;
list-style: none;
}
li a {
padding: 15px;
color: white;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Wat is D&B</li>
<li>D&B in Nederland</li>
</ul>
</div>
But you can set to nav div position fixed: it will help when you get scroll in content, but nav div all time will in top.
body{
padding: 0;
margin: 0;
}
.content{
margin-top: 60px;
height: 150vh;
background-color: #d2d29d;
}
div.nav {
position: fixed;
height: 60px;
background-color: black;
color: white;
font-size: 20px;
font-weight: bold;
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
ul {
}
li {
display: inline-block;
list-style: none;
}
li a {
padding: 15px;
color: white;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Wat is D&B</li>
<li>D&B in Nederland</li>
</ul>
</div>
<div class="content">
Some text
</div>
Since you're using position:fixed; you can change you css to the following, which will force the navbar to be in the top-left corner of your page
div.nav {
background-color: black;
color: white;
font-size: 20px;
font-weight: bold;
position: fixed;
top:0; //<================= Add this
left:0; //<================= And add this
width: 100%;
text-align: center;
}
Ofcourse, there's many more ways. The above CSS will result in your whitespace being removed
div.nav {
background-color: black;
color: white;
font-size: 20px;
font-weight: bold;
position: fixed;
top:0; //<================= Add this
left:0; //<================= And add this
width: 100%;
text-align: center;
}
ul {
}
li {
display: inline-block;
list-style: none;
}
li a {
padding: 15px;
color: white;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Wat is D&B</li>
<li>D&B in Nederland</li>
</ul>
</div>
Hope this helps!
I am trying to set up the footer, but I'm unable to remove the lines under the text. I also would like to change the color of the text. I tried using text decoration:none under .footer ul, but that was unsuccessful.
h2 {
text-align: center;
font-family: "Courier New";
color: beige;
font-size: 50px;
font-weight: 200;
text-shadow: -2px -2px black;
margin-bottom: -50px;
position: relative;
}
.head-link {
text-decoration: none;
color: aliceblue;
}
.head-link:hover {
margin: 20px auto 20px;
position: relative;
color: darkgoldenrod;
}
header {
background-image: url(https://i.imgur.com/xD3POCF.jpg);
position: absolute;
background-position: center;
max-width: 2000px;
width: 100%;
height: 100%;
top: 0;
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
bottom: 40px;
}
.header-image {
background-size: cover;
}
.dropbtn {
background-color: transparent;
color: darkblue;
padding: 10px;
cursor: pointer;
font-family: monospace;
top: 0;
font-size: 15px;
width: 120px;
height: 50px;
border-color: black;
border-style: double;
align-content: center;
text-align: center;
margin-top: -10px;
}
.dropdown {
display: inline-block;
position: relative;
margin-left: 15px;
}
.dropdown-content {
padding: 12px;
position: absolute;
font-family: monospace;
background-color: transparent;
z-index: 1;
display: none;
min-width: 10px;
text-align: left;
left: 0;
}
.dropbtn:hover {
color: white;
}
.dropdown-content a {
color: #04116f;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 13px;
}
.dropdown-content a:hover {
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
text-decoration: underline;
}
.sidebar {
display: block;
position: relative;
top: -650px;
bottom: 0px;
left: -30px;
width: 120px;
padding: 10px;
background: transparent;
z-index: 0;
}
.sidebar ul {
cursor: pointer;
list-style: none;
color: white;
line-height: 2;
}
body {
margin: 0px;
top: 0;
width: 100%;
max-height: 10%;
background-image: url(http://i.imgur.com/yiMoYpV.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 20px 50px center;
background-attachment: fixed;
}
.content {
display: block;
margin-right: 0px;
padding: 0px;
margin-bottom: 700px;
position: relative;
max-width: 1500px;
max-height: 500px;
}
p {
display: block;
padding: 40px;
position: relative;
max-width: 500px;
max-height: 500px;
width: 100%;
left: 50%;
height: 200px;
top: 120px;
font-family: monospace;
font-size: 15px;
line-height: 2;
margin-bottom: -70px;
color: goldenrod;
text-align: left;
}
.footer {
margin: 100px 0 0 0;
display: flex;
flex-flow: row;
justify-content: center;
padding-bottom: 2px;
align-content: space-between;
background: transparent;
overflow: hidden;
}
.footer ul {
text-align: center;
list-style: none;
display: inline-flex;
color: white;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<header>
<h2 style="bottom: -130px">
<a href="#" class=h ead-link> A B E L</a>
</h2>
<div class="dropdown" style="float;right">
<button class="dropbtn">Menu</button>
<div class="dropdown-content" style="right;0">
About
Portfolio
Contact
</div>
</div>
<div class="title"></div>
<title>A B E L </title>
</header>
<body>
<div id="hl-content" class="content"></div>
<p>
<span style="color:navajowhite">
<b>Hello, Welcome to my website.</b>
</span>
<BR></BR>
My name is Abel, a senior college student currently residing in the Bay Area. This portfolio will give you a good background about me including my specialties, expertise and even hobbies. As you can probably tell from the background pictures, I like traveling
and taking photos!
</p>
<p>This is my first ever website that I created using HTML and CSS, and it's a pleasure to finally be able to share it with you. I am happy to receive any feedback, recommendations or opportunities from you, so don't hesitate to contact me.</p>
<div class="footer">
<ul>
<li> About</li>
<li>Portfolio</li>
<li> Contact </li>
</ul>
</div>
</body>
</html>
As you can see text decoration and color doesn't work.
How can I fix this?
.footer > ul > li > a {
color: white;
text-decoration: none;
}
Try this.
You need to style the links in your footer explicitly.
.footer ul a {
text-decoration:none;
}
You need to add this css :
.footer ul li a {
text-decoration:none;
}
I've tried my best, this might help as per your requirement(underline and color):
add this in your code,
.footer ul li a {
text-decoration: none;
color: tan;
padding: 5px;
}
.footer ul li a:hover {
text-decoration: underline;
}
appreciate if it is useful enough.
I have a problem with putting an img for hover background.
It should look like this : Navigation
These 2 lines, represent the hover transparent image, and the text "home" should be in center of that img.. I have no idea how to do that... Anyone ?
Sorry if my english is bad
.page-container {
width: 980px;
margin: 0 auto;
text-align: center;
}
header {
margin: 0;
padding: 0;
width: 100%;
height: 220px;
background-color: #EAEAEA;
}
.logo {
text-align: center;
}
.logo img {
margin: 30px 0 0 0;
}
nav {
height: 136px;
}
ul {
list-style-type: none;
display: inline-block;
margin: 70px 0 0 0;
padding: 0;
}
nav li {
float: left;
text-align: center;
}
nav li a {
margin-right: 165px;
text-decoration: none;
float:left;
font-size: 22px;
letter-spacing: 3px;
text-transform: uppercase;
font-family: font91477;
color: #9E9E9E;
background-size: 75px;
}
a:focus {
text-decoration: none;
color: #9E9E9E;
}
a:hover {
height: 75px;
text-decoration: none;
color: #9E9E9E;
background: url(http://i.imgur.com/P5tF09r.png) no-repeat center;
}
<header>
<div class="logo">
<img src="img/logo.png"/>
</div>
<nav>
<div class="page-container">
<ul>
<li>Home</li>
<li>O Podjetju</li>
<li>Produkti</li>
<li><a class="last-child" href="#">Kontakti</a></li>
</ul>
</div>
</nav>
</header>
just add the following css styles
a:hover {
height: 75px;
text-decoration: none;
color: #9E9E9E;
background: url(http://i.imgur.com/P5tF09r.png) no-repeat center;
/*****************here they are ************/
display:flex;
align-items: center;
}
Why you don't make it in css ? Something like this
.menu{
list-style: none;
background-color: #EAEAEA;
margin: 0;
padding: 20px 0;
overflow: hidden;
}
.menu__item{
float: left;
margin: 0 20px;
position: relative;
}
.menu__item a{
background-color: #EAEAEA;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.menu__item::after{
content:'';
width: 1px;
height: 1px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: rotate(-45deg);
z-index: 0;
transition: all .25s ease;
}
.menu__item:hover::after{
width: 50px;
margin: -1px 0 0 -25px;
}
<ul class="menu">
<li class="menu__item"><a>Home</a></li>
<li class="menu__item"><a>test</a></li>
<li class="menu__item"><a>very long title for test</a></li>
<li class="menu__item"><a>test</a></li>
</ul>