I have a sticky header that utilizes the process found here (https://www.w3schools.com/howto/howto_js_sticky_header.asp). This works great. However, this does not account for variable heights of the hero element above the header. When you resize the window vertically, the sticky header breaks until you refresh the browser. What do I need to add to the script so that it detects the new height upon resizing?
Here is a codepen displaying my dilemma: https://codepen.io/JKDESIGN44/pen/VwYBqBV
Here is the javascript:
// STICKY HEADER
document.addEventListener('DOMContentLoaded', function () {
// When the event DOMContentLoaded occurs, it is safe to access the DOM
// When the user scrolls the page, execute myFunction
window.addEventListener('scroll', myFunctionForSticky);
// Get the navbar
var navbar = document.getElementById("c3Header");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position.
// Remove "sticky" when you leave the scroll position
function myFunctionForSticky() {
if (window.pageYOffset >= sticky) {
console.log("window.pageYOffset >= sticky");
} else {
console.log("Not window.pageYOffset >= sticky");
}
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
})
You don't need any JS to accomplish this. All you need are two lines of css to be able to accomplish the same, with way less complexity.
Take a look at this:
html, body, header{
margin: 0px;
padding: 0px;
}
.full-height-section{
height: 100vh;
width: 100%;
position: relative;
}
a{
text-decoration: none;
font-family: 'Montserrat', sans-serif;
color: inherit;
}
li{
list-style-type: none;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 2px;
transition: all 0.1s ease;
}
.bg-aqua{
background-color: #073038;
}
.text-white{
color: #FFFFFF;
transition: all 0.1s ease;
font-family:
}
.text-hover-blue:hover{
color: #7DD2EF;
transition: all 0.1s ease;
}
/* --------------HEADER---- */
/* ----HERO---- */
.hero{
height: 100vh;
width: 100vw;
min-height: 500px;
position: relative;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.hero-text{
font-size: 40px;
text-transform: uppercase;
z-index: 20;
}
.content-hero{
height: 25vh;
width: 100vw;
min-height: 500px;
position: relative;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.hero-bg{
display: block;
object-fit: cover;
z-index: -1;
position: absolute;
min-height: 500px;
}
.hero-logo-wrap{
align-self: center;
height: 30vw;
max-height: 50vh;
min-height: 200px;
z-index: 10;
}
.hero-logo{
height: 100%;
}
.down-arrow-wrapper{
height: 50px;
width: 50px;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 40px;
border-radius: 999px;
background-color: rgba(125,210,239,0.0);
transition: all 0.5s ease;
z-index: 10;
}
.down-arrow-wrapper:hover{
background-color: rgba(125,210,239,1.0);
transition: all 0.5s ease;
transform: scale(1.2)
}
.down-arrow-rel-wrapper{
height: 50px;
width: 50px;
position: relative;
}
.down-arrow{
height: 20px;
width: 20px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 8px;
transform: rotate(45deg);
border-right: solid #fff 3px;
border-bottom: solid #fff 3px;
}
.img-overlay{
height: 100%;
width: 100%;
position: absolute;
margin: auto;
top: 0;
mix-blend-mode: overlay;
background: rgb(3,31,36);
background: -moz-linear-gradient(148deg, rgba(3,31,36,1) 0%, rgba(125,210,239,1) 100%);
background: -webkit-linear-gradient(148deg, rgba(3,31,36,1) 0%, rgba(125,210,239,1) 100%);
background: linear-gradient(148deg, rgba(3,31,36,1) 0%, rgba(125,210,239,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#031f24",endColorstr="#7dd2ef",GradientType=1);
}
/* ----HERO END---- */
.header{
height: 150px;
width: 100%;
z-index: 100;
display: flex;
justify-content: center;
position: sticky;
top: 0;
}
.content-header{
width: 100%;
z-index: 100;
display: flex;
flex-direction: column;
}
.sticky{
position: fixed;
top: 0;
width: 100%;
}
.sticky + .page-wrapper{
padding-top: 150px;
}
.nav-flexbox{
height: 150px;
width: 80%;
max-width: 1500px;
min-width: 1000px;
position: relative;
/*
position: absolute;
margin: auto;
left: 0;
right: 0;
*/
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.nav-left{
display: flex;
flex-direction: row;
justify-content: space-between;
text-transform: uppercase;
letter-spacing: 2px;
width: 100%;
}
.nav-center{
width: 70%;
display: flex;
justify-content: center;
align-items: center;
}
.header-logo{
height: 80px;
z-index: 999;
}
.header-logo-link{
transition: all 0.5s ease;
}
.header-logo-link:hover{
transform: scale(1.2);
transition: all 0.5s ease;
}
.nav-right{
display: flex;
flex-direction: row;
justify-content: space-between;
text-transform: uppercase;
letter-spacing: 2px;
width: 100%;
}
.tab-nav-center{
display: none;
}
.tab-nav-right{
display: none;
}
.content-sub-nav{
height: 50px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
}
.sub-nav-arrow {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 30px solid #031F24;
position: absolute;
margin: auto;
bottom: 0;
left: 10px;
}
/* ---------------HEADER END---- */
.content-section{
height: calc(100vh - 150px);
display: flex;
justify-content: center;
align-items: center;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">
</head>
<header>
<!----------------
HERO
------------------>
<div class="hero full-height-section">
<div class="hero-logo-wrap">
<img src="http://c3.abettermancc.com/wp-content/uploads/2019/09/Primary-Logo_Vertical.png" class="hero-logo">
</div>
<a href="#c3Header">
<div class="down-arrow-wrapper">
<div class="down-arrow">
</div>
</div>
</a>
<img src="http://c3.abettermancc.com/wp-content/uploads/2019/09/audience-black-and-white-black-and-white-2014773.jpg" class="hero-bg full-height-section">
<!--------------Overlay -->
<div class="bg-aqua" style="width: 100%; height: 100%; position: absolute;
margin: auto; top: 0; opacity: 0.7; z-index: 9;">
</div>
<div class="img-overlay" style="z-index: 9;">
</div>
<!--------------Overlay END -->
</div>
<!----------------
HERO END
------------------>
</header>
<!----------------
NAVIGATION
------------------>
<nav class="header bg-aqua text-white" id="c3Header">
<div class="nav-flexbox">
<div class="nav-left">
<li>who we are</li>
<li>ministries</li>
<li>sermons</li>
</div>
<div class="nav-center">
<a href="#" class="header-logo-link">
<img src="http://c3.abettermancc.com/wp-content/uploads/2019/09/Primary-Icon-01.png" class="header-logo">
</a>
</div>
<div class="nav-right">
<li>get connected</li>
<li>events</li>
<li>give online</li>
</div>
</div>
</nav>
<!----------------
NAVIGATION END
------------------>
<div class="content-section" style="background-color: #888888;">
<p>SECTION 1</p>
</div>
<div class="content-section" style="background-color: #999999;">
<p>SECTION 2</p>
</div>
<div class="content-section" style="background-color: #888888;">
<p>SECTION 3</p>
</div>
The trick was adding:
position: sticky;
top: 0;
To the .header class. The top:0 states that this class content will only get sticky when it reaches 0 offset from the top (meaning, just at the top of the page).
Related
Im trying to hide the bottom of the girl image when the 3D background is triggered. I tried to add the overflow: hidden; to the test-imgplace class and it doesn't look right.
Is there a better way to fix it?
See what I did on JSFIDDLE
.card .image {
height: 275px;
width: 183px;
background-size: cover;
background-position: center center;
}
.imgtest {
position: absolute;
z-index: 1;
text-align: center;
top: 0;
left: 100px;
border: solid 1px;
pointer-events: none;
}
.test-imgplace {
margin: 0 auto;
position: relative;
overflow: hidden;
}
.card .text {
height: 20%;
margin: 0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-size: 50px;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.card {
width: 183px;
height: 275px;
margin: auto auto;
background: #383030;
border-radius: 5px;
overflow: hidden;
text-align: center;
}
.card-content {
transform-style: preserve-3d;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.hover-in {
transition: .3s ease-out;
}
.hover-out {
transition: .3s ease-in;
}
.card-hover {
margin: 0;
}
<div class="test-imgplace">
<img src="https://christianluneborg.com/imgs/test-woman.png" class="imgtest">
<div class="card-hover">
<div class="card">
<div class="card-content">
<div class="image" style="background-image: url(https://christianluneborg.com/imgs/test-woman-bg.png);"></div>
</div>
</div>
</div>
</div>
I have a checkbox, that should trigger the menu to slide in from left side of the screen.The problem is when I got the menu hidden on the left, i can't make the function work. When I click the checkbox icon, it's animation works but nothing else happens. The menu is still hidden and I get no errors.
Here is a snippet of my code:
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
* {
margin: 0;
padding: 0;
font-size: 16px;
font-family: Open Sans;
line-height: 1.6;
display: block;
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu" onclick="showMenuSlider()">
<label for="menu" class="icon"><input type="checkbox" id="menu">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
The button is outside the header, because i need it to be on top of the dark opacity behind the menu. In the future I will make a nice white rounded background to it, so it won't invisible.
Of course if you know better way to do it, be my guest. I'm struggling with this for a while...
The problem is that you add the onclick handler on the header-downbar-menu and not on the checkbox. So when clicking the checkbox you also click on header-downbar-menu so the event is triggered twice. So the class is toggled twice ( added/removed in the same time...almost :) )
Add the click event on the input. ( you could use an onchange event instead of the click event to check the state checked or unchecked , that might help you )
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu">
<label for="menu" class="icon"><input type="checkbox" id="menu" onclick="showMenuSlider()">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
I've created a full page video background homescreen for a website and am wanting to add the next section "About" below the homepage however, the about-section is stuck to the top of the site and I can't figure out why. I'd like the video background to remain fixed so it covers the entire site, I also have a sidebar that pops in with menu options so I believe I'm going wrong somewhere with the positioning of it all.
#import url('https://fonts.googleapis.com/css2?family=Oswald:wght#300;400;500;700&family=Oxygen:wght#300;400;700&family=Space+Grotesk:wght#300;400;500;700');
#import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght#300;400;500;700');
:root {
--overlay-color: rgb(105, 104, 104);
--font-secondary: 'Oxygen', sans-serif;
--font-primary: 'Space Grotesk', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Oswald', sans-serif;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
color: #fff;
z-index: 2;
transition: 0.5s;
}
.showcase.active {
right: 300px;
}
.showcase header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-container {
cursor: pointer;
position: relative;
left: -40px;
}
.logo {
width: 100px;
cursor: pointer;
}
.toggle {
position: relative;
width: 60px;
height: 60px;
background: url('images/menu.png');
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
right: -40px;
}
.toggle.active {
background: url('images/close.png');
filter: invert(1);
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
}
.showcase video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--overlay-color);
mix-blend-mode: overlay;
}
.text {
position: relative;
z-index: 10;
margin: 0 auto;
}
.text h2 {
font-size: 5.5em;
font-weight: 700;
line-height: 1.1em;
text-transform: uppercase;
text-align: center;
z-index: 10;
}
.text p {
font-size: 1.2em;
margin-top: 30px;
font-weight: 300;
max-width: 700px;
font-family: var(--font-primary);
text-align: center;
line-height: 1.5em;
width: 490px;
}
.contact-container {
position: fixed;
bottom: 30px;
text-transform: uppercase;
color: #fff;
z-index: 10;
left: 75px;
font-size: 1.03em;
letter-spacing: 2px;
}
.contact-container a {
font-family: var(--font-primary);
text-decoration: none;
color: #fff;
}
.cool-link::after {
content: '';
display: block;
width: 0;
margin-top: 2px;
height: 2px;
background: #fff;
transition: width .3s;
}
.cool-link:hover::after {
width: 100%;
transition: width .3s;
}
/* SOCIAL ICONS */
.social {
position: fixed;
bottom: 18px;
right: 40px;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.social li {
list-style: none;
}
.social-icon {
display: inline-block;
transform: scale(0.5);
margin-right: 25px;
transition: 0.5s;
font-size: 40px;
cursor: pointer;
}
.social-icon.active {
color: black;
}
.social-icon:hover {
transform: scale(0.5) translateY(-15px)
}
.menu {
position: absolute;
top: 0;
right: 0;
width: 300px;
/* background-color: white;
z-index: 100; */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.menu ul {
position: relative;
list-style: none;
text-align: center;
}
.menu ul li a {
text-decoration: none;
font-size: 25px;
line-height: 2em;
color: #111;
}
.menu ul li a:hover {
color: var(--overlay-color);
}
/* HOME IMAGES */
.images {
position: absolute;
display: flex;
flex-direction: column;
}
.image1 {
position: relative;
top: 210px;
left: 220px;
}
.image1 img {
width: 170px;
opacity: .9;
}
.image2 {
position: relative;
left: 30px;
top: 235px;
}
.image2 img {
width: 300px;
opacity: .9;
}
.image3 {
position: relative;
left: 778px;
top: -255px;
}
.image3 img {
width: 300px;
height: 170px;
opacity: .9;
}
.image4 {
position: relative;
left: 995px;
top: -278px;
}
.image4 img {
width: 170px;
opacity: .9;
height: 230px;
}
/* ABOUT SECTION */
#about {
padding: 40px;
text-align: center;
}
#about p {
font-size: 1.2rem;
max-width: 600px;
margin: auto;
}
#about h2 {
margin: 30px 0;
color: var(--primary-color);
}
.social a {
margin: 0 5px;
}
/* MEDIA QUERIES */
#media(max-width: 798px) {
.showcase,
.showcase header {
padding: 40px;
}
.text h2 {
font-size: 3em;
}
}
<script src="https://kit.fontawesome.com/914efae9b6.js" crossorigin="anonymous"></script>
<section class="showcase">
<header>
<div class="logo-container">
<img class="logo" src="/images/logo.png" alt="">
</div>
<div class="toggle"></div>
</header>
<div class="overlay"></div>
<video src="/images/black.mp4" muted loop autoplay></video>
<div class="text">
<h2>Back Your</h2>
<h2>creators</h2>
</div>
<div class="images">
<div class="image1">
<img src="/images/cardmapr-E4s8t8EfDu4-unsplash.jpg" alt="">
</div>
<div class="image2">
<img src="/images/aronpw-0caikkln3Ag-unsplash.jpg" alt="">
</div>
<div class="image3">
<img src="/images/image.png" alt="">
</div>
<div class="image4">
<img src="/images/joshua-rawson-harris-oEEdL2vZKJg-unsplash.jpg" alt="">
</div>
</div>
<ul class="social">
<li class="social-icon"><i class="fab fa-facebook-f"></i></li>
<li class="social-icon"><i class="fab fa-instagram"></i></li>
<li class="social-icon"><i class="fab fa-tiktok"></i></li>
</ul>
<div class="contact-container">
<a class="cool-link" href="#">Contact</a>
</div>
<!-- Scroll arrow -->
<a class="ca3-scroll-down-link ca3-scroll-down-arrow" data-ca3_iconfont="ETmodules" data-ca3_icon=""></a>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Product</li>
<li>Contact</li>
</ul>
</div>
<section id="about">
<h1>About</h1>
<p>
This is a landing page with a full screen video background. This section will be for the about page
</p>
<h2>Follow Me On Social Media</h2>
<div class="social">
<i class="fab fa-twitter fa-3x"></i>
<i class="fab fa-facebook fa-3x"></i>
<i class="fab fa-github fa-3x"></i>
<i class="fab fa-linkedin fa-3x"></i>
</div>
</section>
Thanks in advance if anyone can point out where I'm going wrong!
you can do .showcase{ position: relative} so it will look like this:
.showcase {
position: relative
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
color: #fff;
z-index: 2;
transition: 0.5s;
}
it will fix it, if you must have show case as absolute, so you can do
#about {
position:absolute;
top:100vh;
width:100vw;
}
I don't know how to explain it you could understand it well. I have a left navigation and container on rest of website in one line. Navigation has 88px width when .right-column-wrapper 100% of rest available space. In the .right-column-wrapper I have a left and right column in line, each one has 50%. When I add position: fixed to the .right-column, .right-column takes 50% of browser width but not the 50% of .right-column-wrapper
HTML Code:
<div class="page-wrapper">
<!-- Left side navigation -->
<div class="nav-bar-left">
<a href="" class="w-nav-brand">
<img src="https://i.imgur.com/0f8pGKD.png" alt="">
</a>
<nav role="navigation" class="nav-menu-left">
who
what
why
contact
</nav>
<div class="nav-left-social-icons">
<a href="https://twitter.com" target="_blank" class="social-icon-link">
<img src="https://assets.website-files.com/5b17159f88941cfc367e81a3/5b1715a088941c0f047e81f3_twitter-icon.svg" alt="">
</a>
<a href="https://twitter.com" target="_blank" class="social-icon-link">
<img src="https://assets.website-files.com/5b17159f88941cfc367e81a3/5b1715a088941c314a7e81d9_instagram-icon.svg" alt="">
</a>
<a href="https://twitter.com" target="_blank" class="social-icon-link">
<img src="https://assets.website-files.com/5b17159f88941cfc367e81a3/5b1715a088941c861b7e82d0_facebook-icon.svg" alt="">
</a>
</div>
</div>
<!-- Right components -->
<div class="right-column-wrapper">
<div class="column left-column">
<div class="left-column-top">
<div class="split-content">
<h1 class="split-content-headline">the story so far</h1>
<p class="content-v2">
Scotty Huss is an ultimate leader in helping you believing yourself to success. While Breaking records at a young age, yet teaching others to dulpicate his success, Scotty is an aspiring entrepreneur, investor, & mentor.
<br> <br>
Mr. Huss is most known for being one of the youngest top earners in the network marketing industry.
He has already accomplished more then most people accomplish in a lifetime. He helps people expand their
lives financially by providing different services that encourage individuals to multiply their money, add
belief to their lives, and practice personal development characteristics + growth techniques that help people
learn the law of attaction.
<br> <br>
Scotty serves as a great example to his team on what can take place when someone truly commits.
Scotty travels the world to help others become financially free. He currently resides in Florida
but is always on the move with his organization. His mission is to impact the lives of a billion
people around the world in a positive way & teach those who are willling to achieve greatness
learning specific skillsets.
</p>
<div class="launching-beyond-wrapper">
<div class="video-thumbnail-wrap">
</div>
</div>
</div>
</div>
<div class="left-column-footer">
</div>
</div>
<div class="column right-column who-site-right-column"></div>
</div>
</div>
</div>
CS code
.page-wrapper {
width: 100%;
height: 100%;
display: flex;
}
.page-wrapper .nav-bar-left {
width: 88px;
height: 100%;
background: #fff;
border-right: 1px solid #cfcfcf;
float: left;
position: relative;
}
.page-wrapper .nav-bar-left .w-nav-brand {
display: flex;
width: 88px;
height: 88px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.page-wrapper .nav-bar-left .nav-menu-left {
font-family: "Oswald";
position: absolute;
left: -196px;
top: 328px;
width: 480px;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
text-align: right;
}
.page-wrapper .nav-bar-left .nav-menu-left .nav-link {
position: static;
display: inline;
padding: 12px 14px;
opacity: 0.5;
-webkit-transition: opacity 400ms ease;
transition: opacity 400ms ease;
font-family: Oswald, sans-serif;
color: #111;
font-size: 12px;
line-height: 32px;
font-weight: 400;
text-decoration: none;
opacity: .5;
letter-spacing: 2px;
text-transform: uppercase;
}
.page-wrapper .nav-bar-left .nav-menu-left .nav-link.active {
opacity: 1;
}
.page-wrapper .nav-bar-left .nav-left-social-icons {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-top: 8px;
padding-bottom: 20px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.page-wrapper .nav-bar-left .nav-left-social-icons .social-icon-link {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 8px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
opacity: 0.4;
-webkit-transition: opacity 400ms ease;
transition: opacity 400ms ease;
}
.page-wrapper .nav-bar-left .nav-left-social-icons .social-icon-link img {
max-width: 100%;
vertical-align: middle;
display: inline-block;
}
.page-wrapper .right-column-wrapper {
width: 100%;
height: 100%;
display: flex;
}
.page-wrapper .right-column-wrapper .column {
width: 50%;
height: 100%;
}
.page-wrapper .right-column-wrapper .column.left-column::-webkit-scrollbar {
width: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
.page-wrapper .right-column-wrapper .column.right-column {
background: url(https://i.imgur.com/4Mmj0E8.jpg);
background-size: cover;
background-position: center;
}
.page-wrapper .right-column-wrapper .column .left-column-top {
width: 100%;
background: #fff;
height: fit-content;
padding-bottom: 100px;
border-bottom: 1px solid #cfcfcf;
}
.page-wrapper .right-column-wrapper .column .left-column-footer {
width: 100%;
height: 400px;
background: red;
}
.page-wrapper .right-column-wrapper .column .split-content {
padding: 104px 6% 120px;
height: 100%;
margin: auto;
}
.page-wrapper .right-column-wrapper .column .split-content .split-content-headline {
margin-top: 0px;
margin-bottom: 24px;
font-family: Oswald, sans-serif;
font-size: 44px;
line-height: 52px;
font-weight: 500;
text-transform: uppercase;
}
.page-wrapper .right-column-wrapper .column .split-content .content-v2 {
font-family: "Karla";
color: #777;
margin-bottom: 24px;
font-size: 15px;
line-height: 24px;
}
.page-wrapper .right-column-wrapper .column .split-content .content-v2::first-letter {
font-family: Oswald, sans-serif;
color: #faaf52;
font-size: 46px;
float: left;
margin: 0.7rem 0rem;
padding-right: 7px;
}
.page-wrapper .right-column-wrapper .column .split-content .launching-beyond-wrapper {
background: #fff;
border-top: 1px solid #cfcfcf;
border-bottoM: 1px solid #cfcfcf;
width: 100%;
height: 160px;
position: relative;
}
.page-wrapper .right-column-wrapper .column .split-content .launching-beyond-wrapper .video-thumbnail-wrap {
width: 136px;
height: 92px;
background: url(https://i.imgur.com/1LPdxEM.jpg);
background-size: cover;
background-position: center;
position: absolute;
left: 0;
top: 0;
bottoM: 0;
margin: auto;
}
.page-wrapper .right-column-wrapper .column .split-content .launching-beyond-wrapper .video-thumbnail-wrap:before {
content: '';
width: 31px;
height: 31px;
bottom: 0;
right: 0;
background-color: #faaf52;
background-image: url('https://assets.website-files.com/5b17159f88941cfc367e81a3/5b1715a088941c88717e824f_play-icon.svg');
background-repeat: no-repeat;
position: absolute;
}
You can set height and width of background image from right column and use calc to calculate width of left column
.page-wrapper .right-column-wrapper .column.right-column {
position: fixed;
top: 0;
right: 0;
width: 300px;
height: 500px;
...
}
.page-wrapper .right-column-wrapper .left-column {
width: calc(100% - 300px);
}
Here is the sample
I am trying to animate width on my fixed element using calc simply because I can't make it relative. It's one of those nav bars that hide when scrolling down and appear back on the top when scrolling up.
For some reason the animation isn't smooth and the 'Settings' div jumps between the transitions. The weird or maybe not that weird bit is that it works fine in Chrome but not in IE...
I know having a div with a calculated width isn't the best idea here but I simply can't make it relative due to its constant disappearance on scroll. I have spent hours trying to figure it out for nothing. Try running it in IE and compare it with Chrome.
const sideMenu = document.querySelector('.side-menu');
sideMenu.addEventListener('click', function() {
sideMenu.classList.toggle('collapse');
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.side-menu {
width: 160px;
height: 100vh;
background-color: #ccc;
transition: ease-in-out 0.3s;
float: left;
cursor: pointer;
}
.side-menu.collapse {
width: 50px;
}
.side-menu.collapse + .right-panel > .top {
width: calc(100% - 50px);
}
.right-panel {
position: relative;
background-color: yellow;
display: flex;
flex-direction: column;
}
.top {
position: fixed;
height: 70px;
width: calc(100% - 160px);
background-color: #c3c3c3;
transition: ease-in-out 0.3s;
display: flex;
align-items: center;
}
.banner {
width: calc(100% - 20vw);
}
.settings {
width: 20vw;
display: flex;
justify-content: center;
}
<div class="side-menu">Click</div>
<div class="right-panel">
<div class="top">
<div class="banner">Banner</div>
<div class="settings">Settings</div>
</div>
</div>
I'm not certain why IE has those stuttering issues, but you can simplify your layout to not use calc, which appears to solve the problem.
As you're using fixed and want to cover the full width of the page, instead of the calc() you can use left and right.
E.g. In .top we change calc(100% - 160px); this to
right: 0;
left: 160px;
And in .side-menu.collapse + .right-panel > .top
width: calc(100% - 50px); becomes left: 50px;
const sideMenu = document.querySelector('.side-menu');
sideMenu.addEventListener('click', function() {
sideMenu.classList.toggle('collapse');
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.side-menu {
width: 160px;
height: 100vh;
background-color: #ccc;
transition: ease-in-out 0.3s;
float: left;
cursor: pointer;
}
.side-menu.collapse {
width: 50px;
}
.side-menu.collapse + .right-panel > .top {
left: 50px;
}
.right-panel {
position: relative;
background-color: yellow;
display: flex;
flex-direction: column;
}
.top {
position: fixed;
height: 70px;
right: 0;
left: 160px;
background-color: #c3c3c3;
transition: ease-in-out 0.3s;
display: flex;
align-items: center;
}
.banner {
width: calc(100% - 20vw);
}
.settings {
width: 20vw;
display: flex;
justify-content: center;
}
<div class="side-menu">Click</div>
<div class="right-panel">
<div class="top">
<div class="banner">Banner</div>
<div class="settings">Settings</div>
</div>
</div>