We Keep Coding

Responsive mobile navbar links wont work on mobile

I have an issue with the responsive sidebar nav links(anchor tags) won't click
Here is the part of the HTML code
<!-- Nav -->
<nav class="main-nav">
<img src="img/logo-dark-transparent.png" alt="AS Logo" class="logo">
<ul class="main-menu">
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
<li>Contact Me</li>
</ul>
....
</nav>
The main CSS code for navbar is here
.main-nav{
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
padding: 20px 0;
z-index: 1;
/* font-size: 1.5em; */
font-size: clamp(.5rem, .8vw + 1rem, 1.5rem);
}
.main-nav .logo{
width: 110px;
}
.main-nav ul{
display: flex;
}
.main-nav .main-menu li{
padding: 0 2em;
}
.main-nav .main-menu li a{
padding-bottom: 2px;
}
.main-nav .main-menu li a:hover{
border-bottom: 2px solid var(--text-color);
}
The CSS code for side nav is
#media(max-width:700px){
.container{
overflow-x: hidden;
}
section{
height: auto;
}
/* Navbar */
.menu-btn{
display: block;
}
.menu-btn:hover{
opacity: 0.5;
}
.main-nav ul.main-menu{
display: block;
position: absolute;
top: 0;
left: 0;
background: var(--bg-color);
filter: brightness(0.85);
width: 60%;
height: 100%;
opacity: 0.9;
padding: 30px;
transform: translateX(-500px);
transition: transform 0.5s ease;
}
.main-nav ul.main-menu.show{
transform: translateX(-20px);
}
.main-nav ul.main-menu li{
padding: 20px;
}
.main-nav ul.main-menu li:first-child{
margin-top: 2rem;
}
.main-nav ul.right-menu{
margin-right: 60px;
}
But the show class is toggled dynamically by JS code below
//Toggle Menu
const mainMenu = document.querySelector('.main-menu');
document.querySelector('.menu-btn').addEventListener('click', () => {
mainMenu.classList.toggle('show');
})
Also, I wanted to achieve smooth scrolling which works on desktop version but doesn't in the mobile sidebar menu using this JS code snippet
//Vanilla JS Smooth Scroll
document.querySelectorAll('.main-menu a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
I have been debugging for hours with no success, any help or advice would be appreciated.

Maybe the id of div you want to scroll with do not match the link(href) addresses.You need to make sure this. Also, you can do a null check in the JavaScript code as follows.
document.querySelectorAll('.main-menu a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
var elmnt = document.querySelector(this.getAttribute('href'));
if(elmnt != null) {
elmnt.scrollIntoView({
behavior: 'smooth'
});
}
});
});

Add !important in your CSS code
.menu-btn { display: block !important; }

CSS: Dropdown menu expands when hover below actual target

My best attempt to remedy this toggles the visibility on and off when hovering. However, this isn't ideal because the menu is supposed to transition into view. If the visibility is toggled, the transition isn't seen by the user when approaching the "hover element" from below.
My testing makes me think the issue is purely CSS related but I've gone ahead and included the javascript if it helps. The visibility toggle I mentioned above is commented out.
let items = document.getElementsByClassName('items');
let menuBtn = document.getElementById('menuBtn');
let menuList = document.getElementById('menuList');
let menuClass = document.getElementsByClassName('menu');
menuBtn.addEventListener('mouseenter', func, false);
menuList.addEventListener('mouseleave',func2, false);
//visibilityToggle('hidden', 'none');
function func() {
console.log('out');
//visibilityToggle('visible', 'visible');
}
function func2() {
//visibilityToggle('hidden', 'none');
console.log('in');
}
function visibilityToggle(vis, point) {
for (let i = 0; i < items.length; i++){
items[i].style.visibility = vis;
items[i].style.pointerEvents = point;
}
}
.trigger {
width: 200px;
height: 53px;
/*
border: 1px solid black;
background: green;
*/
}
.menu {
width: 200px;
pointer-events: visible;
}
.menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.menu a:hover {
background-color: #ccc;
}
.menu a.active {
background-color: #04AA6D;
color: white;
}
.items {
font-size: 50px;
opacity: 0;
position: relative;
top: -20px;
cursor: pointer;
pointer-events: none;
transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
}
.trigger:hover .items {
opacity: 1;
cursor: pointer;
transform: translate(0px, 20px);
}
#menuBtn {
border: 5px solid black;
}
<p>I am lost</p>
<div class="trigger">
<div class="menu" id="menuList">
Menu
<div class="items">
One
Two
Three
Four
</div>
</div>
</div>

I guess that issue can solve without js. Just change hover event to a #menuBtn and .items and insert reset pointer-events: initial . And should changing link class from items to item, because you applying styles to the group of links and the links itself.
.trigger {
width: 200px;
height: 53px;
/*
border: 1px solid black;
background: green;
*/
}
.menu {
width: 200px;
pointer-events: visible;
}
.menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.menu a:hover {
background-color: #ccc;
}
.menu a.active {
background-color: #04aa6d;
color: white;
}
.items {
font-size: 50px;
opacity: 0;
position: relative;
top: -20px;
cursor: pointer;
pointer-events: none;
transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
}
#menuBtn:hover + .items, /* Add event to #menuBtn */
.items:hover { /* Keep hover effect on the .items */
opacity: 1;
cursor: pointer;
transform: translate(0px, 20px);
pointer-events: initial; /* Reset pointer-events */
}
#menuBtn {
border: 5px solid black;
}
<div class="trigger">
<div class="menu" id="menuList">
Menu
<div class="items">
One
<!-- Changed items to item -->
Two
<!-- Changed items to item -->
Three
<!-- Changed items to item -->
Four
<!-- Changed items to item -->
</div>
</div>
</div>

Issue was ur items was position:relative so it actually is in same position as they are visible,So need to make them relatable only when hover otherwise make it position:absolute
.item-div{
position: absolute;
}
.trigger:hover .items {
position:relative;
}
let items = document.getElementsByClassName('items');
let menuBtn = document.getElementById('menuBtn');
let menuList = document.getElementById('menuList');
let menuClass = document.getElementsByClassName('menu');
menuBtn.addEventListener('mouseenter', func, false);
menuList.addEventListener('mouseleave',func2, false);
//visibilityToggle('hidden', 'none');
function func() {
console.log('out');
//visibilityToggle('visible', 'visible');
}
function func2() {
//visibilityToggle('hidden', 'none');
console.log('in');
}
function visibilityToggle(vis, point) {
for (let i = 0; i < items.length; i++){
items[i].style.visibility = vis;
items[i].style.pointerEvents = point;
}
}
.trigger {
width: 200px;
height: 53px;
/*
border: 1px solid black;
background: green;
*/
}
.menu {
width: 200px;
pointer-events: visible;
position:relative;
}
.menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.menu a:hover {
background-color: #ccc;
}
.item-div{
position: absolute;
width: 100%
}
.menu a.active {
background-color: #04AA6D;
color: white;
}
.items {
font-size: 50px;
opacity: 0;
top: -20px;
cursor: pointer;
pointer-events: none;
transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
}
.trigger:hover .items {
opacity: 1;
cursor: pointer;
transform: translate(0px, 20px);
position:relative;
}
#menuBtn {
border: 5px solid black;
}
p:first-child {
text-decoration: line-through;
}
<p>I am lost</p>
<p>Your are Alive</p>
<div class="trigger">
<div class="menu" id="menuList">
Menu
<div class="items item-div">
One
Two
Three
Four
</div>
</div>
</div>

JQuery category filter breaks when a category is more than 2 words

I am using Jquery to show project categories and filter the projects by which category is selected.
View the code pen here: https://codepen.io/saintasia/pen/dzqZov
HTML:
<body>
<div class="container">
<nav>
<ul>
<li class="current">All projects</li>
<li>Front-end</li>
<li>Back-end</li>
<li>Apps</li>
<li>Design</li>
<li>Testing Testing Testing</li>
</ul>
</nav>
<div id="projects">
<h1 class="heading">All Projects</h1>
<ul id="gallery">
<li class="design"><img src="https://source.unsplash.com/jjtdL443L4w/700x700"></li>
<li class="apps"><img src="https://source.unsplash.com/y1yQQmozTBw/700x700"></li>
<li class="back-end"><img src="https://source.unsplash.com/b18TRXc8UPQ/700x700"></li>
<li class="apps design"><img src="https://source.unsplash.com/klRB1BB9pV8/700x700"></li>
<li class="front-end testing-testing-testing back-end"><img src="https://source.unsplash.com/y1yQQmozTBw/700x700"></li>
<li class="front-end design"><img src="https://source.unsplash.com/1vwwZ-BmmrE/700x700"></li>
<li class="apps"><img src="https://source.unsplash.com/WLOCr03nGr0/700x700"></li>
<li class="back-end"><img src="https://source.unsplash.com/iOykDIkZLQw/700x700"></li>
</ul>
</nav>
</div>
<!-- modal gallery -->
<div class="gallery">
<a class="close" href="#">
<i>
<span class="bar"></span>
<span class="bar"></span>
</i>
</a>
<img src="">
</div>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
}
body {
color: #333;
font-size: 13px;
background: #f4f4f4;
font-family: sans-serif;
overflow:auto;
}
.container {
width: 90%;
max-width: 960px;
margin: 30px auto;
position: relative;
text-align: center;
}
h1 {
margin-bottom: 20px;
text-transform: uppercase;
color: #F39CC3;
}
nav {
display: block;
width: 100%;
}
ul {
list-style: none;
margin-bottom: 20px;
}
nav > ul > li {
display: inline-block;
}
nav > ul > li > a {
text-transform: uppercase;
padding: 4px 10px;
margin-right: 2px;
margin-left: 2px;
text-decoration: none;
color: #27A4DD;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 25px;
border: 1px solid #27A4DD;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.hidden {
display: none;
}
nav > ul > li > a:hover, .current a {
color: #fff;
background-color: #27A4DD;
}
#projects > ul > li {
display: inline-block;
float: left;
margin-right: 10px;
margin-bottom: 5px;
width: 23%;
height: auto;
cursor: pointer;
border-radius: 5px;
/* Padding stays within the width */
box-sizing: border-box;
position: relative;
opacity: 0.7;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#projects > ul > li:hover {
opacity: 1;
}
img {
max-width: 100%;
border-radius: 5px;
}
.gallery {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
padding: 40px 10px;
display: none;
box-sizing: border-box;
}
.gallery > img {
max-height: 100%;
width: auto;
}
.close i {
position: fixed;
top: 10px;
right: 10px;
height: 30px;
width: 30px;
}
.bar {
display: block;
position: absolute;
top: 13px;
float: left;
width: 30px;
border-bottom: 4px solid #fff;
transform: rotate(45deg);
}
.bar:first-child {
transform: rotate(-45deg);
}
#media (max-width: 768px){
#projects > ul > li {
width: 48%;
}
}
#media (max-width: 568px) {
#projects > ul > li {
width: 100%;
}
}
JS:
$(document).ready(function(){
// filter
$('nav a').on('click', function(event){
event.preventDefault();
// current class
$('nav li.current').removeClass('current');
$(this).parent().addClass('current');
// set new heading
$('h1.heading').text($(this).text());
// filter link text
var category = $(this).text().toLowerCase().replace(' ', '-');
// remove hidden class if "all" is selected
if(category == 'all-projects'){
$('ul#gallery li:hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#gallery li').each(function(){
if(!$(this).hasClass(category)){
$(this).hide().addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
// lightbox
$('ul#gallery a').on('click', function(event){
event.preventDefault();
var link = $(this).find('img').attr('src');
$('.gallery img').attr('src', '');
$('.gallery img').attr('src', link);
$('.gallery').fadeIn('slow');
});
// close lightbox
$('.gallery').on('click', function(event){
event.preventDefault();
$('.gallery').fadeOut('slow');
});
});
The problem I am having is that if a category is more than 2 words, it doesn't show the projects with that category. You'll see in the code pen that there is a category called "Testing Testing Testing" and one of the projects has that category assigned to it. But, when you click the Testing Testing Testing category, no projects show up. All of the other categories work however, because they are all only 2 words long.
Any help is greatly appreciated!

Your code break because the .replace(' ', '-') code just replace the first space
if you want to change all space with '-', you should change this code
var category = $(this).text().toLowerCase().replace(' ', '-');
to this
var category = $(this).text().toLowerCase().split(' ').join('-');

CSS Navbar Transition is Smooth on Scroll Down but no Transition at all on Scroll Back Up

I am currently working on a website with a navigation bar at the top of the screen that is initially transparent when you first visit the site, but turns into a white bar with black text the moment you start scrolling down. It also shrinks a little. It has a really nice and smooth transition as it changes it's color and shrinks, but when you scroll back to the top of the page, there is no more smooth transition but rather an instant ugly transition. Actually the changing of the color back to transparent seems okay but the resize of the bar lacks the transition. I uploaded a GIF so you can see exactly what's the problem.
There is a second problem I would like to ask for. As you can see in the GIF, there is an underline animation on text hover, however, I cannot get it to work on the white navbar. I want that underline to become black, just like the text and shrink with the rest of the navbar.
Here is the GIF:
https://media.giphy.com/media/5jYbvzN9OzaVm3IRE6/giphy.gif
Also the CSS:
/* -=-=-=-=-= FONT IMPLEMENTATION =-=-=-=-=- */
#import url('https://fonts.googleapis.com/css?family=Quicksand:300|Roboto:100');
/* -=-=-=-= END FONT IMPLEMENTATION =-=-=-=- */
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Roboto",sans-serif;
font-weight: lighter;
}
header.index {
width: 100%;
height: 100vh;
background: url(../res/images/back.png) no-repeat 50% 50%;
background-size: cover;
}
header.page1 {
width: 100%;
height: 100vh;
background: url(../res/images/test.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
}
.logoimg {
position: fixed;
display: inline-block;
float: left;
width: 235px;
height:54px;
margin: 37px 80px;
transition: 0.5s ease-in-out;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
transition: 0.5s ease-in-out;
}
nav ul {
line-height: 100px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 50px;
transition: 0.5s ease-in-out;
}
nav ul li {
display: inline-block;
padding: 16px 20px;
transition: 0.5s ease-in-out;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 24px;
transition: 0.5s ease-in-out;
}
nav ul li a.current{
font-weight: 600;
}
nav.scrolled{
background: #fff;
min-height: 20px;
line-height: 40px;
transition: 0.5s ease-in-out;
}
nav.scrolled ul li a{
text-decoration: none;
color: #000;
font-size: 20px;
line-height: 40px;
transition: 0.5s ease-in-out;
}
nav.scrolled img{
width: 180px;
height: 41px;
margin: 27px 80px;
transition: 0.5s ease-in-out;
}
/* -=-=-=-=-= MENU ITEM HOVER ANIMATION =-=-=-=-=- */
.menu a {
transition: color 0.1s, background-color 0.1s;
}
.menu a {
position: relative;
display: block;
transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
color: #fff;
}
.menu a::before {
content: '';
display: block;
position: absolute;
bottom: 24px;
left: 0;
height: 2px;
width: 100%;
background-color: #fff;
transform-origin: right top;
transform: scale(0, 1);
transition: color 0.1s,transform 0.2s ease-out;
}
.menu a:active::before {
background-color: #fff;
}
.menu a:hover::before, a:focus::before {
transform-origin: left top;
transform: scale(1, 1);
}
.menu.scrolled {
color: #000;
background-color:
}
/* -=-=-=-=-= END MENU ITEM HOVER ANIMATION =-=-=-=-=- */
And the JS:
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('scrolled');
}
else {
$('nav').removeClass('scrolled');
}
})
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop()> 2) {
$('.logo img').attr('src', 'res/logos/main.png');
}
if ($(this).scrollTop() < 2) {
$('.logo img').attr('src', 'res/logos/main_light.png');
}
});
});
And the important HTML:
<header class="index">
<nav class="navbar">
<div class="logo">
<a href="#">
<img class="logoimg" src="res/logos/main_light.png">
</a>
</div>
<div class="menu">
<ul>
<li><a class="current" href="index.html">Home</a></li>
<li>Company</li>
<li>Services</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
Note that .scrolled is the one that changes the navbar once you scrolled. May your road lead you to warm sands!

You're setting the transition for the a elements twice. First as .menu a and then as nav ul li a. The nav bar animates when scrolling up, but the transition lasts 0.1s, as declared for the selector .menu a.
You can either change .menu a to .menu nav ul li a or redesign your classes.
For the underline animation, just add the nav.scrolled selector to the classes you already have, for instance: nav.scrolled .menu a::before and change the background color. You will probably also need to re position the ::before element.

set flip animation for main menu item on hover

I have a demo website. how can I get the menu hover effect as in the reference website given below. I have fiddled little bit here, but I didn't get the transition when I hover on the menu item
ref site :- click here
hover on the top menu and see the effect. how do I get that effect ?
see the code here till I have done
HTML
<li>
<div class="header-navigation-item-state-wrapper">
<div class="white">
<h4 class="header-white">Collections</h4>
</div>
<div class="black">
<h4 class="header-black">Collections</h4>
</div>
</div>
</li>
CSS
* {
background:yellow
}
li {
list-style:none;
}
.header-black {
background:#000;
color:#fff;
padding:10px;
display:block
}
.black {
display:none;
}
.header-white {
background:#fff;
color:#000;
padding:10px;
display:block
}
JQuery
$(document).ready(function () {
$("li").mouseenter(function () {
$(".white").css('display', 'none');
$(".black").css('display', 'block');
});
$("li").mouseleave(function () {
$(".white").css('display', 'block');
$(".black").css('display', 'none');
});
})

You can use 3d effect following way.
.menu li {
display: inline-block;
}
.menu li a {
color: #fff;
display: block;
text-decoration: none;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
/* animation domination */
.threed {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
/* complete the animation! */
.threed:hover .box,
.threed:focus .box {
transform: translateZ(-25px) rotateX(90deg);
}
.box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.white {
transform: rotatex(0deg) translatez(25px);
background: white;
color: black;
}
.black {
transform: rotatex(-90deg) translatez(25px);
color: white;
background: black;
}
.white, .black {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 15px 10px;
pointer-events: none;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="menu">
<li><a href="/" class="threed">
Home
<span class="box">
<span class="white">Home</span>
<span class="black">Home</span>
</span>
</a></li>
</ul>
You can change as per your requirement.
Hope it helps.