window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
}
.active {
opacity: 1;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
How can I get the FadeInLeft effect when changing content from .opacity=0 to .opacity=1 on the left side.
I tried to solve this problem with the given script, but it did not work for me.
P.S. See this layout in fullscreen.
Here is a very ruff first draft
Since you already have the .active class being added to your .subtitle class to change opacity, you can just tack on CSS Animation to those classes.
In my example I have .subtitle > div set to right: 100%; and .active > div set to right: 0%; with a transition: 300ms;
Which will animate the block from the left side of the screen over to the right side in 300ms. You can play around with this until you get the animation where you'd like.
Here's a great article from MDN with more information about Using CSS Transitions
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
Examples
div {
transition: <property> <duration> <timing-function> <delay>;
}
#delay {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
#delay:hover {
font-size: 36px;
}
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
transform: rotate(180deg);
}
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
transition:300ms;
}
.subtitle > div {
transition:300ms;
right:100%;
}
.subtitle > div h1 {
opacity:0;
position:relative;
top:2em;
transition:300ms;
transition-delay:1s;
}
.active {
opacity: 1;
}
.active > div {
right:0;
}
.active > div h1 {
opacity:1;
top: 0;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
Related
So i was building a burger menu responsive navbar. I finished up most of the working but i got stuck at one point. The problem is i have applied the javascript onClick event listener on the div .burger so that it changes the opacity of the .nav-container to 1. Up until to this point this works fine. The problem is this click event only works in some areas on the .burger. Like if clicked on of the lines in it or somewhere to the right. I can't seem to find the problem. Can someone help me with this? Thanks in advance.
Here is my code
function showNav() {
var nav = document.getElementById("nav");
nav.classList.add("show-nav");
}
* {
margin: 0px;
padding: 0;
box-sizing: border;
}
.container {
display: flex;
margin-top: 2%;
}
header {
position: relative;
z-index: 1;
}
.line1,
.line2,
.line3 {
width: 40px;
height: 8px;
background-color: black;
margin-top: 3px;
}
.nav-heading {
flex: 4;
margin-left: 5%;
}
.burger {
flex: 1;
margin-left: 40%;
background-color: red;
padding: 0;
width: auto;
}
.nav-container {
position: absolute;
width: 100%;
opacity: 0;
transition: .2s ease-in-out;
transform: translateY(-20%);
transform-origin: left;
ul {
display: flex;
flex-direction: column;
background-color: blue;
width: 100%;
align-items: center;
list-style-type: none;
li {
flex: 1;
padding: 15px;
}
}
}
.show-nav {
opacity: 1;
transform: translateY(20%);
}
<header>
<div class="container">
<div class="nav-heading">
<h1>Navbar</h1>
</div>
<div class="burger" onclick="showNav()">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="nav-container" id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
Just put z-index = 1 on .burger.
.burger {
flex: 1;
margin-left: 40%;
background-color: red;
padding: 0;
width: auto;
z-index: 1;
}
to bring your menu up front , you can add position:relative + z-index:1; to make sure it stands on top.
You also add the rule cursor: pointer; to show it is a clickable element :)
For the class you add, you could use classList . toggle() , so it shows/hides alternatively.
example
function showNav() {
var nav = document.getElementById("nav");
nav.classList.toggle("show-nav");
}
* {
margin: 0px;
padding: 0;
box-sizing: border;
}
.container {
display: flex;
margin-top: 2%;
}
header {
position: relative;
z-index: 1;
}
.line1,
.line2,
.line3 {
width: 40px;
height: 8px;
background-color: black;
margin-top: 3px;
}
.nav-heading {
flex: 4;
margin-left: 5%;
}
.burger {
flex: 1;
margin-left: 40%;
background-color: red;
padding: 0;
width: auto;
cursor: pointer;
position:relative;
z-index:1
}
.nav-container {
position: absolute;
width: 100%;
opacity: 0;
transition: .2s ease-in-out;
transform: translateY(-20%);
transform-origin: left;
}
ul {
display: flex;
flex-direction: column;
background-color: blue;
width: 100%;
align-items: center;
list-style-type: none;
}
li {
flex: 1;
padding: 15px;
}
li a {
color: black;
}
.show-nav {
opacity: 1;
transform: translateY(20%);
}
<header>
<div class="container">
<div class="nav-heading">
<h1>Navbar</h1>
</div>
<div class="burger" onclick="showNav()">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="nav-container" id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
Just change the width of
.nav-container {
width: 30%;
}
so it doesn't overlap the burger. In general your CSS structure is not good.
I'm trying to make a stem filling with a color and with circles for steps along the stem.
This is an example of what I'm currently aiming for: https://codepen.io/nicklassandell/pen/ztGac
This is currently what I have: https://codepen.io/TheOshika/full/xxRRVNb (the design is similar to the above code but I wrote the code from scratch)
I'm using a scrollspy script in order to trigger a filling animation in the circles. However I'm not satisfied with it because the offset for the trigger is too difficult to set for a responsive design. I'm now thinking about removing the javascript part and instead having a stem filling the circles with the scrolling, but no animation.
This is what I'm looking for, except I don't know how to make the background color in the stem fill the circles:
.header {
position: relative;
height: 800px;
background: blueviolet;
z-index: 3;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: #4c63b6;
}
.container {
margin: 0px auto;
position: relative;
}
/* stem */
.filling-stem {
position: sticky;
z-index: 1;
float: left;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 50vh;
width: 5px;
background-color: #bed0f7;
}
.stem-background {
position: absolute;
z-index: 0;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
width: 5px;
background-color: #1f2933;
}
.stem-nav {
position: absolute;
z-index: 2;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
}
#my-awesome-nav {
display: flex;
height: 100%;
justify-content: space-around;
flex-direction: column;
list-style: none;
margin-left: 0;
padding-left: 0;
}
#my-awesome-nav li a {
border: solid 3px black;
border-radius: 50%;
display: inline-block;
background-color: #1f2933;
}
#my-awesome-nav li a .color-change {
height: 40px;
width: 40px;
background-color: #1f2933;
border-radius: 50%;
}
/* timeline */
.timeline-container {
position: relative;
}
.step-container {
margin: 0 25% 0 25%;
display: flex;
align-items: center;
height: 1500px;
}
/* footer */
footer {
display: flex;
justify-content: center;
align-items: center;
height: 1000px;
width: 100%;
background-color: black;
color: white;
}
<div class="container">
<div class="container-inner">
<div class="filling-stem"></div>
<div class="header"></div>
<div class="timeline-container">
<div class="timeline-container-inner">
<div class="stem-background"></div>
<div class="stem-nav">
<ul id="my-awesome-nav">
<li data-index="0"><a href="#step-one">
<div class="color-change one"></div>
</a></li>
<li data-index="1"><a href="#step-two">
<div class="color-change two"></div>
</a></li>
<li data-index="2"><a href="#step-three">
<div class="color-change three"></div>
</a></li>
<li data-index="3"><a href="#step-four">
<div class="color-change four"></div>
</a></li>
<li data-index="4"><a href="#step-five">
<div class="color-change five"></div>
</a></li>
</ul>
</div>
<div class="step-container">
<div class="step-container-inner">
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>End of the page</p>
</footer>
It should be possible to get the required 'filling' effect using just CSS.
We add a pseudo before and a pseudo after element to each of the li elements. These have a radial-gradient background which has a transparent 'bite' out at the position of the circles containing the a (anchor) element. Behind the whole thing we put a fixed element which has the 'fill' color in the top half and the darker (non-filled) color in the bottom half. This is done by giving it a background image which is a linear gradient.
The inner divs (inside the anchor elements) are not now needed.
Here is a snippet to show the idea. CSS variables have been introduced to make it easier to change dimensions if required. (Note: there is redundant CSS in here which could do with tidying up.)
* {
margin: 0;
padding: 0;
--stemw: 5px; /* the width of the stem */
--circled: 40px; /* the diameter of the circles */
--lih: 300px; /* the height of each list item */
--nolis: 5; /* the number of items in the list */
--halfstemw: calc(var(--stemw) / 2);
--circler: calc(var(--circled) / 2); /* the circle radius */
--halflih: calc(var(--lih) / 2);
}
div.bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: linear-gradient(to top, #1f2933 0%, #1f2933 50%, #bed0f7 50%, #bed0f7 100%);
overflow: hidden;
}
#my-awesome-nav li {
position: relative;
}
#my-awesome-nav li::before, #my-awesome-nav li::after {
position: absolute;
transform: translateX(calc(-100% + var(--circler)));
width: calc(50vw - var(--halfstemw));
height: var(--lih);
top: calc(var(--halflih) * -1);
content: '';
z-index: -1;
}
#my-awesome-nav li::before {
left: 0;
background: radial-gradient(circle at calc(100% + var(--halfstemw)) calc(50% + var(--circler)), transparent 0%, transparent 3%, #4c63b6 3%, #4c63b6 100%);
}
#my-awesome-nav li::after{
left: calc(50vw + var(--halfstemw));
background: radial-gradient(circle at calc(var(--halfstemw) * -1) calc(50% + var(--circler)), transparent 0%, transparent 3%, #4c63b6 3%, #4c63b6 100%);
}
.header {
position: relative;
height: 800px;
background: blueviolet;
z-index: 3;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: #4c63b6;
}
.container {
margin: 0px auto;
position: relative;
}
/* stem */
.filling-stem {
position: sticky;
z-index: 1;
float: left;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 50vh;
width: 5px;
background-color: #bed0f7;
}
.stem-background {
position: absolute;
z-index: 0;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
width: 5px;
background-color: #1f2933;
}
.stem-nav {
position: absolute;
z-index: 2;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
}
#my-awesome-nav {
display: flex;
height: 100%;
justify-content: space-around;
flex-direction: column;
list-style: none;
margin-left: 0;
padding-left: 0;
}
#my-awesome-nav li a {
width: 40px;
height: 40px;
border: solid 3px black;
border-style: none;
border-radius: 50%;
display: inline-block;
background-color: #1f2933;
background-color: transparent;
}
/*
#my-awesome-nav li a .color-change {
height: 40px;
width: 40px;
background-color: #1f2933;
border-radius: 50%;
background-color: transparent;
}
*/
/* timeline */
.timeline-container {
position: relative;
}
.step-container {
margin: 0 25% 0 25%;
display: flex;
align-items: center;
height: 1500px;
}
/* footer */
footer {
display: flex;
justify-content: center;
align-items: center;
height: 1000px;
width: 100%;
background-color: black;
color: white;
}
<div class="bg"></div>
<div class="container">
<div class="container-inner">
<div class="filling-stem"></div>
<div class="header"></div>
<div class="timeline-container">
<div class="timeline-container-inner">
<div class="stem-background"></div>
<div class="stem-nav">
<ul id="my-awesome-nav">
<li data-index="0"><a href="#step-one">
</a></li>
<li data-index="1"><a href="#step-two">
</a></li>
<li data-index="2"><a href="#step-three">
</a></li>
<li data-index="3"><a href="#step-four">
</a></li>
<li data-index="4"><a href="#step-five">
</a></li>
</ul>
</div>
<div class="step-container">
<div class="step-container-inner">
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>End of the page</p>
</footer>
Footnote: on retina screens I've occasionally seen a faint line between the pseudo elements - I think it's where the positioning calculations come at part of a CSS pixel (which on a high res screen may mean a screen pixel is 'left behind'). It's probably necessary to make the pseudo elements 1 CSS pixel higher to overlap the next one to give a continuous effect to the background.
You can see my carousel on my Github page.
https://ionianthales.github.io/playground.github.io/
I set .carousel to position: absolute; which is ul tag.
and when I click the .right-btn, the slide effect works. But I use the dual monitor and when I expanded the web browser window horizontally over the full width of a monitor, I could see other images are shown in a slide too.
( To check this issue, I should decrease the size of web browser horizontally and then refresh the page and then expand the web browser horizontally )
I tried to fix it on my own. But It didn't work well.
also, I will include my codes here.
html code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="index.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Bowlby+One+SC|PT+Sans+Narrow&display=swap" rel="stylesheet">
</head>
<body>
<nav class="nav-container">
<div class="logo">
LogoShop
</div>
<ul class="menu-container">
<li class="menu-item">shirt</li>
<li class="menu-item">pants</li>
<li class="menu-item">uniform</li>
<li class="menu-item">contact</li>
</ul>
</nav>
<div class="carousel-container">
<div class="carousel-wrapper">
<ul class="carousel">
<li class="slide active"><img src="images/freestocks-org-_3Q3tsJ01nc-unsplash.jpg" alt=""></li>
<li class="slide"><img src="images/jonathan-francisca-HY-Nr7GQs3k-unsplash.jpg" alt=""></li>
<li class="slide"><img src="images/tamara-bellis-0C2qrwkR1dI-unsplash.jpg" alt=""></li>
</ul>
</div>
<button class="btn left-btn"><img src="images/left-arrow.svg" alt=""></button>
<button class="btn right-btn"><img src="images/right-arrow.svg" alt=""></button>
<div class="carousel-nav">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
css
html{
/* border: 1px red solid; */
height: 100%;
}
body{
height: 100%;
margin: 0;
}
nav{
/* border: 1px red solid; */
width: 70%;
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}
ul{
list-style: none;
}
.logo{
/* border: 1px blue solid; */
font-family: 'Anton', sans-serif;
font-size: 30px;
}
.menu-container{
/* border: 1px red solid; */
display: flex;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 25px;
padding: 0;
}
.menu-item{
/* border: 1px red solid; */
margin: 0 15px;
}
li a{
text-decoration: none;
color: black;
}
/* carousel */
.carousel-container{
position: relative;
/* border: 1px red solid; */
width: 100%;
height: 500px;
}
.carousel-wrapper{
/* border: 1px red solid; */
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.carousel{
/* border: 1px red solid; */
height: 100%;
margin: 0;
padding: 0;
list-style: none;
transition: 300ms transform ease-in;
}
.slide{
position: absolute;
/* border: 1px red solid; */
margin: 0;
width: 100%;
height: 100%;
}
.slide img{
width: 100%;
height: 100%;
object-fit: cover;
/* opacity: 0; */
}
.btn{
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 100px;
width: 40px;
background-color: transparent;
border: none;
cursor: pointer;
}
.left-btn{
left: 0;
}
.right-btn{
right: 0;
}
.carousel-nav{
position: absolute;
/* background-color: dodgerblue; */
width: 100%;
height: 50px;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.dot{
border-radius: 50%;
width: 20px;
height: 20px;
background-color: grey;
opacity: 0.5;
margin: 0 20px;
cursor: pointer;
}
.dot.active{
background-color: grey;
opacity: 1;
}
javascript
const carousel = document.querySelector('.carousel');
const slides = [...carousel.children];
const nextBtn = document.querySelector('.right-btn');
const previousBtn = document.querySelector('.left-btn');
const slideWidth = slides[0].getBoundingClientRect().width;
console.log(slideWidth);
function positionSlides(slides){
for (let i=0; i<slides.length; i++){
slides[i].style.left = slideWidth * i + 'px';
};
};
nextBtn.addEventListener('click', function(){
const currentSlide = carousel.querySelector('.active');
const nextSlide = currentSlide.nextElementSibling;
const position = nextSlide.style.left;
carousel.style.transform = `translateX(-${position})`;
currentSlide.classList.remove('active');
nextSlide.classList.add('active');
});
previousBtn.addEventListener('click', function(){
const currentSlide = carousel.querySelector('.active');
const previousSlide = currentSlide.previousElementSibling;
const position = previousSlide.style.left;
carousel.style.transform = `translateX(-${position})`;
currentSlide.classList.remove('active');
previousSlide.classList.add('active');
});
positionSlides(slides);
Thanks for reading my question. : )
You can modify the CSS rule as below:
.slide {
position: absolute;
border: 1px solid red;
margin: 0;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
or
.slide {
width: 100vw;
}
I have a header with a logo on the left, then a nav on the bottom. I'd like the nav to be horizontally centered with the logo, but bottom and padding-bottom isn't working. I changed the image to text and then I could do everything, but with the image it just doesn't work.
HTML
<header class="cf">
<div id="nav">
<img class="logo" src="HEADER/banner.png" width="300" height="100" alt="Next Gen"></img>
<div id="nav-list">
<ul id="list">
<li>HOME</li>
<li>GALLERY</li>
<li>ABOUT US</li>
<li>SPONSORS</li>
<li>ROSTER</li>
</ul>
</div>
</div>
</header>
<section class="section one">
<h2>One</h2>
</section>
<section class="section two">
<h2>Two</h2>
</section>
<section class="section three">
<h2>Three</h2>
</section>
<section class="section four">
<h2>Four</h2>
</section>
CSS
/* Body */
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
line-height: 1.4em;
color: #222;
font-family: 'Raleway', sans-serif;
}
/* Header */
/* Shrinking */
/* ClearFix */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
/* Header Styles */
header {
width: 100%;
height: 100px;
background: #02236a;
position: fixed;
z-index: 2;
box-shadow: 0 4px 4px rgba(0,0,0,0.1);
}
.small {
height: 80px;
}
.small .logo {
width: 240px;
height: 80px;
}
.nav {
width: 80%;
}
/* Transitions */
header, .logo {
-webkit-transition: all 1s;
transition: all 1s;
}
/* Navigation */
ul li {
float: left;
margin-left: 50px;
}
/* Miscellaneous */
a {
text-decoration: none;
}
li {
list-style: none;
}
/* Delete */
.section {
max-width: 100%;
height: 42em;
padding: 10px;
}
.section h2 {
color: #fff;
font-size: 6em;
font-weight: 200;
text-align: center;
padding: 2.5em 0;
}
.one {
background: #6bb6ff;
}
.two {
background: #1E90FF;
}
.three {
background: #8B4789;
}
.four {
background: #872657;
}
JavaScript
$(document).on("scroll", function () {
if ($(document).scrollTop() > 25) {
$(".cf").addClass("small");
} else {
$(".cf").removeClass("small");
}
});
Also, HERE is a demo. Let me know if you need any more information.
Add:
.logo {
float:left;
width: 200px;
}
JSFiddle Demo
You may want to float them or inline them in the same parent div. https://jsfiddle.net/awztqyso/1/
.logo {
float: left;
width: 300px;
height: 100px;
}
.nav-list {
float: left;
padding-top: 45px;
height: 100px;
width: 650px;
}
Notice that you have a lot of IDs but you only define styles under css classes.
try this
<div id="nav">
<div id="logo-box">
<img class="logo" src="HEADER/banner.png" width="300" height="100" alt="Next Gen"></img>
</div>
<div id="nav-list">
<ul id="list">
<li>HOME</li>
<li>GALLERY</li>
<li>ABOUT US</li>
<li>SPONSORS</li>
<li>ROSTER</li>
</ul>
</div>
</div>
and apply someting like this
#nav{height: 100px; width: 100%; }
#logo-box{width: 300px; margin-left: 20px; float:left;}
#nav-list{margin-left: 360px; width:600px;} /*margin-left should be more than the
image-box width + image-box margin-left at least*/
I was make a Jquery function to make the navigation bar stick to the top of the page when scrolled past the header.
To make it look smooth I had to add padding-top:110px to the content div and margin-bottom: -80px to the nav div. Now my links do not work.
Any guesses to why? And how can I fix this to get everything in order?
$(document).ready(function() {
var stickyNavTop = $('.nav').offset();
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop.top) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
html,
body {
height: 100%;
position: relative;
}
#body {
width: 80%;
min-height: 100%;
border: 1pxcenter;
margin: 0 auto;
}
#header {
width: 100%;
height: 40%;
border: 1px dotted blue;
margin: auto;
}
.nav {
margin-bottom: -80px;
border: 1px solid black;
width: 100%;
height: 80px;
z-index: 1;
position: -webkit-sticky;
}
a:visited {
color: black;
}
a:hover {
color: yellow;
}
a:active {
color: green;
}
#link {
height: 100%;
width: 20%;
display: inline-block;
float: left;
border: 1px dotted green;
text-decoration: none;
text-align: center;
padding: none;
}
.sticky {
border: 1px solid black;
position: fixed;
width: 80%;
top: 0;
z-index: 100;
border-top: 0;
}
.nav div p {
padding-top: 10px;
font-size: 1em;
}
#content {
border: 1px solid green;
position: relative;
padding-top: 110px;
padding-bottom: 100px;
display: block;
width: 100%;
max-height: 100%;
margin: none;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<h1>FrontYard Fairways</h1>
<h2>"Fairways at a fair price"</h2>
</header>
<nav class="nav">
<a href="FYFHome.html">
<div id="link">
<p>Home</p>
</div>
</a>
<a href="Services.html">
<div id="link">
<p>Services</p>
</div>
</a>
<a href="Customers.html">
<div id="link">
<p>Our Customers</p>
</div>
</a>
<a href="About.html">
<div id="link">
<p>About</p>
</div>
</a>
<a href="Contact.html">
<div id="link">
<p>Contact</p>
</div>
</a>
</nav>
<main id="content">
<div>
<p>
Blahblahablahahlahablhablahablhaab lahablhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab
lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha
blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla
hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl
ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha
blahahlahablhablahablh aablahablhablahablahablahablahBla hblahablahahlahablhablahablhaablahablhablahablahablahablah Blahblahablahahlahablhablahablhaab lahablhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb
lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah
Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl
ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab
ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha
blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha blahahlahablhablahablh aablahablhablahablahablahablahBla
hblahablahahlahablhablahablhaablahablhablahablahablahablah
</p>
</div>
</main>
You have overlapping (invisible) elements from your content that covers your links.
The following CSS:
#content{
padding-top: 110px;
}
forces your content to sit on top of your navigation links blocking them from being clicked.
There are several solutions to this. One way to confirm that this is the case is to remove
#content{
padding-top: 110px;
}
and replace it with
#content{
position:relative;
top:110px;
}
A better way to debug the issue is to open Chrome DevTools and inspecting the #content div to see where the box model overlaps your links and adjust accordingly.
I removed the negative margins applied to the main element, to your nav bar, and removed the height of your header. And also some little other things.
$(document).ready(function() {
var stickyNavTop = $('.nav').offset();
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop.top) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
html,
body {
height: 100%;
position: relative;
}
#body {
width: 80%;
min-height: 100%;
border: 1pxcenter;
margin: 0 auto;
}
#header {
width: 100%;
/* height: 40%; => that makes your header overlapping with your nav bar*/
border: 1px dotted blue;
margin: auto;
}
.nav {
border: 1px solid black;
width: 100%;
height: 80px;
z-index: 1;
/*
the support of position:sticky is bad: http://caniuse.com/#feat=css-sticky
position: -webkit-sticky;
*/
background: rgba( 255,255,255,0.9);
transition: width 0.5s;
}
a:visited {
color: black;
}
a:hover {
color: yellow;
}
a:active {
color: green;
}
#link {
height: 100%;
width: calc(20% - 1px );;
display: inline-block;
float: left;
border: 1px dotted green;
border-right-width: 0;
text-decoration: none;
text-align: center;
padding: none;
}
.sticky {
border: 1px solid black;
position: fixed;
width: 80%;
top: 0;
border-top: 0;
}
.sticky + #content{
margin-top:80px
}
.nav div p {
padding-top: 10px;
font-size: 1em;
}
#content {
border: 1px solid green;
padding-top:1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<h1>FrontYard Fairways</h1>
<h2>"Fairways at a fair price"</h2>
</header>
<nav class="nav">
<a href="FYFHome.html">
<div id="link">
<p>Home</p>
</div>
</a>
<a href="Services.html">
<div id="link">
<p>Services</p>
</div>
</a>
<a href="Customers.html">
<div id="link">
<p>Our Customers</p>
</div>
</a>
<a href="About.html">
<div id="link">
<p>About</p>
</div>
</a>
<a href="Contact.html">
<div id="link">
<p>Contact</p>
</div>
</a>
</nav>
<main id="content">
<div>
<p>
Blahblahablahahlahablhablahablhaab <br/><br/><br/><br/><br/><br/>
lhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab
lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha
blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla
hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl
ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha
blahahlahablhablahablh aablahablhablahablahablahablahBla hblahablahahlahablhablahablhaablahablhablahablahablahablah Blahblahablahahlahablhablahablhaab lahablhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb
lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah
Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl
ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab
ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha
blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha blahahlahablhablahablh aablahablhablahablahablahablahBla
hblahablahahlahablhablahablhaablahablhablahablahablahablah
</p>
</div>
</main>