Develop Reference

navbar disappears when i switch to mobile view

When I minimize the browser to mobile, the burger icon should come up in mobile view and my navbar doesn't come up, but I am facing this issue. I am applying the codes I got from Github to my website. When I minimize it in the browser it switches to mobile view and the nav bar is gone, it disappears in the menus in my navbar. codes i use github
navbar.js:
function Navbar() {
const [isOpen,setIsOpen] =useState(false);
return (
<div className="per">
<div className="logo">
<div className="search">
</div>
<div className={`Items ${isOpen && "open "}`}>
<a href="/home" to="/home">
Home
</a>
<a href="/contact" to="/contact">
contact
</a>
<a href="/about-us" to="/about-us">
About Us
</a>
<div className={`nav-toggle ${isOpen && "open"}`}
onClick={() => setIsOpen(!isOpen)}>
<div className="bar"></div>
</div>
</div>
</div>
);
}
navbar.css:
#media (max-width: 700px){
.Items > a{
margin: 15px;
}
.Items{
position: absolute;
top: 60px;
display: flex;
flex-direction: column;
background: #7e77e1;
left: 200px;
width: 100%;
height: 100%;
transform: translateX(100%);
transition: all .45s;
}
.Items > a::before{
background: transparent;
}
.Items.open{
transform: translateX(0);
}
.per > .nav-toggle{
display: flex;
width: 50px;
height: 50px;
align-items: center;
justify-content: center;
cursor: pointer;
}
.nav-toggle > .bar{
position: relative;
width: 32px;
height: 2px;
background: #ffffff;
transition: all 0.45s ease-in-out;
}
.nav-toggle >.bar::before,
.nav-toggle >.bar::after{
content: "";
position: absolute;
height: 2px;
background: #ffffff;
border-radius: 2px;
transition: all 0.45s ease-in-out;
}
.nav-toggle >.bar::before{
width: 25px;
transform: translateY(-8px);
right: 0;
}
.nav-toggle >.bar::after{
width: 32px;
transform: translateY(8px);
}
.nav-toggle.open > .bar{
transform: translateX(-40px);
background: transparent;
}
.nav-toggle.open > .bar::before{
width: 32px;
transform: rotate(45deg) translate(26px, -26px);
}
.nav-toggle.open > .bar::after{
transform: rotate(-45deg) translate(26px, 26px);
}
}

My site Items section is on the left, I made 200px, it should be 0
Items{
left:0px;
}

Why 'transition-duration' effect doesn't work on 'justify-content' or 'left, right' positioning? [duplicate]

I have a CSS class that on hover should change the justify-content property from center to flex-start with a delay of 1s.
So everything works fine and is being delayed except from the justify-content.
.menuItem:hover {
transition-property: all;
transition-delay: 1s;
justify-content: flex-start;
}
Am I doing something wrong? And If so, how can I achieve that behavior?

justify-content is not a transition-able property. You can find the full list of compatible properties here. All unlisted properties should simply snap to their new value.
If you happen to need to animate a single element only, you may try using absolute positioning.
#wrapper {
position: relative;
}
#element {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: all 300ms;
}
#element:hover {
left: 0;
transform: translateX(0);
}
Keep in mind that this will not work for multiple elements.

You can achieve your goal with two flex items, where the transition is on the "flex" property.
.container {
display: flex;
justify-content: center;
border: 1px solid gray;
}
.content {
flex: 1;
max-width: fit-content;
border: 1px solid orangered;
}
.dummy {
flex: 0;
transition: flex 1s;
border: 1px solid limegreen;
}
.container:hover .hovered {
flex: auto;
}
<div class="container">
<div class="content"> hover over me </div>
<div class="dummy hovered" />
</div>
Hey Fabricio, this section is for your question. Cheers
.container {
display: flex;
justify-content: center;
border: 1px solid gray;
}
.content {
width: fit-content;
border: 1px solid orangered;
}
.dummy {
transition: flex 1s;
border: 1px solid limegreen;
}
.after {
flex-grow: 1;
}
.before {
flex-grow: 0;
}
.container:hover .before {
flex-grow: 1;
}
<div class="container">
<div class="dummy before" ></div>
<div class="content"> hover over me </div>
<div class="dummy after" ></div>
</div>
Hey Robo, this section is for your notice. Flex-grow is not the only possible way. At least flex-basis can also do the job. I haven't tried with flex-shrink but can see the possibility too.
.container {
display: flex;
justify-content: center;
border: 1px solid gray;
}
.content {
max-width: fit-content;
min-width: fit-content;
border: 1px solid orangered;
}
.dummy {
flex-basis: 0;
transition: flex 1s;
border: 1px solid limegreen;
}
.container:hover .dummy {
flex-basis: 100%;
}
<div class="container">
<div class="content">hover over me</div>
<div class="dummy" />
</div>

You can't animate 'justify-content', but if you need to animate element to move from one side to other, you can do:
.parent {
display: flex;
}
.menuItem:hover {
flex: 1;
animation: moveAnim .3s alternate 1;
}
#keyframes moveAnim {
from { flex: none }
to{ flex: 1 }
}

'classList' property returning null when element is present?

I'm fairly new to JS so I'm sorry if this has been answered.
I've siphoned through most answers and they didn't specifically fall in line with mine.
I'm not understanding why the element cant is called upon when it's there.
I don't think it seems to be anything with the CSS but I'm not completely sure.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('nav-links');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
navSlide();
display: flex;
justify-content:space-around;
align-items: center;
min-height: 8vh;
background-color: var(--mainBg);
}
.nav-links li{
list-style: none;
}
.nav-links{
display: flex;
justify-content: space-evenly;
width: 20%;
font-size: 20px;
}
.nav-links a{
letter-spacing: 2px;
color:var(--mainText);
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 4px;
background-color: var(--mainText);
margin:3px;
padding: 0;
}
.showacase-hero{
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("img/D1.jpg");
height: 600px;
background-position:center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-container{
text-align: center;
position: absolute;
top: 50%;
left: 28%;
color: var(--mainBanner);
font-size: 20px;
}
/* Media Queries*/
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:728px){
body{
overflow-x: hidden;
}
.nav-links{
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color:var(--mainBg);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
margin-left: 28em;
}
.nav-active{
transform: translateX(0%);
}
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
#media screen and(max-width:566px){
}
<body>
<nav>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="showacase-hero">
<div class="hero-container">
<h1>Yade's Pet</h1>
<span class="banner"><p>Petcare Specialist/Dog Walker</p></span>
<form action="https://www.w3docs.com/">
<button class="btn" type="submit">Let's Take a Stroll</button>
</form>
</div>
</div>
<script type="text/javascript" src="app2.js"></script>
</body>
</html>

nav-links is a class, not a tag, so add a dot before the class name:
document.querySelector( '.nav-links' );
PS: It's a bad practice to use variables const navSlide = () => { instead of a clear function declarations:
function navSlide () {
...
}

How do I "reverse" a CSS transition when the element is clicked on a second time?

I have a simple CSS transform/transition for a toggle switch. It toggles a .slider-click class when I click on it. I want to perform a second transition that "reverses" the effect when I click on it again. But, obviously it just removes the class. Please run my code snippet to see what I mean. How do I achieve this? Thanks.
const slider = document.querySelector('.slider')
const circle = document.querySelector('.slider-circle')
slider.addEventListener('click', (e)=>{
circle.classList.toggle('slider-click');
})
.slider {
background-color: hsl(237, 63%, 64%);
border-radius: 75px;
width: 34vw;
height: 21vw;
display: flex;
justify-content: flex-start;
align-content: flex-start;
}
.slider:hover {
opacity: 50%;
cursor: pointer;
}
.slider-circle {
height: 17.36vw;
width: 17.36vw;
border-radius: 50%;
background-color: #ffffff;
margin: 5%
}
.slider-click {
transform: translateX(13vw);
transition: .2s;
}
/* Something like this when clicked again */
.slider-return {
transform: translateX(-13vw);
transition: .2s;
}
<div class="slider-content">
<div class="slider">
<div class="slider-circle"></div>
</div>
</div>

Set the transition: .2s; inside the default element, not once it receives the active class.
// slider? It's more kindof a checkbox
const checkbox = document.querySelectorAll('.checkbox'); // use all! It's a class after all
const checboxToggle = (ev) => ev.currentTarget.classList.toggle('is-active');
checkbox.forEach(el => el.addEventListener('click', checboxToggle));
.checkbox {
background-color: hsl(237, 63%, 64%);
border-radius: 21vw;
width: 34vw;
height: 21vw;
display: flex;
justify-content: flex-start;
align-content: flex-start;
cursor: pointer;
}
.checkbox:before {
content: "";
height: 17.36vw;
width: 17.36vw;
border-radius: 50%;
background-color: #ffffff;
margin: 5%;
transition: .2s; /* USE IT HERE! */
}
.checkbox.is-active:before {
transform: translateX(13vw);
}
<div class="checkbox"></div>
Additionally:
Use the right wording. There's nothing to slide. It's more like a checkbox.
Use querySelectorAll since you use classes! And .forEach() allthe retrieved elements.
You don't need any inner elements. Use the :before or :after pseudos
Add the desired class directly to the main .checkbox element.

I guess this is what you want, you just add a class clicked to the circle, which will set css translateX(13vw) and reset it to zero when clicked again.
const slider = document.querySelector('.slider')
const circle = document.querySelector('.slider-circle')
slider.addEventListener('click', (e)=>{
circle.classList.toggle('clicked');
})
.slider {
background-color: hsl(237, 63%, 64%);
border-radius: 75px;
width: 34vw;
height: 21vw;
display: flex;
justify-content: flex-start;
align-content: flex-start;
}
.slider:hover {
opacity: 50%;
cursor: pointer;
}
.slider-circle {
height: 17.36vw;
width: 17.36vw;
border-radius: 50%;
background-color: #ffffff;
margin: 5%;
transition: all .2s ease-out;
transform: translateX(0);
}
.clicked {
transform: translateX(13vw);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-content">
<div class="slider">
<div class="slider-circle"></div>
</div>
</div>

const slider = document.querySelector('.slider')
const circle = document.querySelector('.slider-circle')
let toggled = false
slider.addEventListener('click', (e)=>{
if(toggled) {
circle.classList.remove('slider-click');
circle.classList.add('slider-return');
toggled = false;
} else {
circle.classList.remove('slider-return');
circle.classList.add('slider-click');
toggled = true;
}
})
.slider {
background-color: hsl(237, 63%, 64%);
border-radius: 75px;
width: 34vw;
height: 21vw;
display: flex;
justify-content: flex-start;
align-content: flex-start;
}
.slider:hover {
opacity: 50%;
cursor: pointer;
}
.slider-circle {
height: 17.36vw;
width: 17.36vw;
border-radius: 50%;
background-color: #ffffff;
margin: 5%
}
.slider-click {
transform: translateX(13vw);
transition: .2s;
}
/* Something like this when clicked again */
.slider-return {
transform: initial;
transition: .2s;
}
<div class="slider-content">
<div class="slider">
<div class="slider-circle"></div>
</div>
</div>

Start by using a checkbox and use :before and :after pseudo classes.
Use of Javascript will not be necessary.
See w3schools for more information on how to do this.

how to make CSS transition when Item is clicked? [duplicate]

This question already has answers here:
Flip content of a div on clicking a button
(4 answers)
Closed 2 years ago.
I have created a pen here(https://codepen.io/rupamkairi/pen/ExjJRMo?editors=1100) on codepen. The card is made to rotate(specifically to Flip) when hovered on the element. I want it to be flip when I click on the element(.card).
.card {
margin: auto;
width: 5em;
height: 8em;
background-color: transparent;
perspective: 250px;
}
.card-content {
position: relative;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
transition: transform 0.5s;
transform-style: preserve-3d;
}
.card:hover .card-content {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.card-back {
border-radius: 5px;
background-color: white;
transform: rotateY(180deg);
}
<div class="card">
<div class="card-content">
<div class="card-front">
<h1>🎆</h1>
</div>
<div class="card-back">
<h1>🍕</h1>
</div>
</div>
</div>
I tried using :active pseudo-class but in that case I need to hold the card to keep it fliped.
Is there any way to use css animation with javascript?
I want to make multiple cards on a single page, and make them flip when clicked.

If you want the card to toggle the flip on every click try this:
const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");
let flipped = false;
card.addEventListener("click", () => {
if(!flipped) {
cardContent.style.transform = "rotateY(180deg)"
} else {
cardContent.style.transform = "rotateY(0deg)"
}
flipped = !flipped;
});
Or if you want the card to be flipped only once try this:
const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");
card.addEventListener("click", () => {
cardContent.style.transform = "rotateY(180deg)";
});
As it's implemented through JavaScript remove .card:hover .card-content { transform: rotateY(180deg);} from stylesheet.

Initially add the id to the div tag where class = "card" like
HTML
<div class="card" id ="card1">
<div class="card-content">
<div class="card-front">
<h1>🎆</h1>
</div>
<div class="card-back">
<h1>🍕</h1>
</div>
</div>
</div>
Here you set the id as card1 and then you must you the following simple JS like
<script>
document.getElementById("card1").onclick = function(){
document.getElementById("card1").style.transform = rotateY(180deg);
}
</script>
This is a simple way by which you can achieve what you want.

just change .card:hover .card-content
to .card.flip .card-content
and add js code:
const card = document.querySelector('.card')
card.onclick=_=>card.classList.add('flip');
card.onmouseout=_=>card.classList.remove('flip');
demo:
const card = document.querySelector('.card')
card.onclick=_=>card.classList.add('flip');
card.onmouseout=_=>card.classList.remove('flip');
html,
body {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Roboto", sans-serif;
background-color: #96cfe1;
}
.container {
padding: 10%;
}
.card {
margin: auto;
width: 5em;
height: 8em;
background-color: transparent;
perspective: 250px;
}
.card-content {
position: relative;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px #00000080;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.card.flip .card-content {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.card-back {
border-radius: 5px;
background-color: white;
transform: rotateY(180deg);
}
<div class="container">
<div class="card">
<div class="card-content">
<div class="card-front">
<h1>🎆</h1>
</div>
<div class="card-back">
<h1>🍕</h1>
</div>
</div>
</div>
</div>