I've successfully coded a CSS/JS hamburger menu which has a transforming icon when clicked. However, I've just discovered a bug where, when the hamburger 'close' button is clicked, the nav menu cuts behind the header making it look messy.
Currently, the menu opens correctly when the hamburger is clicked - at 100vh - but when it closes, it appears that it cuts behind the header, so it looks like it's at about 80vh. When it's closing, I'm wanting it to remain at 100vh.
Apologies in advance for the lengthy code.
Here's my code:
// Variables
let line1 = document.getElementById("hamburger-line-1");
let line2 = document.getElementById("hamburger-line-2");
let hamburger = document.getElementById("hamburger");
let navList = document.getElementById("hamburger-nav-list");
// Function
function hamburgerActive() {
line1.classList.toggle("active");
line2.classList.toggle("active");
navList.classList.toggle("active");
}
// Event Listener
hamburger.addEventListener("click", hamburgerActive);
.universal-header-section {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-container {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
}
.universal-header-hamburger {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-start;
}
#hamburger {
height: 20px;
width: 40px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
cursor: pointer;
z-index: 99;
}
.hamburger-span {
height: 5px;
width: 30px;
background-color: #342b38;
transition: all .2s ease-in-out;
cursor: pointer;
}
#hamburger-line-1.active {
transform: translateY(7.5px) rotate(-45deg);
}
#hamburger-line-2.active {
transform: translateY(-7.5px) rotate(45deg)
}
.universal-header-logo {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-basket {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-end;
}
#hamburger-nav-list {
height: 100vh;
width: 0;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
background-color: yellow;
transition: all 0.5s ease-in-out;
}
#hamburger-nav-list.active {
height: 100vh;
width: 30%;
position: fixed;
}
<header class="universal-header-section">
<div class="universal-header-container">
<div class="universal-header-hamburger">
<div id="hamburger">
<span id="hamburger-line-1" class="hamburger-span"></span>
<span id="hamburger-line-2" class="hamburger-span"></span>
</div>
</div>
<div class="universal-header-logo">
<a href="index">
<h2>Logo</h2>
</a>
</div>
<div class="universal-header-basket">
<a href="basket">
<i class="fas fa-shopping-cart fa-2x"></i>
</a>
</div>
</div>
</header>
<div id="hamburger-nav-list">
<div class="hamburger-container">
</div>
</div>
Thanks in advance.
Think this is easiest edit to make it work?
Changed the position: absolute / flex
Also the order of DOM elements changed around (most important)
Hope it didnt break anyting :)
// Variables
let line1 = document.getElementById("hamburger-line-1");
let line2 = document.getElementById("hamburger-line-2");
let hamburger = document.getElementById("hamburger");
let navList = document.getElementById("hamburger-nav-list");
// Function
function hamburgerActive() {
line1.classList.toggle("active");
line2.classList.toggle("active");
navList.classList.toggle("active");
}
// Event Listener
hamburger.addEventListener("click", hamburgerActive);
.universal-header-section {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-container {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
}
.universal-header-hamburger {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-start;
}
#hamburger {
height: 20px;
width: 40px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
cursor: pointer;
z-index: 9999;
}
.hamburger-span {
height: 5px;
width: 30px;
background-color: #342b38;
transition: all .2s ease-in-out;
cursor: pointer;
}
#hamburger-line-1.active {
transform: translateY(7.5px) rotate(-45deg);
}
#hamburger-line-2.active {
transform: translateY(-7.5px) rotate(45deg)
}
.universal-header-logo {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-basket {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-end;
}
#hamburger-nav-list {
height: 100vh;
width: 0;
top: 0;
align-items: center;
justify-content: space-around;
flex-direction: column;
background-color: yellow;
transition: all 0.5s ease-in-out;
position:absolute;
}
#hamburger-nav-list.active {
height: 100vh;
width: 30%;
position: fixed;
z-index: ;
display:flex;
}
<div id="hamburger-nav-list">
<div class="hamburger-container">
</div>
</div>
<header class="universal-header-section">
<div class="universal-header-container">
<div class="universal-header-hamburger">
<div id="hamburger">
<span id="hamburger-line-1" class="hamburger-span"></span>
<span id="hamburger-line-2" class="hamburger-span"></span>
</div>
</div>
<div class="universal-header-logo">
<a href="index">
<h2>Logo</h2>
</a>
</div>
<div class="universal-header-basket">
<a href="basket">
<i class="fas fa-shopping-cart fa-2x"></i>
</a>
</div>
</div>
</header>
Related
I am trying to overlay one image into another but it not working.
My code
body {
background: #000000 50% 50%;
height: 100%
width:100%;
overflow-x: hidden;
overflow-y: hidden;
}
.neer {
z-index: 100;
position: absolute;
}
.mobile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div class="neer">
<img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
<div>
<img src="https://place-hold.it/338x280" />
</div>
</div>
I am not using margin-top or margin-bottom because i am looking in responsive. defining margin sometime break the layout in different structure.
Place both images inside a div with position: relative;. Add this class to the image that should be on top:
.neer {
z-index: 100;
position: absolute;
top: 0;
left: 0;
}
body {
background: #000000 50% 50%;
height: 100%
width:100%;
overflow-x: hidden;
overflow-y: hidden;
}
.neer {
z-index: 100;
position: absolute;
top: 0;
left: 0;
}
.mobile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div style="position: relative;">
<img src="https://place-hold.it/338x280" />
<img class="neer" src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
</div>
there are many ways to do that. a simple way using your giving code is to remove flex style from mobile and put it in body.
* {
/* border: 1px solid red; */
}
body {
background: #000000 50% 50%;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.neer {
z-index: 100;
position: absolute;
}
.mobile {
/* display: flex; */
/* flex-direction: column; */
/* align-items: center; */
/* justify-content: center; */
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div class="neer">
<img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
<div class="behind">
<img src="https://place-hold.it/338x280" />
</div>
</div>
a better way is to put both pictures in one div then give them the same position in that div.
* {
/* border: 1px solid red; */
}
body {
background: #000000 50% 50%;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.neer {
z-index: 100;
position: absolute;
}
.mobile {
/* display: flex; */
/* flex-direction: column; */
/* align-items: center; */
/* justify-content: center; */
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div class="container">
<div class="neer">
<img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
<div class="behind">
<img src="https://place-hold.it/338x280" />
</div>
</div>
</div>
If we know why you want to do this, there might be a better way.
How can i create scrolling image in display notebook with overflow notebook?
Try with sticky notebook, but notebook image with shadow, and bg image doesnt overflowed.
I want it to stay background img inside the screen, but it doesn't work.
Top point bg on top notebook when its reveals.
Maybe some one have examples?
.project-rules__note {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 600px;
}
.project-rules__note > img {
width: 53vw;
height: auto;
position: sticky;
top: 0;
}
.project-rules__note .container {
width: 68vw;
height: 100vh;
position: sticky;
top: 0;
z-index: 2;
}
.project-rules__note .note {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
position: relative;
overflow: hidden;
padding-top: 100px;
}
.project-rules__note .bg-note {
width: 68vw;
height: auto;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 1;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
.project-rules__note .bg-note::before {
}
.project-rules__note .bg-note img {
width: 100%;
}
.project-rules__note .book {
width: 100%;
height: auto;
display: flex;
align-items: flex-end;
justify-content: flex-start;
z-index: 2;
}
.project-rules__note .book img {
width: 100%;
height: auto;
max-height: 100vh;
}
<div class="project-rules__note">
<div class="container">
<div class="note">
<div class="img book">
<img src="https://jukachu.github.io/Lottery-cards/src/notebook.png" alt="">
</div>
<!-- <div class="img bg-note">-->
<!-- <img src="./img/bgnote.jpg" alt="">-->
<!-- </div>-->
</div>
</div>
<img src="https://i.ibb.co/74d27jf/bgnote.jpg" alt="">
</div>
so I was making this layout and i can't get the header to be aligned properly
I want to move the button and heading to the red boxes
enter image description here
The code is as follows:
<div class="main">
<div class="header">
<h1 class="notes__title">Notes</h1>
<button class="notes__create">Create</button>
</div>
<div class="notes">
<div class="note">
<h3 class="note__title">Note Title</h3>
<div class="note__body">Text....</div>
</div>
</div>
and the CSS
.main {
display: flex;
width: 100%;
align-items: center;
flex-direction: column;
}
.header {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
margin: 10px 0px;
}
.notes__title {
color: #fff;
}
.notes {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
please help
You're using space-around which is what causes the effect you are seeing.
Try:
.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
}
.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
max-width: 1200px;
}
ok so i did this and it worked
although I am not happy with the solution, i wanted to achieve it with flex box only#
.main {
max-width: 960px;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
min-height: 100vh;
}
.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
}
The easiest solution I can think of is using bootstrap cols and use the space-between for Notes and Button to got to the right place
I am trying to move my button on bottom (some pixel above bottom).so it always be in bottom whether it contend is less or large. I tried using flex-box also not able to do that.Container have min-height : 500px
here is my code
https://jsbin.com/joyalosate/edit?html,css,output
Expected output :: Explore products move bottom with some pixel above bottom .
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height:500px;
}
HTML
<div class="rh02w2">
<div class="bottom__block">
<button class="rh02-pcontent" data-lbl="panel2-home-apps-content-area">
<h1 class="rh02-ttl">Tetst <b>Applications</b></h1>
<div class="rh02-sub">Complete Suite of Apps</div>
<div class="rh02-leadin">
<p>Streamline your enterprise business process. With ERP Financials, Procurement, Project Portfolio Management and more, you can increase productivity, lower costs, and improve controls.</p>
</div>
</button>
<div class="rh02w4">
<div class="rh02-cta">
<div class="obttns">
<div>
<a data-lbl="panel2-home-apps-learn-more">Explore products</a>
</div>
</div>
</div>
</div>
</div>
</div>
css
.rh02w2 {
background-color: #325C72;
height: calc(100vh - 60px);
transform: translateY(60px);
left: 0;
min-width: 100%;
position: absolute;
margin-top: -60px;
color: #FBF9F8;
}
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height:500px;
}
.obttns {
width: 100%;
font-size: 1.4rem;
margin-bottom: -1.6rem;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: stretch;
align-items: stretch;
}
.obttns>div>* {
color: #161513 !important;
background: #fff;
}
.obttns a {
font-size: 1em;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
border: 0;
min-height: 30px;
height: 100%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
}
Replace your CSS with this.
.rh02w2 {
background-color: #325c72;
height: calc(100vh - 60px);
transform: translateY(60px);
left: 0;
min-width: 100%;
position: absolute;
margin-top: -60px;
color: #fbf9f8;
}
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height: 500px;
}
.rh02w4 {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.obttns {
width: 100%;
font-size: 1.4rem;
}
.obttns > div > * {
color: #161513 !important;
background: #fff;
}
.obttns a {
font-size: 1em;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
border: 0;
min-height: 30px;
height: 100%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
If you want to display your button about 10% above the bottom of the screen you can use the margin-top: 90%; in css. Here is the entire code alongside a button:
<button style="margin-top: 90%;">hi</button>
You can edit the 90% depending on how far down the button is on your screen. Since the code is also using the percentage instead of pixels, it will adjust depending on your screen size.
I have a Flexbox container with the following SCSS:
.picker {
height: 75px;
width: 100%;
display: flex;
flex-flow: column wrap;
}
My flex items have the following SCSS:
.pickeritem {
height: 25px;
width: 130px;
flex-shrink: 0;
display: flex;
align-items: center;
margin: 0 10px;
}
The problem I'm having is that the container is wrapping the items to the center of the div rather than next to the other items like so:
How do I make items 3 to 8 wrap next to each other leaving all of the white space to the right of the div?
Can this be achieved without using any sort of row and column methodology?
Try using the align-content property. I also made some other minor changes and added color and border for better visualization.
.picker {
height: 75px;
width: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
border: 1px solid black;
}
.pickeritem {
height: 25px;
width: 50px;
flex-shrink: 0;
display: flex;
align-items: center;
margin: 0 10px;
background-color: #fbbdbd;
}
<div class='picker'>
<div class='pickeritem'>1</div>
<div class='pickeritem'>2</div>
<div class='pickeritem'>3</div>
<div class='pickeritem'>4</div>
<div class='pickeritem'>5</div>
<div class='pickeritem'>6</div>
<div class='pickeritem'>7</div>
<div class='pickeritem'>8</div>
<div class='pickeritem'>9</div>
<div>
You can use
.picker {
height: 75px;
width: 100%;
display: flex;
flex-direction: row;
justify-content:flex-start;
}
.pickeritem {
height: 25px;
flex-shrink: 0;
display: flex;
align-items: center;
margin: 0 10px;
}