Develop Reference

Navbar scroll effect not working when having background color

I have a navbar having a gradient type background(slightly black, to transparent).
I wanted the navbar to turn completely black when scrolling, and I wrote the necessary JavaScript code, but the color changes only when I remove that background color gradient from the CSS, otherwise, it doesn't work. Is there a solution for this?
HTML Code:
<section id="header" class="headerr">
<img src="images/logo.png" class="logo">
<div>
<ul id="navbar">
<li><a class="active" href="why.html">Why Snap Smile</a></li>
<li>Solutions</li>
<li>Pricing</li>
<li>About</li>
<li>Gallery</li>
<li><i class="fa-solid fa-headset fa-2x"></i></li>
</ul>
</div>
CSS code:
body {
font-family: 'Montserrat', sans-serif;
width: 100%;
margin: 0;
background-color: #121212;
}
/* Header Section */
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 80px;
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0.6629026610644257) 0%, rgba(9,9,121,0) 57%);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
.headerr__black{
background-color: #121212;
}
#navbar {
display: flex;
align-items: center;
justify-content: space-between;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 1rem;
font-weight: 600;
color: #ffffff;
transition: 200ms ease-in-out;
}
#navbar li a:hover,
#navbar li a.active {
color: #e50914;
}
#navbar li a.active::after,
#navbar li a:hover::after {
content: "";
width: 30%;
height: 3px;
background: #e50914;
position: absolute;
bottom: -6px;
left: 20px;
}
.logo {
width: 10rem;
}
JavaScript Code:
const nav=document.getElementById('header');
window.addEventListener('scroll',function(){
if(window.scrollY >= 100){
nav.classList.add('headerr__black');
}
else{
nav.classList.remove('headerr__black');
}
});

I think this may happen because #header selector (id selector) has a higher priority than .header__black (class selector).
Can you try to update your style, so the .headerr__black styles have higher priority ? For example:
/*
* Now the selector specificity is {id} + {class},
* Which is higher than just {id} for #header
*/
#header.headerr__black {
background-color: #121212;
}
Doc - https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

What is a clean way to toggle a slide in menu?

Okay so I am working on my new personal website and I have came to making the off canvas menu toggable. How cna I do so?
So far I have:
var mainNav = document.getElementById('menu');
var navToggle = document.getElementById('menu-toggle');
mainNav.classList.add('collapsed');
function mainNavToggle() {
mainNav.classList.toggle('collapsed');
}
navToggle.addEventListener('click', mainNavToggle);
.collapsed {
margin-left: -330px;
}
.navigation {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 300px;
height: 100%;
color: #212121;
background-color: #FFFFFF;
transition: all ease-in-out 200ms;
box-shadow: 3px 0px 30px rgba(0, 0, 0, 0.4);
}
.navigation ul {
display: flex;
flex-direction: column;
padding: 90px 0 0 30px;
}
.navigation li {
margin-bottom: 30px;
}
.navigation a {
display: inline-block;
font-size: 16px;
font-weight: 500;
}
.navigation i {
vertical-align: top;
margin-right: 10px;
}
.navigation .double-line {
display: inline-block;
line-height: 1.45;
}
.navigation .double-line span {
display: block;
font-size: 12px;
opacity: 0.3;
}
.clicked span {
background-color: #000;
}
.menu-toggle {
background-color: transparent;
border: 0px;
outline: 0px;
cursor: pointer;
position: relative;
z-index: 10;
}
.menu-toggle span {
display: block;
width: 18px;
height: 2px;
margin: 4px;
background-color: #FFFFFF;
}
<button class="menu-toggle" id="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<nav class="navigation" role="navigation" id="menu">
<ul>
/* Menu contents */
</ul>
</nav>
But with this code when the page loads you can see the menu being swept to the left, I dont want this.
How can I make my toggle button change colour when the menu is open?

Adding the class collapsed to the nav and removing the initial toggle solves your blinking issue! And toggling an active class on the toggle gets you a grey toggle when the $menu is open! The transition CSS property is optional to make the bg transition from transparent to grey look smooth.
Fiddle: https://jsfiddle.net/mbs1kymv/1/
JS:
var $menu = document.getElementById('menu');
var $toggle = document.getElementById('menu-toggle');
$toggle.addEventListener('click', function()
{
$menu.classList.toggle('collapsed');
$toggle.classList.toggle('active');
});
HTML:
<nav class="navigation collapsed" role="navigation" id="menu"> ... </nav>
CSS:
.menu-toggle {
transition: background-color 0.25s;
}
.menu-toggle.active {
background-color: #CCC;
}

toggleClass and slideToggle bug

The main question I have concerns toggleClass(). Since I'm not the greatest with jQuery, I'm not sure what to search for. Here is my code:
JS
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('.quickLinks').click(function() {
var options = {direction: 'right'};
var duration = 400;
jQuery('#quickLinks').slideToggle(options, duration);
jQuery('.quickLinks').toggleClass('sidebar-blue');
});
jQuery('.quickLinks').hover(function() {
jQuery(this).css({
'border-top-color': '#1C8BE6',
'color': '#1C8BE6'
});
}, function() {
jQuery(this).css({
'border-top-color': '#003663',
'color': '#fff'
});
});
});
CSS
/** Style for the button & div **/
.sidebar {
position: fixed;
bottom: 0;
z-index: 100;
width: 100%;
display: block;
}
.quickLinks, #quickLinks {
float: right;
margin-left: 100%;
width: 230px;
}
.quickLinks {
cursor: pointer;
padding: 10px 0px 5px;
background-color: #003663;
white-space: nowrap;
text-align: center;
font-family: 'Just Another Hand', Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 26px;
line-height: 26px;
color: #fff;
border-top: 3px solid #003663;
border-radius: 5px 5px 0px 0px;
}
.quickLinks.sidebar-blue {
line-height: 20px;
color: #1C8BE6 !important;
border-top: 3px solid #1C8BE6 !important;
}
#quickLinks {
position: relative;
display: none;
background-color: #003663;
right: 0px;
z-index: 100;
}
#quickLinks > ul {
list-style-type: none;
float: right;
margin: 5px 10px;
padding-left: 0px;
}
#quickLinks > ul > a > li {
color: #fff;
white-space: nowrap;
}
#quickLinks > ul > a > li:hover {
color: #1C8BE6;
}
When I expand the menu, the head text is blue. After clicking it again to slide down the menu, the "Quick Links" text remains blue until you move the mouse. I'd like it to change either right when it's clicked again or once the sliding transition is complete.
The other question I have is whenever clicking the second time, the menu jumps. It goes up a few pixels before returning down. It doesn't happen on the actual site I'm using this for, but it does in jsfiddle. I'd just like to know why.
Here's where I'm at so far :
Fiddle

Javascript Content Slider

Before I put the html and css, I am having 2 problems, please keep in my that I am almost a complete amateur at html and css, and have no idea what the javascript means.
Problems:
My 1st problem is that the content sider, doesnt slide far enough to the next content, but instead when clicking the button only brings the content over halfway (you will see what I mean when you paste the html and css into a page).
My second problem is that the buttons are meant to be horizontal with eachother, and I also want to add more in the future
so if someone could tell me how to do that in elaboration with the javascript problem that would be great!
here is the working demo jsfiddle please check-out
Working code
Thank-you in Advance..!!
// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
#wrapper {
width: 5000px;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
.content {
float: left;
width: 1250px;
height: 600px;
white-space: normal;
background-repeat: no-repeat;
}
#itemOne {
background-color: #ADFF2F;
background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
background-color: #FF7F50;
background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
background-color: #1E90FF;
background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
background-color: #DC143C;
background-image: url("http://www.kirupa.com/images/graySquare.png");
}
#contentContainer {
width: 98%;
height: 600px;
border: 5px black solid;
overflow: hidden;
margin-left: 1%;
margin-right: 1%;
}
#navLinks {
text-align: center;
width: 22.5%;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: #CCCCCC;
padding: 100px;
border-radius: 10%;
border: white 5px solid;
}
#navLinks ul li:hover {
background-color: #FFFF00;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
<body bgcolor='black'>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-550px"></li>
<li class="itemLinks" data-pos="-1100px"></li>
<li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>
</body>

The main areas to update;
1) your "#contentContainer". This is basically the window of your slider. The height and width need to be updated to match the slider items.
2) the "data-pos" values of your list items. This should be the same as their width * their index starting at 0 and negative.
3) the list container is too narrow. make it as wide as your #contentContainer.
CSS Changes:
#contentContainer {
width: 1250px;
height: 600px;
}
#navLinks {
width:1250px;
}
#navLinks ul li {
width:80px;
}
HTML change:
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-1250px"></li>
<li class="itemLinks" data-pos="-2500px"></li>
<li class="itemLinks" data-pos="-3750px"></li>
https://jsfiddle.net/partypete25/9gpyL6o1/7/embedded/result/

I assume that the CSS posted in the bottom of your question is the content of the main.css file. As matt points out in the comments, experiment with changing the sizes of the divs. Particularly the #wrapper, which is specified by it's ID using tha hash tag (#):
#wrapper {
width: 5000px;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
And referenced in the javascript here:
var wrapper = document.querySelector("#wrapper");
where it is assigned to the variable wrapper. It is 5000 pixels wide. The typical desktop web screen is around 1200 - 1700 pixels wide, I believe, for reference. This is about the size you want the .content, referenced by class using a . and what holds each displayed "slide" to be - keeping in mind that a responsive site that displays properly on phones and other mobile devices would need to have variations on the size using #media queries.
So I would add visible css borders where applicable (for development and to be removed later) and change around the numerical variables (data-pos, #wrapper and .container sizes) to find the optimal solution. As mentioned above, jsfiddle is a great resource, whether or not you're needing to share publicly.
For the navlinks, which should be displayed in a row, try the following CSS on the div that holds the list (<ul>):
#navLinks {
text-align: center;
width: 90.5%;
border:1px solid white;
}
The border:1px solid white; will help you to see where the div is. Then experiment with a smaller padding size in #navLinks ul li to be sure you have room on the page to display horizontally.
I believe the last step is to adjust the <li class="itemLinks" data-pos="0px"></li>, where the data-pos attributes are just holding information for the javascript to use in the changePosition function, which is the last few lines of the javascript.
eloquentjavascript.net is a wonderful, free source to learn all of this.

<!DOCTYPE html>
<html>
<head>
<title>Dinosaurs 4 Kids!</title>
<style>
#wrapper {
width: 98%;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
.content {
float: left;
width: 100%;
height: 600px;
white-space: normal;
background-repeat: no-repeat;
background-position: center;
}
#itemOne {
background-color: #ADFF2F;
background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
background-color: #FF7F50;
background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
background-color: #1E90FF;
background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
background-color: #DC143C;
background-image: url("http://www.kirupa.com/images/graySquare.png");
}
#contentContainer {
width: 98%;
height: 600px;
border: 5px black solid;
overflow: hidden;
margin-left: 1%;
margin-right: 1%;
}
#navLinks {
text-align: center;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: #CCCCCC;
padding: 20px;
border-radius: 10%;
border: white 5px solid;
}
#navLinks ul li:hover {
background-color: #FFFF00;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
</style>
</head>
<body bgcolor='black'>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-550px"></li>
<li class="itemLinks" data-pos="-1100px"></li>
<li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>
<script>
// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
</script>
</body>
</html>

Custom Dropdown menu not working with links

I'm trying to make a custom menu using a tutorial I found.
The problem I'm running into is not the implementation, but something that stops me from clicking through links. When, I have the menu "opened" and when I click on a say link, it just closes the menu and for a quick second I see it highlight the whole box instead of the link.
Here are a few screenshots. You can hover over the links (they turn purple when hovered), but when you click on an individual link it tends to just click out of the whole menu instead of sending you to the said page. But when, I hover over it I can see that it is showing the link in the bottom left hand corner of my browser. I just can't seem to figure out what is happening with the click out instead of the url sending you to the page.
http://cl.ly/image/0S2F2c3h3g1o
(hover screen shot)
http://f.cl.ly/items/3P1h27323B203E2J0N41/clickout.png
(clickout)
When I try to click on any link, I just get this blue box, and it closes the menu instead of sending you to the linked page.
This is the HTML that I have hooked up
<!-- MOBILE MENU / -->
<nav id="mobile-menu">
<div id="mobmenu" class="dropdown-menu" tabindex="1">
<ul class="dropdown" tabindex="1">
<li>ABOUT</li>
<li>WORK</li>
<li>NOTES</li>
</ul>
</div>
</nav>
<!-- / MOBILE MENU -->
This is the Javascript.
function DropDown(el) {
this.dd = el;
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var dd = new DropDown( $('#mobmenu') );
$(document).click(function() {
// all dropdowns
$('.dropdown-menu').removeClass('active');
});
});
</script>
And the CSS.
#mobile-menu {
width: 320px;
}
.dropdown-menu {
background: #050607 url(images/menu_closed.png) no-repeat center top;
border: none;
color: #FFF;
cursor: pointer;
height: 50px;
font-weight: bold;
margin-top: 17px;
outline: none;
position: fixed;
-webkit-appearance: none;
width: 320px;
z-index: 9999;
}
.dropdown-menu::after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -6px;
}
/* ACTIVE STATE */
.dropdown-menu .dropdown {
background: #050607;
height: 1000px;
list-style: none;
overflow: hidden;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
opacity: 0.0;
}
.dropdown-menu .dropdown li {
position: relative;
top: 10px;
z-index: 99;
}
.dropdown-menu .dropdown li a {
border-top: 1px solid #1f1f1f;
color: #FFF;
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 30px;
font-weight: 200;
letter-spacing: 8px;
pointer-events: visible;
padding: 15px 25px 15px 25px;
text-align: center;
text-decoration: none;
z-index: 9999999999999999999999;
}
.dropdown-menu .dropdown li:nth-child(5) {
font-size: 15px;
font-weight: 100;
letter-spacing: 2px;
text-align: center;
}
.dropdown-menu .dropdown li:hover a { background: #050607; color: #605e90; }
.dropdown-menu.active .dropdown {
-moz-animation: fadein .3s linear;
-webkit-animation: fadein .3s linear;
-ms-animation: fadein .3s linear;
animation: fadein .3s linear;
pointer-events: auto;
opacity: 1.0;
z-index: 999999 !important;
}
.dropdown-menu.active:active {
pointer-events: auto;
}
.dropdown-menu.active::after {
border-color: #000;
margin-top: -3px;
}
.dropdown-menu.active {
background: #050607 url(images/menu_open.png) no-repeat center top;
outline: none;
}
Thanks! :3

After the obj.opts click event handler fires, the obj.dd click event handler will also fire. To prevent this, call the stopPropagation function of the event object passed to the handler.
See here for a working example: http://jsfiddle.net/hwTUZ/1/