We Keep Coding

How can I change tag div to tag button to activate menu with js function?

I have a side menu that appears when I click on a div tag. Everything works fine. However I would like to change <div id="togglek"></div> to <button id="togglek" onclick"MyFunction()"></button> I tried, but with the button tag the menu doesn't appear.
Is there any way to change from div to button? I'm sure the script will need to be changed a bit, but I don't know how. Sorry, I'm new and trying to learn as much as possible.
I appreciate any response, thanks.
const togglek = document.getElementById('togglek');
const sidenav = document.getElementById('sidenav');
document.onclick = function(e){
if(e.target.id !== 'sidenav' && e.target.id !== 'togglek' ) {
togglek.classList.remove('btnactv');
sidenav.classList.remove('active');
overlay.classList.remove('bgover');
}
}
togglek.onclick = function(){
togglek.classList.toggle('btnactv');
sidenav.classList.toggle('active');
overlay.classList.toggle('bgover');
}
/*Overlay*/
#overlay {
position: fixed;
height: 100vh;
top: 0;
background: #000;
z-index: 999;
transition: 0.3s;
}
#overlay.bgover {
left: 0px;
width: 100%;
background: #000000d1;
}
/*Toggle Button*/
#togglek {
display: flex;
align-content: center;
justify-content: center;
align-items: flex-end;
font-size: 18px;
margin: 10px;
padding: 10px;
position: absolute;
top: 10px;
right: 20px;
border: 1px solid black;
}
#togglek::before {
font-family: fontAwesome;
content:'Open';
color: #000;
}
#togglek.btnactv::before {
font-family: fontAwesome;
content:'Close';
color: #000;
z-index:1000;
}
/*Sidebar*/
.sidenav_box {
margin-top: 5%;
padding: 25px;
}
#sidenav {
position: fixed;
top: 0;
left:-100%;
width: 80%;
height: 100vh;
background: #fbfbfb;
transition: 0.3s;
z-index: 1000;
}
#sidenav.active {
left: 0px;
width: 80%;
background: #fbfbfb;
box-shadow: 5px 0px 15px 0px #00000021;
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.user_menu.item:hover > a {
color: #2e323a;
}
<div id="togglek"></div>
<div id="sidenav">
<div class="sidenav_box">
<div class="user_menu header">
<span class="display name">Hello User</span>
<span class="display mail">example#gmail.com</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
<div id="overlay"></div>

is this what u mean?
const togglek = document.getElementById('togglek');
const sidenav = document.getElementById('sidenav');
document.onclick = function(e){
if(e.target.id !== 'sidenav' && e.target.id !== 'togglek' ) {
togglek.classList.remove('btnactv');
sidenav.classList.remove('active');
overlay.classList.remove('bgover');
}
}
function pressToShow() {
togglek.classList.toggle('btnactv');
sidenav.classList.toggle('active');
overlay.classList.toggle('bgover');
}
/*Overlay*/
#overlay {
position: fixed;
height: 100vh;
top: 0;
background: #000;
z-index: 999;
transition: 0.3s;
}
#overlay.bgover {
left: 0px;
width: 100%;
background: #000000d1;
}
/*Toggle Button*/
#togglek {
display: flex;
align-content: center;
justify-content: center;
align-items: flex-end;
font-size: 18px;
margin: 10px;
padding: 10px;
position: absolute;
top: 10px;
right: 20px;
border: 1px solid black;
}
/*Sidebar*/
.sidenav_box {
margin-top: 5%;
padding: 25px;
}
#sidenav {
position: fixed;
top: 0;
left:-100%;
width: 80%;
height: 100vh;
background: #fbfbfb;
transition: 0.3s;
z-index: 1000;
}
#sidenav.active {
left: 0px;
width: 80%;
background: #fbfbfb;
box-shadow: 5px 0px 15px 0px #00000021;
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.user_menu.item:hover > a {
color: #2e323a;
}
<button id="togglek" onclick=pressToShow()>PRESS TO SHOW</div>
<div id="sidenav">
<div class="sidenav_box">
<div class="user_menu header">
<span class="display name">Hello User</span>
<span class="display mail">example#gmail.com</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
<div id="overlay"></div>

It seems your issue is that you aren't defining a function of myFunction you can simply change the div to a button and use the existing onclick code and it still works as shown:
const togglek = document.getElementById('togglek');
const sidenav = document.getElementById('sidenav');
document.onclick = function(e){
if(e.target.id !== 'sidenav' && e.target.id !== 'togglek' ) {
togglek.classList.remove('btnactv');
sidenav.classList.remove('active');
overlay.classList.remove('bgover');
}
}
togglek.onclick = function(){
togglek.classList.toggle('btnactv');
sidenav.classList.toggle('active');
overlay.classList.toggle('bgover');
}
/*Overlay*/
#overlay {
position: fixed;
height: 100vh;
top: 0;
background: #000;
z-index: 999;
transition: 0.3s;
}
#overlay.bgover {
left: 0px;
width: 100%;
background: #000000d1;
}
/*Toggle Button*/
#togglek {
display: flex;
align-content: center;
justify-content: center;
align-items: flex-end;
font-size: 18px;
margin: 10px;
padding: 10px;
position: absolute;
top: 10px;
right: 20px;
border: 1px solid black;
}
#togglek::before {
font-family: fontAwesome;
content:'Open';
color: #000;
}
#togglek.btnactv::before {
font-family: fontAwesome;
content:'Close';
color: #000;
z-index:1000;
}
/*Sidebar*/
.sidenav_box {
margin-top: 5%;
padding: 25px;
}
#sidenav {
position: fixed;
top: 0;
left:-100%;
width: 80%;
height: 100vh;
background: #fbfbfb;
transition: 0.3s;
z-index: 1000;
}
#sidenav.active {
left: 0px;
width: 80%;
background: #fbfbfb;
box-shadow: 5px 0px 15px 0px #00000021;
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.user_menu.item:hover > a {
color: #2e323a;
}
<button id="togglek"/>
<div id="sidenav">
<div class="sidenav_box">
<div class="user_menu header">
<span class="display name">Hello User</span>
<span class="display mail">example#gmail.com</span>
</div>
<hr class="solid">
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
<div id="overlay"></div>

Seems to be working for me. Here's the jsfiddle
In the html I just changed
<div id="togglek"></div>
to
<button id="togglek" onclick="MyFunction()"></button>
And in the js:
togglek.onclick = function(){
togglek.classList.toggle('btnactv');
sidenav.classList.toggle('active');
overlay.classList.toggle('bgover');
}
to
function MyFunction() {
togglek.classList.toggle('btnactv');
sidenav.classList.toggle('active');
overlay.classList.toggle('bgover');
}

Incorporate a function for all the buttons with specific class using vanilla JS

I want to put the function in a loop to show hide all buttons. It works if I use it without a loop on a particular button, but I cannot incorporate it in a loop properly.
It says: Uncaught TypeError: Cannot read properties of undefined (reading 'style')
//jshint esversion: 6
var dt = new Date();
document.getElementById("datetime").innerHTML = dt.toLocaleDateString('default', {
day: 'numeric',
month: 'long',
year: 'numeric'
});
var numberOfbuttons = document.querySelectorAll(".r").length;
console.log(numberOfbuttons);
for (i = 0; i < numberOfbuttons; i++) {
document.querySelectorAll(".r")[i].onmouseover = function() {
mouseOver([i]);
};
document.querySelectorAll(".r")[i].onmouseout = function() {
mouseOut([i]);
};
}
function mouseOut(key) {
document.querySelectorAll(".r")[key].style.opacity = 0;
}
function mouseOver(key) {
document.querySelectorAll(".r")[key].style.opacity = 1;
}
* {
margin: 0;
padding: 0;
}
body {
background: url(img/bg4.jpg);
background-size: cover;
}
img {
border-radius: 100%;
width: 150px;
height: 150px;
box-shadow: 8px 8px 13px #222;
border: solid 3px #606f46;
}
span {
background: #beebb3;
border-color: #606f46;
border-radius: 22px 0 22px 0;
padding: 2px;
border-style: solid;
margin-top: 5px;
box-shadow: 4px 4px 13px #222;
width: 145px;
color: green;
}
h1 {
/* width: 580px; */
font-family: 'Sofia', cursive;
font-size: 3.4rem;
text-align: center;
margin: 10px auto;
padding-top: 15px;
padding-bottom: 15px;
}
h2 {
font-family: 'Sofia', cursive;
font-size: 2rem;
}
#btn1 {
opacity: 0;
}
#btn2 {
opacity: 0;
}
.r {
background-image: url('img/refresh2.png');
background-size: contain;
}
.refresh {
outline: none;
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
right: 3px;
top: 108px;
}
#no1 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
}
#no2 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 9px;
}
#no3 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 8px;
}
#no4 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 9px;
}
.container1 {
width: 580px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
text-align: center;
margin: auto;
}
.container2 {
width: 700px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.container3 {
width: 1100px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.container4 {
width: 1300px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.tree {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
position: relative;
}
.white_bg {
background-color: white;
}
.container1_row4 {
display: flex;
justify-content: center;
margin-left: 240px;
position: relative;
right: 10px;
}
.container2_row4 {
display: flex;
justify-content: center;
margin-left: 35px;
margin-right: 150px;
position: relative;
right: 25px;
}
.container3_row4 {
display: flex;
justify-content: center;
margin-right: 240px;
}
.level1 {
height: 3px;
width: 110px;
border-style: hidden solid solid solid;
border-width: thick;
margin-left: 230px;
}
.oblique1 {
width: 88px;
transform: rotate(-30deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.oblique2 {
width: 88px;
transform: rotate(30deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.oblique_row {
display: flex;
margin-left: 200px;
margin-top: 17px;
}
.line_container2 {
display: flex;
}
.first_arrow_row2 {
position: relative;
right: 125px;
}
.second_arrow_row2 {
position: relative;
right: 150px;
}
.second_arrow_row2>.oblique_row>.oblique1 {
border-style: hidden;
}
.line_container3 {
display: flex;
}
.line2 {
width: 45px;
transform: rotate(90deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.first_arrow_row3 {
position: relative;
right: 165px;
}
.second_arrow_row3 {
position: relative;
right: 295px;
}
.third_arrow_row3 {
position: relative;
right: 295px;
}
.third_arrow_row3>.oblique_row>.line2 {
position: relative;
left: 70px;
}
.second_arrow_row3>.oblique_row>.line2 {
position: relative;
left: 70px;
}
.first_arrow_row3>.oblique_row {
position: relative;
right: 25px
}
.first_arrow_row3>.level1 {
position: relative;
left: 60px
}
.first_arrow_row3>.oblique_row>.oblique1 {
width: 155px;
transform: rotate(344deg);
}
.first_arrow_row3>.oblique_row>.oblique2 {
width: 155px;
transform: rotate(16deg);
}
#datetime {
text-align: center;
}
<link rel="shortcut icon" href="img/family-tree.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia&display=swap" rel="stylesheet">
<div class="container1">
<h1>_ _ _ Family tree _ _ _</h1>
<div id="no1">
<div class="tree homer">
<img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
<button id="btn1" class="refresh r"> </button>
<span>
Homer Simpson
</span>
</div>
<div class="tree marge">
<img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
<button id="btn2" class="refresh r"></button>
<span>
Marge Simpson
</span>
</div>
</div>
<div class="line_container1">
<div class="level1"></div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
</div>
<div class="container2">
<div id="no2">
<div class="tree">
<img src="https://openpsychometrics.org/tests/characters/test-resources/pics/S/2.jpg">
<button id="btn3" class="refresh r"></button>
<span>
Bart Simpson
</span>
</div>
<div class="tree">
<img src="https://mella187.github.io/Cartoon-Hero/img/lisa-avatar.jpg">
<button id="btn4" class="refresh r"></button>
<span>
Lisa Simpson
</span>
</div>
<div class="tree">
<img src="https://i.pinimg.com/originals/e5/4a/bc/e54abc44b68d6b2770696b789b20dafa.png">
<button id="btn5" class="refresh r"></button>
<span>
Abraham Simpson
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://icons.iconarchive.com/icons/jonathan-rey/simpsons/256/Maggie-Simpson-icon.png">
<button id="btn6" class="refresh r"></button>
<span>
Maggie Simpson
</span>
</div>
</div>
<div class="line_container2">
<div class="first_arrow_row2">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
<div class="second_arrow_row2">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
</div>
</div>
<div class="container3">
<div id="no3">
<div class="tree">
<img class="white_bg" src="https://cdn.quotesgram.com/img/7/98/1464708000-Ned_Flanders.png">
<button id="btn7" class="refresh r"></button>
<span>
Ned Flanders
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://i.pinimg.com/originals/b7/4f/ae/b74faea8de35d22b703b6ae32f891a92.png">
<button id="btn8" class="refresh r"></button>
<span>
Elizabeth Hoover
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/3/3a/Seymour_Skinner.png/revision/latest/top-crop/width/360/height/360?cb=20200804144332&path-prefix=protagonist">
<button id="btn9" class="refresh r"></button>
<span>
Seymour Skinner
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://www.personality-database.com/profile_images/20160.png">
<button id="btn10" class="refresh r"></button>
<span> Edna Krabappel
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/b/b4/Barnild_Gumble.png/revision/latest/top-crop/width/360/height/360?cb=20160402113506&path-prefix=protagonist">
<button id="btn11" class="refresh r"></button>
<span>
Barney Gumble
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/simpsons/images/d/d5/Patty_Bouvier1.png/revision/latest/top-crop/width/360/height/360?cb=20201222215313">
<button id="btn12" class="refresh r"></button>
<span>
Selma Bouvier
</span>
</div>
</div>
<div class="line_container3">
<div class="first_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="line2"></div>
<div class="oblique2"></div>
</div>
</div>
<div class="second_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="line2"></div>
</div>
</div>
<div class="third_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="line2"></div>
</div>
</div>
</div>
</div>
<div class="container4">
<div id="no4">
<div class="container1_row4">
<div class="tree">
<img src="https://www.canncentral.com/wp-content/uploads/2019/09/Kent_Brockman-Cannabis-1.jpg">
<button id="btn13" class="refresh r"></button>
<span>
Kent Brockman
</span>
</div>
<div class="tree">
<img src="https://untappd.akamaized.net/site/beer_logos_hd/beer-1158277_7220b_hd.jpeg">
<button id="btn14" class="refresh r"></button>
<span>
Mayor Quimby
</span>
</div>
<div class="tree">
<img src="https://i.pinimg.com/474x/8e/a1/2b/8ea12bd79870a03994fbf65f63baaa92--school-pictures-sideshow.jpg">
<button id="btn15" class="refresh r"></button>
<span>
Sideshow Bob
</span>
</div>
</div>
<div class="container2_row4">
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/8/81/Wiggum_with_coffee.png/revision/latest/top-crop/width/360/height/360?cb=20160322214733&path-prefix=protagonist">
<button id="btn16" class="refresh r"></button>
<span>
Clancy Wiggum
</span>
</div>
</div>
<div class="container3_row4">
<div class="tree">
<img src="https://www.kindpng.com/picc/m/394-3940977_los-simpson-nikki-mckenna-hd-png-download.png">
<button id="btn17" class="refresh r"></button>
<span>
Nikki McKenna
</span>
</div>
<div class="tree">
<img src="https://topicimages.mrowl.com/large/owl/thesimpsons/characters/milhousevanhou_1.jpg">
<button id="btn18" class="refresh r"></button>
<span>
Milhouse Van Houten
</span>
</div>
</div>
</div>
</div>
<div class="datetime">
<h2 id="datetime"></h2>
</div>
<!-- script loaded here -->
I want to put the function in a loop to show hide all buttons. It works if I use it without a loop on a particular button, but I cannot incorporate it in a loop properly.
It says: Uncaught TypeError: Cannot read properties of undefined (reading 'style')

your calling it by mouseOut([i]); instead of mouseOut(i); (no need to wrap it as an array)
and the i changes in the loop each time, so at the end you have i == 18. and when the event callback is called the i is still 18. you can do something like document.querySelectorAll(".r")[i].onmouseover = mouseOver.bind(null, i);
Probably if you convert the NodeList to a proper Array the code is cleaner and less prone to errors. something like:
Array.from(document.querySelectorAll(".r"))
.forEach(el => {
// I'd rather user el.addEventListener("mouseover",...
el.onmouseover = () => el.style.opacity = 0;
el.onmouseout = () => el.style.opacity = 1;
});

Setting background color for Navigation Bar on page load and when page is scrolled

When page loads, the background color of my navigation is transparent and when the page is scrolled background color of the navigation bar changes to the set color; its working fine on desktop view but when I minimize the window to mobile view, background color of the navigation bar remains transparent too BUT when I click the toggle button to open the navigation List items it still remains transparent, making it impossible to see the List Items.
Please how can I make the background color of navigation bar in mobile view to also be transparent on page load and when the toggle button is clicked, the background color of the nav bar changes?
Just as it is obtain in desktop view.
Here is my Javascript, CSS and HTML
<script type="text/javascript">
$(window).scroll(function () {
if ($(window).scrollTop() >= 50) {
$('.navbar').css('background', '#32657c');
$('.nav-link').css('color', '#eeeeee');
$('.navbar-brand').css('color', '#eeeeee');
$('#newclients').css('color', '#eeeeee');
$('#newclients').css('border-color', '#eeeeee');
$('#newclients').css('background', '#32657c');
} else {
$('.navbar').css('background', 'transparent');
$('.nav-link').css('color', '#011B33');
$('.navbar-brand').css('color', '#011B33');
$('#newclients').css('border-color', '#32657c');
$('#newclients').css('color', '#011B33');
$('#newclients').css('background', 'transparent');
}
});
</script>
<style type="text/css">
.wrapper {
background-repeat: no-repeat;
height: 1000px;
background-position: center;
background-size: cover;
overflow: hidden;
position: relative;
}
.top {
height: 100%;
background-size: cover;
background-color: rgb(245, 245, 245);
width: 100%;
z-index: 100;
}
.navbar-nav {
margin-left: auto;
}
#navbarNav li a {
color: #eeeeee;
font-family: 'Be Vietnam', sans-serif;
font-size: 11pt;
font-weight: bolder;
}
.nav-item {
float: right;
}
.navbar-nav .active {
color: #eeeeee;
}
#navbarNav li a::after:hover {
color: #eeeeee;
}
.navbar-brand:hover {
color: #eeeeee;
}
#media(min-width:992px) {
.col-md-6:not(:first-child) {
}
.col-md-6:not(:last-child) {
border-right: 1px solid #200662;
border-left: 1px;
}
.form-horizontal {
line-height: 1.33;
letter-spacing: -.5px;
margin-bottom: 5px;
margin-top: 0%;
}
}
#btnstart {
border-radius: 5px;
background-color: #32657c;
font-weight: 500;
font-size: 12pt;
}
#btnstart:hover {
color: #eeeeee;
background-color: steelblue;
}
.img-circle {
border-radius: 50%;
float: left;
}
#imgone {
width: 100%;
height: auto;
}
#media screen and (min-width: 360px) and (max-width:640px) {
#imgone {
width: 100%;
height: auto;
}
#boldhead {
font-size: 17pt;
}
}
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
#newclients {
font-family: 'Be Vietnam', sans-serif;
}
#media screen and (min-width: 360px) and (max-width:640px) {
#qr {
display: none;
}
}
</style>
<div class="wrapper">
<div class="top">
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="header" style="font-family: Nunito;">
<a class="navbar-brand" href="Default.aspx" style="font-family: 'Renogare Soft', sans-serif; font-weight: 500; font-size: 16pt;">
<i class="fas fa-bowling-ball" aria-hidden="true" style="margin: 0 7px; font-size: 20pt; color: #44a6e8;"></i>Cosmic</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: transparent; border-color: none; font-size: 10pt; border-width: 0px; color: #fff;">
<span class="navbar-toggler-icon" style="font-size: 10pt; color: #fff;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link active" href="Default.aspx" style="font-weight: bolder;">
<i class="fa fa-home" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" style="font-weight: bolder;">
<i class="fas fa-address-card" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>about Us
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact.aspx" style="font-weight: bolder;">
<i class="fas fa-address-book" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="LoginForm.aspx" style="font-weight: bolder;">
<i class="fas fa-sign-in" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>login
</a>
</li>
<li class="nav-item">
<asp:Button ID="newclients" runat="server" CssClass="btn" Font-Bold="true" Font-Size="10pt" Text="Create free account" />
</li>
</ul>
</div>
</nav>
<div>
<img id="dots" alt="dotted" src="images/curly.jpg" />
<div class="line" style="color: #fff;">
</div>
<div class="row" id="frontpage" style="width: 98%; margin: 0 auto; padding: 35px; top: 1%;">
<div class="col-sm-7" style="margin: 0 auto; padding: 5px;">
<br />
<div class="container" style="margin-top: 4%; padding: 0px; top: 8%;">
<label id="boldhead" style="font-family: Roboto; font-size: 7.0vmin; color: #002335; top: 6%; font-weight: 900;">Best Prices for your Kids</label>
<br />
<p id="secondhead" style="font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 13pt; color: #05214d;">
Start yourshopping for your kids anywhere and anytime!
</p>
<br />
<asp:Button ID="btnstart" runat="server" class="btn btn-lg btn-primary" PostBackUrl="~/SignUp.aspx" Text="Create an account" />
<br />
<br />
</div>
</div>
<div class="col-sm-4" id="qr" style="margin: 0 auto;">
<div class="container-fluid p-3 mb5 bg-transparent rounded">
<i class="fas fa-home" aria-expanded="true" style="margin: 0 auto; font-size: 290pt; color: #32657c; opacity: 0.9;"></i>
</div>
</div>
</div>
</div>
<br />
<br />
</div>
<div class="back-cont" style="background-color: #eeeeee;">
<div class="container-fluid" style="text-align: center; padding: 30px;">
</div>
<br />
</div>
<div class="contain" style="margin: 0 auto; padding: 10px;">
<br />
</div>
</div>

You can try this :
$(window).scroll(function () {
if ($(window).scrollTop() >= 50) {
$('.navbar').css('background', '#32657c');
$('.nav-link').css('color', '#eee');
$('.navbar-brand').css('color', '#eeeeee');
$('#newclients').css('color', '#eeeeee');
$('#newclients').css('border-color', '#eeeeee');
$('#newclients').css('background', '#32657c');
$('.navbar-nav').css('background','transparent')
} else {
$('.navbar').css('background', 'transparent');
$('.nav-link').css('color', '#000');
$('.navbar-brand').css('color', '#011B33');
$('#newclients').css('border-color', '#32657c');
$('#newclients').css('color', '#011B33');
$('#newclients').css('background', 'transparent');
$('.navbar-nav').css('background','rgb(245, 245, 245)')
}
});
.wrapper {
background-repeat: no-repeat;
height: 1000px;
background-position: center;
background-size: cover;
overflow: hidden;
position: relative;
}
.top {
height: 100%;
background-size: cover;
background-color: rgb(245, 245, 245);
width: 100%;
z-index: 100;
}
.navbar-nav {
margin-left: auto;
}
#navbarNav li a {
/*color: #eeeeee;*/
font-family: 'Be Vietnam', sans-serif;
font-size: 11pt;
font-weight: bolder;
}
.nav-item {
float: right;
}
.navbar-nav .active {
color: #eeeeee;
}
#navbarNav li a::after:hover {
color: #eeeeee;
}
.navbar-brand:hover {
color: #eeeeee;
}
#media(min-width:992px) {
.col-md-6:not(:first-child) {
}
.col-md-6:not(:last-child) {
border-right: 1px solid #200662;
border-left: 1px;
}
.form-horizontal {
line-height: 1.33;
letter-spacing: -.5px;
margin-bottom: 5px;
margin-top: 0%;
}
}
#btnstart {
border-radius: 5px;
background-color: #32657c;
font-weight: 500;
font-size: 12pt;
}
#btnstart:hover {
color: #eeeeee;
background-color: steelblue;
}
.img-circle {
border-radius: 50%;
float: left;
}
#imgone {
width: 100%;
height: auto;
}
#media screen and (min-width: 360px) and (max-width:640px) {
#imgone {
width: 100%;
height: auto;
}
#boldhead {
font-size: 17pt;
}
}
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
#newclients {
font-family: 'Be Vietnam', sans-serif;
}
#media screen and (min-width: 360px) and (max-width:640px) {
#qr {
display: none;
}
}
#media screen and (min-width: 15px) and (max-width:768px) {
.navbar-nav
{
background-color:rgb(245, 245, 245);
color:#000;
width:100%;
}
.navbar-nav .nav-item a
{
color:#000;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="top">
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="header" style="font-family: Nunito;">
<a class="navbar-brand" href="Default.aspx" style="font-family: 'Renogare Soft', sans-serif; font-weight: 500; font-size: 16pt;">
<i class="fas fa-bowling-ball" aria-hidden="true" style="margin: 0 7px; font-size: 20pt; color: #44a6e8;"></i>Cosmic</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: transparent; border-color: none; font-size: 10pt; border-width: 0px; color: #fff;">
<span class="navbar-toggler-icon" style="font-size: 10pt; color: #fff;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link active" href="Default.aspx" style="font-weight: bolder;">
<i class="fa fa-home" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" style="font-weight: bolder;">
<i class="fa fa-address-card" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>about Us
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact.aspx" style="font-weight: bolder;">
<i class="fa fa-address-book" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="LoginForm.aspx" style="font-weight: bolder;">
<i class="fa fa-sign-in" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>login
</a>
</li>
<li class="nav-item">
<asp:Button ID="newclients" runat="server" CssClass="btn" Font-Bold="true" Font-Size="10pt" Text="Create free account" />
</li>
</ul>
</div>
</nav>
<div>
<img id="dots" alt="dotted" src="images/curly.jpg" />
<div class="line" style="color: #fff;">
</div>
<div class="row" id="frontpage" style="width: 98%; margin: 0 auto; padding: 35px; top: 1%;">
<div class="col-sm-7" style="margin: 0 auto; padding: 5px;">
<br />
<div class="container" style="margin-top: 4%; padding: 0px; top: 8%;">
<label id="boldhead" style="font-family: Roboto; font-size: 7.0vmin; color: #002335; top: 6%; font-weight: 900;">Best Prices for your Kids</label>
<br />
<p id="secondhead" style="font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 13pt; color: #05214d;">
Start yourshopping for your kids anywhere and anytime!
</p>
<br />
<asp:Button ID="btnstart" runat="server" class="btn btn-lg btn-primary" PostBackUrl="~/SignUp.aspx" Text="Create an account" />
<br />
<br />
</div>
</div>
<div class="col-sm-4" id="qr" style="margin: 0 auto;">
<div class="container-fluid p-3 mb5 bg-transparent rounded">
<i class="fas fa-home" aria-expanded="true" style="margin: 0 auto; font-size: 290pt; color: #32657c; opacity: 0.9;"></i>
</div>
</div>
</div>
</div>
<br />
<br />
</div>
<div class="back-cont" style="background-color: #eeeeee;">
<div class="container-fluid" style="text-align: center; padding: 30px;">
</div>
<br />
</div>
<div class="contain" style="margin: 0 auto; padding: 10px;">
<br />
</div>
</div>
</body>
</html>

footer with background image half in it

I have designed a footer for a website using Figma which looks like the image provided below:
see design Picture below
design image
Added working example
#f-text{
font-size: 14px;
color: #ffffff;
}
#footer-head{
font-family: 'Poppins', sans-serif;
font-size: 4.5em;
color: #ffffff;
}
#footer-text{
color: #818181;
font-size:17px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<footer class="footer mt-5" style="width:100%; padding-top: 100px; padding-bottom:40px; margin-top: 75px; position:absolute; background-color: #0C0C0C">
<div class="row">
<div class="col-sm-8 mx-auto my-auto text-center">
<div class="col-6">
<h5 id="footer-text">phone</h5>
<p style="color: #ffffff;" id="f-text">7879229242</p>
</div>
<div class="col-6 ">
<h5 id="footer-text">address</h5>
<ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="1400" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<p id="f-text">infront of kamal talkies, rajnandgaon, chattisgarah</p>
</ul>
</div>
<div class="col-6 text-center">
<h5 id="footer-text">follow us</h5>
<ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="2000" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<ol class="text-center">
<li style="display:inline-block; color: #ffffff;padding-right: 0.5em;" id="f-text">In</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Fb</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Tw</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Yt</li>
</ol>
</ul>
</div>
</div>
<div class="col-sm-4">
<h5 id="footer-head">AW</h5>
<p style="color: #ffffff" id="f-text">AW Zone is a full-service Photography Agency based in rajnandgaon, founded by Ayush Waghmare.</p>
</div>
</div>
<p class="text-muted text-center mt-5 pt-5" id="footer-par" style="color:white; font-size: 13px;">Coded+designed by<span style="font-weight:medium;"> Semicolon</span> with passion and <i class="far fa-keyboard"></i></p>
</footer>
I need help with turning my design into working code.

Since you need the "background-image" to extend beyond the footer you cannot use background-image property on the footer itself.
Use a pseudo-element absolutely positioned and place the background image on that.
E.g.
body {
display: flex;
height: 100vh;
flex-direction: column;
justify-content: flex-end;
}
footer {
margin: 0 auto;
position: relative;
width: 80%;
height: 50vh;
background: black;
}
footer::after {
content: "";
width: 20vw;
height: 20vw;
background-image: url(http://www.fillmurray.com/460/460);
background-size: contain;
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
z-index: -1
}
<footer>
</footer>

#f-text {
font-size: 14px;
color: #ffffff;
}
#footer-head {
font-family: 'Poppins', sans-serif;
font-size: 4.5em;
color: #ffffff;
}
#footer-text {
color: #818181;
font-size: 17px;
}
footer {
position: relative;
}
.footer-main {
width: 90%;
padding-top: 100px;
padding-bottom: 40px;
margin-top: 75px;
background-color: #0C0C0C;
}
.img-styling {
position: absolute;
right: 0;
top: 35px;
z-index: -1;
width: 30%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div>
<div class="footer-main">
<div class="row">
<div class="col-sm-8 mx-auto my-auto text-center">
<div class="col-6">
<h5 id="footer-text">phone</h5>
<p style="color: #ffffff;" id="f-text">7879229242</p>
</div>
<div class="col-6 ">
<h5 id="footer-text">address</h5>
<ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="1400" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<p id="f-text">infront of kamal talkies, rajnandgaon, chattisgarah</p>
</ul>
</div>
<div class="col-6 text-center">
<h5 id="footer-text">follow us</h5>
<ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="2000" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<ol class="text-center">
<li style="display:inline-block; color: #ffffff;padding-right: 0.5em;" id="f-text">In</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Fb</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Tw</li>
<li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Yt</li>
</ol>
</ul>
</div>
</div>
<div class="col-sm-4">
<h5 id="footer-head">AW</h5>
<p style="color: #ffffff" id="f-text">AW Zone is a full-service Photography Agency based in rajnandgaon, founded by Ayush Waghmare.</p>
</div>
</div>
<p class="text-muted text-center mt-5 pt-5" id="footer-par" style="color:white; font-size: 13px;">Coded+designed by<span style="font-weight:medium;"> Semicolon</span> with passion and <i class="far fa-keyboard"></i></p>
</div>
<img class="img-styling" src="https://www.androidcentral.com/sites/androidcentral.com/files/topic_images/2014/materialdesign_principles_metaphor.png" alt="image" />
</div>

Custom tree style in HTML/JS/CSS

I'm trying to create this structure in HTML/CSS and Javascript but I'm having trouble with the lines.
Here's the HTML code:
<div class="okr-container">
<div class="column">
<div class="objective active">
<div class="objective-header">
<span class="objective-title">Building a Foundation</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">8%</span>
</div>
<div class="circle"></div>
</div>
<div class="objective">
<div class="objective-header">
<span class="objective-title">Doing something</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">90%</span>
</div>
</div>
</div>
<div class="column">
<div class="objective">
<div class="objective-header">
<span class="objective-title">REEEEEEEEEE</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">8%</span>
</div>
</div>
<div class="objective active">
<div class="objective-header">
<span class="objective-title">Help me please</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">90%</span>
</div>
<div class="circle"></div>
</div>
<div class="objective">
<div class="objective-header">
<span class="objective-title">REEEEEEEEEE</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">8%</span>
</div>
</div>
<div class="objective">
<div class="objective-header">
<span class="objective-title">Help me please</span>
<span class="objective-options">...</span>
</div>
<div class="objective-details">
<span class="objectives-count">4 objectives</span>
<span class="objective-progress">90%</span>
</div>
</div>
</div>
</div>
And here's the CSS:
body {
background-color: #F0F4F5
}
.okr-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.column {
width: 328px;
}
.objective {
width: 280px;
height: 100px;
padding: 10px;
background-color: white;
border: 0.5px solid #BFC5D0;
box-sizing: border-box;
border-radius: 4px;
position: relative;
margin: 16px;
}
.circle {
background: #FFF;
border: 4px solid #09D2C7;
width: 16px;
height: 16px;
border-radius: 50%;
position: absolute;
right: -13px;
top: 35px;
}
.active {
border: 2px solid #09D2C7;
border-radius: 4px;
border-left: 8px solid #09D2C7;
}
.objective-title {
font-family: SF Pro Text;
font-size: 16px;
font-weight: bold;
}
.objective-options {
float: right;
font-weight: bold;
font-size: 20px;
}
.objective-details {
position: absolute;
bottom: 4px;
width: 90%;
}
.objectives-count {
font-family: SF Pro Text;
font-size: 14px;
line-height: 17px;
letter-spacing: 0.02em;
}
.objective-progress {
font-family: SF Pro Display;
font-size: 30px;
line-height: 36px;
/* identical to box height */
float: right;
letter-spacing: 0.02em;
}
Here's what I have made so far on Codepen. I was thinking of using SVG lines but I don't know much about them to proceed in a way where lines would link the right boxes together.
Any help would be greatly appreciated! :)
Thank you!
EDIT: This is not going to be a drag-and-drop thing. Just that when a user clicks a box, it just shows the child DIVs.