I need to add a div preloader in the center of an article element!
I don't want this pre-loader to expand to the entire body, as the side menu is static!
Therefore, I want it to occupy only the article element and overlay the section element until the data in this section is ready to be displayed after a request.
I created an example, with a setTimout simulating a pre-loader display time.
However, in the example, the preloader is not overlapping the section, but pushing it down.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Template</title>
<meta name="description" content="Description of site" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="content">
<header id="header">
</header>
<main id="main">
<nav id="nav-left">
</nav>
<article id="article">
<div id="breadcrumb">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Dashboard</li>
</ol>
</nav>
</div>
<div id="preloader" class="page-loader-wrapper">
<div class="loader">
<div class="loader-wheel"></div>
<div class="loader-text"></div>
</div>
</div>
<section id="section"></section>
<footer id="footer">Footer</footer>
</article>
</main>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
let loader = document.getElementById('preloader');
setTimeout(function(){ loader.style.display = 'none'; }, 1500);
</script>
</body>
</html>
<style>
body {
height: 100vh;
width: 100%;
overflow: hidden;
}
#content {
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
}
#header {
border-bottom: 1px solid transparent;
background-color: #404bb3;
color: #fff;
}
#media (min-width: 768px) {
#header {
height: 3.5rem;
}
}
#media (min-width: 768px) {
#main {
height: calc(100vh - 3.5rem);
}
}
#main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: calc(100vh - 3rem);
z-index: 0;
}
#media (min-width: 768px) {
#nav-left {
position: relative;
}
}
#nav-left {
background-color: #fff;
border-right: 1px solid #000;
z-index: 9000;
min-width: 15.625rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#media (min-width: 768px) {
#article {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
width: calc(100vw - 15.625rem);
}
}
#article {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#breadcrumb {
border-bottom: 1px solid #000;
padding: 0 15px;
-webkit-box-flex: 0;
-ms-flex: 0 1 3rem;
flex: 0 1 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.breadcrumb {
background-color: transparent;
margin: 0;
padding: 0;
}
/* loading */
.page-loader-wrapper {
align-items: center;
background-color: black;
display: flex;
height: 87%;
justify-content: center;
margin: 0;
opacity: 0.5;
}
.loader {
width: 60px;
}
.loader-wheel {
animation: spin 1s infinite linear;
border: 2px solid rgb(212 216 245);
border-left: 4px solid #404bb3;
border-radius: 50%;
height: 50px;
margin-bottom: 10px;
width: 50px;
}
.loader-text {
color: #404bb3;
font-family: arial, sans-serif;
}
#section {
background-color: #9932cc;
border-bottom: 1px solid #000;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 15px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
}
#media (min-width: 768px) {
#footer {
padding: 0 1rem;
-webkit-box-pack: justify;
-ms- flex-pack: justify;
justify-content: space-between;
}
}
#footer {
font-size: 80%;
-webkit-box-flex: 0;
-ms-flex: 0 1 3rem;
flex: 0 1 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
</style>
For this to work as you expect, I would do the following:
Make the section position: relative;
Remove the preloader from the DOM, so it's only added when needed
Move the prelaoder inside of the section, so it can be positioned relative to that (when it appears)
Modify preloader CSS, so its position: absolute;
// extract preloader from DOM
const preloader = `
<div id="preloader" class="page-loader-wrapper">
<div class="loader">
<div class="loader-wheel"></div>
<div class="loader-text"></div>
</div>
</div>
`
$('#addPreloader').on('click', function() {
// add preloader
$('#section').append(preloader);
// remove preloader after 1500 ms
setTimeout(function() {
$('#preloader').remove()
}, 1500);
})
body {
height: 100vh;
width: 100%;
overflow: hidden;
}
#content {
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
}
#header {
border-bottom: 1px solid transparent;
background-color: #404bb3;
color: #fff;
}
#media (min-width: 768px) {
#header {
height: 3.5rem;
}
}
#media (min-width: 768px) {
#main {
height: calc(100vh - 3.5rem);
}
}
#main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: calc(100vh - 3rem);
z-index: 0;
}
#media (min-width: 768px) {
#nav-left {
position: relative;
}
}
#nav-left {
background-color: #fff;
border-right: 1px solid #000;
z-index: 9000;
min-width: 15.625rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#media (min-width: 768px) {
#article {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
width: calc(100vw - 15.625rem);
}
}
#article {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#breadcrumb {
border-bottom: 1px solid #000;
padding: 0 15px;
-webkit-box-flex: 0;
-ms-flex: 0 1 3rem;
flex: 0 1 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.breadcrumb {
background-color: transparent;
margin: 0;
padding: 0;
}
/* loading */
.page-loader-wrapper {
align-items: center;
background-color: black;
display: flex;
justify-content: center;
margin: 0;
opacity: 0.5;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.loader {
width: 60px;
}
.loader-wheel {
animation: spin 1s infinite linear;
border: 2px solid rgb(212 216 245);
border-left: 4px solid #404bb3;
border-radius: 50%;
height: 50px;
margin-bottom: 10px;
width: 50px;
}
.loader-text {
color: #404bb3;
font-family: arial, sans-serif;
}
#section {
background-color: #9932cc;
border-bottom: 1px solid #000;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 15px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
#media (min-width: 768px) {
#footer {
padding: 0 1rem;
-webkit-box-pack: justify;
-ms- flex-pack: justify;
justify-content: space-between;
}
}
#footer {
font-size: 80%;
-webkit-box-flex: 0;
-ms-flex: 0 1 3rem;
flex: 0 1 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="content">
<header id="header">
</header>
<main id="main">
<nav id="nav-left">
</nav>
<article id="article">
<div id="breadcrumb">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Dashboard</li>
</ol>
</nav>
</div>
<section id="section"></section>
<footer id="footer">
Footer
<button id="addPreloader">ADD PRELOADER</button>
</footer>
</article>
</main>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Related
I want to implement scrolling animations like below in React & Nextjs (and I am using TailwindCSS)
Not sure how to explain this effect (scroll -> stack -> appear), but the user scroll down, and the next part shows up in a fixed place. Then, once it scrolls to a certain point, it starts moving.
I assume it is a combination of the z-index but not sure how to implement it.
Here is the above site I found and want to know how to achieve this kind of scrolling effect.
https://www.abstract.com/
It is done with the help of position: sticky; at block two class="s-heading-first".
.section.s-heading-first {
position: -webkit-sticky;
position: sticky;
bottom: 0%;
display: flex;
padding-top: 27rem;
padding-bottom: 1rem;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: end;
justify-content: flex-end;
}
I think that can help you.
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
section {
display: block;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
background-color: #fff;
font-family: "Gt america standard", sans-serif;
color: #000;
font-size: 1rem;
line-height: 1.5;
}
h2 {
font-weight: bold;
margin-bottom: 10px;
font-size: 32px;
line-height: 36px;
margin-top: 20px;
}
p {
margin-top: 0;
margin-bottom: 10px;
}
h2 {
margin-top: 0px;
margin-bottom: 0rem;
font-size: 32px;
line-height: 30px;
font-weight: 700;
}
.section {
position: relative;
padding-right: 2.5rem;
padding-left: 2.5rem;
}
.section.s-hero {
z-index: 10;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
min-height: 100vh;
margin-top: 0rem;
padding-top: 10rem;
padding-bottom: 7.5rem;
-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;
background-color: #000;
-webkit-transform: translate3d(0px, 0px, 10px);
transform: translate3d(0px, 0px, 10px);
color: #fff;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.section.s-radius {
padding-top: 0rem;
padding-bottom: 15rem;
-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;
border-bottom-left-radius: 5rem;
border-bottom-right-radius: 5rem;
}
.section.s-radius.sr-large {
padding-top: 4rem;
}
.section.s-heading {
position: -webkit-sticky;
position: sticky;
bottom: 0%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-top: 22.5rem;
padding-bottom: 1rem;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.section.s-heading-first {
position: -webkit-sticky;
position: sticky;
bottom: 0%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-top: 27rem;
padding-bottom: 1rem;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.flex-grid {
position: relative;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col {
position: relative;
padding-right: 1rem;
padding-bottom: 2rem;
padding-left: 1rem;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.heading-xl {
margin-top: 0px;
font-size: 5rem;
line-height: 0.95;
font-weight: 400;
letter-spacing: -0.05em;
}
.col-wrapper {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-right: -1rem;
margin-bottom: -2rem;
margin-left: -1rem;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col-12-d {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
.text-center {
text-align: center;
}
.section-radius {
position: absolute;
left: 0%;
top: 100%;
right: 0%;
z-index: 1;
width: 100%;
height: 5rem;
margin-top: -1px;
border-bottom-left-radius: 5rem;
border-bottom-right-radius: 5rem;
background-color: #000;
}
.main {
position: relative;
height: 100%;
}
.background-white {
background-color: #fff;
}
.background-blurple {
background-color: #dadbf1;
}
.container-max {
position: relative;
width: 100%;
max-width: 100rem;
margin-right: auto;
margin-left: auto;
}
.heading-lines {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
}
.heading-line {
position: relative;
bottom: 0.7rem;
height: 4.9rem;
border-bottom: 2px solid #b3b8ee;
}
.heading-line.hl-first {
border-top: 2px solid #b3b8ee;
}
.z-9 {
position: relative;
z-index: 9;
-webkit-transform: translate3d(0px, 0px, 9px);
transform: translate3d(0px, 0px, 9px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.z-7 {
position: relative;
z-index: 7;
-webkit-transform: translate3d(0px, 0px, 7px);
transform: translate3d(0px, 0px, 7px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.section-head-bg-extension {
position: absolute;
left: 0%;
top: -5rem;
right: auto;
bottom: auto;
width: 100%;
height: 5rem;
}
.c-body {
font-size: 16px;
line-height: 1.4;
letter-spacing: -0.02em;
}
#media screen and (min-width: 1280px) {
.container-max {
overflow: visible;
}
}
#media screen and (min-width: 1440px) {
.section {
padding-right: 5rem;
padding-left: 5rem;
}
}
#media screen and (min-width: 1920px) {
body {
font-size: 1.25rem;
line-height: 1.4;
}
.heading-xl {
font-size: 6.5rem;
line-height: 0.98;
}
.heading-line {
bottom: 0.8rem;
height: 6.9rem;
}
.c-body {
font-size: 20px;
}
}
#media screen and (max-width: 991px) {
.section.s-hero {
height: 100%;
padding-right: 2.5rem;
padding-left: 2.5rem;
}
.section.s-heading {
padding-top: 30vh;
}
.section.s-heading-first {
padding-top: 30vh;
}
.heading-xl {
font-size: 4rem;
line-height: 1;
}
.container-max {
max-width: none;
}
}
#media screen and (max-width: 767px) {
.section {
padding-right: 2rem;
padding-left: 2rem;
}
.section.s-hero {
padding-right: 2rem;
padding-left: 2rem;
}
.section.s-hero.s-hero-versions {
padding-bottom: 0rem;
}
.section.s-radius {
padding-bottom: 7.5rem;
border-bottom-left-radius: 2.5rem;
border-bottom-right-radius: 2.5rem;
}
.section.s-heading {
padding-top: 7.5rem;
}
.section.s-heading-first {
padding-top: 15vh;
}
.heading-xl {
font-size: 3rem;
line-height: 1;
font-weight: 500;
}
.hide-mobile-wide {
display: none;
}
.section-radius {
height: 2.5rem;
border-bottom-left-radius: 2.5rem;
border-bottom-right-radius: 2.5rem;
}
.z-9 {
-webkit-transform: translate3d(0px, 0px, 9px);
transform: translate3d(0px, 0px, 9px);
}
.z-7 {
-webkit-transform: translate3d(0px, 0px, 7px);
transform: translate3d(0px, 0px, 7px);
}
.section-head-bg-extension {
top: -2.5rem;
height: 2.5rem;
}
}
#media screen and (max-width: 479px) {
.section {
padding-right: 1.5rem;
padding-left: 1.5rem;
}
.section.s-hero {
padding-right: 1.5rem;
padding-left: 1.5rem;
}
.heading-xl {
font-size: 2.75rem;
}
}
<body class="c-body">
<div class="page">
<div id="content" class="main">
<section class="section s-hero s-hero-versions">
<div class="section-radius"></div>
<div class="container-max">
container-max
</div>
</section>
<div class="section s-heading-first background-blurple z-9">
<div class="container-max">
<div class="flex-grid">
<div class="col-wrapper">
<div class="col col-12-d">
<div class="heading-lines hide-mobile-wide">
<div class="heading-line hl-first"></div>
<div class="heading-line"></div>
</div>
<div class="flex-grid">
Template
</div>
</div>
</div>
</div>
</div>
</div>
<section class="section s-radius sr-large background-blurple z-9">
<div class="container-max">
<div class="flex-grid">
<p>
Template, template, template, template, template, template, template, template, template, template, template, template, template, template, template, template, template, template, template, template,
template, template, template, template, template, template, template, template, template, template, template, template, template, template, template, template, template
</p>
</div>
</div>
</section>
<div class="section s-heading background-white z-7">
<div class="section-head-bg-extension background-white"></div>
<div class="container-max">
<h2 class="heading-xl text-center">Template text-center</h2>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</body>
I have problem with my website.
I did responsive website with mobile menu and it's looking very good on Developere Mode with responsive and android phone but on iphone it look terrible..
Here on dev tools/android:
Here on iphone:
Code:
HTML:
<header class="header">
<div class="header-wrapper">
<div class="header-logo" id="headerLogo">
<img src="assets/images/logo_right.svg" alt="Logo company" height="70px">
</div>
<div class="header-logo header-logo--mobile">
<img class="logo-mobile" src="assets/images/logo.png" alt="Logo company" height="70px">
</div>
<div class="header-contact-container">
<div class="header-contact__item">
<div class="header-contact__icon">
<i class="gg-phone"></i>
</div>
</div>
</div>
</div>
<nav class="site-nav" id="nav__main">
<ul class="site-nav__list">
<li class="site-nav__item site-nav__item--is-hidden">
<a class="site-nav__anchor" href="#" id="mobile_nav">MENU</a>
</li>
<li class="site-nav__item">
<a class="site-nav__anchor" href="javascript: scrollSmoothTo('mainWrapper')"
id="homeNavButton">Home</a>
</li>
<li class="site-nav__item">
<a class="site-nav__anchor" href="javascript: scrollSmoothTo('aboutUs')"
id="aboutNavButton">About</a>
</li>
<li class="site-nav__item">
<a class="site-nav__anchor" href="javascript: scrollSmoothTo('services')" id="servicesNavButton">Services</a>
</li>
<li class="site-nav__item">
<a class="site-nav__anchor" href="javascript: scrollSmoothTo('contact')" id="contactNavButton">Contact</a>
</li>
</ul>
</nav>
</header>
CSS DEFAULT
.header {
display: block;
}
.header-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 65%;
padding: 30px 0;
margin: 0 auto;
}
.header-logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header-logo--mobile {
display: none;
}
.header-contact-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header-contact__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.header-contact__title {
font-size: 1.2rem;
text-transform: uppercase;
margin: 0 0 10px;
}
.header-contact__data {
text-align: center;
}
.header-contact__icon {
display: block;
margin-left: 15px;
height: 100%;
}
.site-nav {
height: 50px;
background: rgb(250, 255, 253);
border-top: 1px solid rgba(224, 224, 224, 0.68);
border-bottom: 1px solid rgba(224, 224, 224, 0.68);
z-index: 999;
}
.site-nav__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 auto;
padding: 0;
height: 100%;
list-style: none;
}
.site-nav__item--is-hidden {
display: none;
}
.site-nav__item {
width: 180px;
height: 80%;
}
.site-nav__anchor {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: rgb(6, 67, 62);
font-family: 'Sora', sans-serif;
font-weight: 500;
font-size: 1.1em;
text-transform: uppercase;
text-decoration: none;
-webkit-appearance: none!important;
}
.site-nav__anchor:hover {
font-size: 1.2rem;
color: #ffcc00;
}
.header-nav--sticky {
position: fixed;
top: 0;
width: 100%;
}
CSS MOBILE
.header-wrapper {
display: block;
width: 100%;
text-align: center;
}
.header-logo {
display: none;
}
.header-logo--mobile {
display: block;
padding-top: 30px;
}
.logo-mobile {
}
.header-contact-container {
display: block;
}
.header-contact__item {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: auto;
padding-top: 30px;
}
.header-contact__title {
font-size: 1.4rem;
}
.header-contact__data {
display: block;
/*-webkit-box-ordinal-group:3;*/
/*-ms-flex-order:2;*/
/*order:2;*/
font-size: 1.2rem;
}
.site-nav {
height: auto!important;
}
.site-nav__list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: auto!important;
/*height: auto;*/
}
.site-nav__item--is-hidden {
display: block!important;
background: #FFCC00;
max-height: 100%!important;
}
.site-nav__item {
display: none;
width: 100%;
max-height: 100%!important;
}
.site-nav__anchor {
padding: 15px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
.site-nav__anchor:nth-child(1):hover {
font-size: 1.2rem;
color:inherit!important;
}
JS
const mobileButtonMenu = document.getElementById("mobile_nav")
mobileButtonMenu.addEventListener("click", setMobileMenu);
function setMobileMenu() {
const menu = document.querySelectorAll(".site-nav__item")
if (menu[1].style.display === "block") {
menu[1].style.display = "none";
menu[2].style.display = "none";
menu[3].style.display = "none";
menu[4].style.display = "none";
} else {
menu[1].style.display = "block";
menu[2].style.display = "block";
menu[3].style.display = "block";
menu[4].style.display = "block";
}
}
I dont know what I have to do. I think that problem may be with height:auto, because other elements with flex was be good render.
I have simple navigation bar with position:sticky that displays not clear when scrolled and everything seems to work fine then it is in the top.
As you can see from the images above there seems to be some render problem. Here is the css:
body{
/*For demo purpose*/
height:300vh;
}
* {
font-family: RobotoThin;
margin: 0;
padding: 0;
overflow-x: hidden;
outline: none;
-webkit-transition: 1s;
transition: 1s;
box-sizing: border-box;
background-repeat: no-repeat;
transition: 0.5s !important;
scroll-behavior: smooth;
}
div.window {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
box-sizing: border-box;
padding: calc(2vh + 2vw);
height: 100vh;
width: 95vw;
position: absolute;
right: 0;
top: 0;
display: none;
white-space: nowrap;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
background-color: #ecf0f1;
margin-left: 5vw;
}
#help{
display:block;
transition:0s !important;
}
div#help{
height:200vh;
white-space: normal;
}
div#help a{
color:red;
text-decoration: none;
}
div#nav {
top: 0;
position: sticky;
display: flex;
justify-content: space-between;
color: black;
background-color: white;
padding-top: 1vmax;
padding-bottom: 1vmax;
font-size: 1.2vmax;
flex-wrap: wrap;
border-radius: 10em;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
div#nav>a {
color: black;
}
div#nav>*:hover {
color: gold;
letter-spacing: 0.3vw;
}
div#nav> :first-child {
margin-left: 1vw;
}
div#nav> :last-child {
margin-right: 1vw;
}
<body>
<div class='windows' id='help'>
<div id='nav'> <a>General important info</a> <a>Desktop</a> <a>Math calculators</a> <a>Notes</a> <a>Battery</a> <a>Quotes</a> <a>Settings</a> <a>Passwords and Data</a> </div>
</div>
</body>
Don't mind the color. I use a plugin so you will see everything in white, not in black.
Strangely I couldn't get the example to work properly and I can not represent the issue. Hopefully you can take a look at my code and tell what may cause this problem.
After much fiddling, the culprit is:
overflow-x: hidden;
body {
/*For demo purpose*/
height: 300vh;
}
* {
font-family: RobotoThin;
margin: 0;
padding: 0;
/* overflow-x: hidden; <-- The problem */
outline: none;
-webkit-transition: 1s;
transition: 1s;
box-sizing: border-box;
background-repeat: no-repeat;
transition: 0.5s !important;
scroll-behavior: smooth;
}
div.window {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
box-sizing: border-box;
padding: calc(2vh + 2vw);
height: 100vh;
width: 95vw;
position: absolute;
right: 0;
top: 0;
display: none;
white-space: nowrap;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
background-color: #ecf0f1;
margin-left: 5vw;
}
#help {
display: block;
transition: 0s !important;
}
div#help {
height: 200vh;
white-space: normal;
}
div#help a {
color: red;
text-decoration: none;
}
div#nav {
top: 0;
position: sticky;
display: flex;
justify-content: space-between;
color: black;
background-color: white;
padding-top: 1vmax;
padding-bottom: 1vmax;
font-size: 1.2vmax;
flex-wrap: wrap;
border-radius: 10em;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
div#nav>a {
color: black;
}
div#nav>*:hover {
color: gold;
letter-spacing: 0.3vw;
}
div#nav> :first-child {
margin-left: 1vw;
}
div#nav> :last-child {
margin-right: 1vw;
}
<body>
<div class='windows' id='help'>
<div id='nav'> <a>General important info</a> <a>Desktop</a> <a>Math calculators</a> <a>Notes</a> <a>Battery</a> <a>Quotes</a> <a>Settings</a> <a>Passwords and Data</a> </div>
</div>
</body>
I am trying to remove the text-decoration of a flex child when the parent is the anchor. I've tried all of the following code, and it is not working at all. I've created a jsFiddle, and on that the underline shows all the time and not on hover. In my WordPress installation, it only shows on hover. I'm really not sure what to do! Any help is appreciated!
Thank you ahead of time!!!!
.fleximagebox_link:hover, a.fleximagebox_link:hover, a .fleximagebox_link:hover,
.fleximagebox_link a:hover, .fleximagebox_link:hover a,
a .fleximagebox_link p:hover, .image_background:hover, .image_background:hover a,
a .image_background:hover, .image_background.fleximagebox_link a:hover,
a .image_background.fleximagebox_link:hover {
text-decoration: none!important;
}
Here is the jsFiddle that explains what I'm talking about: https://jsfiddle.net/Clare12345/th60mde3/2/
This will get rid of the underline in your fiddle .flexbox_images a { text-decoration: none; }
As to why it's on your website, all we can do is guess if you don't include the code or a link to your site. But you might try changing that line to .flexbox_images a, .flexbox_images a:hover { text-decoration: none !important; }
.flexbox_images a {
text-decoration: none;
}
.main_box {
background: white;
height: 400px;
width: 100%;
margin: 0 auto;
padding: 0px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.main_box .flexbox_images {
color: white;
width: 100%;
padding: 0px;
overflow: auto;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flexbox_images a {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.image_background {
height: 250px;
margin: 0 auto;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
max-width: 101%;
}
.image_background_left {
background-repeat: no-repeat;
background-size: contain;
background-image: url(http://pipsum.com/350x240.jpg);
justify-content: flex-end;
margin-right: -1px;
}
.image_background_right {
background-repeat: no-repeat;
background-size: contain;
background-image: url(http://pipsum.com/350x240.jpg);
justify-content: flex-start;
margin-left: -1px;
}
.fleximagebox_link {
font-size: 28pt;
background: rgba(255, 255, 255, 0.85);
color: #000!important;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 1.5px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 130px;
}
.image_background_left .fleximagebox_link {
justify-content: flex-end;
padding-left: 35px;
}
.image_background_right .fleximagebox_link {
justify-content: flex-start;
padding-right: 35px;
}
.image_background_right .fleximagebox_link p {
font-size: 28pt!important;
color: #000!important;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 1.5px;
margin-bottom: 0px;
}
.main_black_bar {
width: 3px;
background: #000;
height: 50px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: -1px;
}
.image_background_left .main_black_bar {
margin-left: 35px;
}
.image_background_right .main_black_bar {
margin-right: 35px;
}
<div class="main_box">
<div class="flexbox_images">
<a href="">
<div class="image_background image_background_left">
<div class="fleximagebox_link">Buy
<div class="main_black_bar"> </div>
</div>
</div>
</a>
<a href="">
<div class="image_background image_background_right">
<div class="fleximagebox_link">
<div class="main_black_bar"> </div>Sell</div>
</div>
</a>
</div>
</div>
I am working on an CMS, and I want to have a full 100% height.
How do I get my page a 100% height without the 100vh on the wrapper (which I am guessing this is the right way doing this).
body{
margin: 0;
font-family: arial;
}
.main-wrapper{
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row;
height: 100vh;
overflow: hidden;
/*flex-wrap: wrap;*/
}
.main-wrapper div{
}
.sidebar1{
/*flex-direction: column;*/
/*flex-wrap: wrap;*/
/*flex: 1;*/
/*height: 100%;*/
/*width: 10px;*/
/*background-color: #29313c;*/
background-color: #29313c;
color: white;
display: flex;
flex-direction: column;
/*height: 100vh;*/
}
.sidebar1 .category{
flex: 1;
height: 100%;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #90A4BB;
text-decoration: none;
font-weight: bold;
}
.sidebar1 .category:hover{
color: white;
background-color: #2E3C54;
}
.sidebar1 .category:not(:last-child){
border-bottom: 1px solid #90A4BB;
}
.sidebar1 .category div{
}
.sidebar2{
background-color: #dee3e7;
flex-wrap: wrap;
flex-direction: column;
flex-basis: 330px;
/*width: 330px;*/
/* flex: 1;
flex-wrap: wrap;
flex-direction: column;
*/
}
.main-content{
flex: 5;
flex-wrap: wrap;
flex-direction: column;
background-color: #fff;
}
<div class="main-wrapper">
<div class="sidebar1">
<a href="#" class="category">
<div>AAA</div>
</a>
<a href="#" class="category">
<div>BBB</div>
</a>
<a href="#" class="category">
<div>Banana</div>
</a>
</div>
<div class="sidebar2">
</div>
<div class="main-content">
</div>
</div>
https://jsfiddle.net/nyu1uma1/
(remove hight: 100vh)
Just give:
html,body {
height: 100%;
}
And height: 100%; to .main-wrapper
.main-wrapper{
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row;
height: 100%;
overflow: hidden;
/*flex-wrap: wrap;*/
}
Working Fiddle