I am trying to make a responsive nav bar

I am trying to make a responsive nav bar - javascript

I have the idea of having the anchor tags show up when they're set to active and I have tried using JavaScript to access them and make them active when clicking on a div/button (I tried with button but it didn't work out.).
The problem is that nothing happens. I ran through my code and didn't find where I can be wrong.
Index.html:
<!DOCTYPE html>
<html>
<head>
<title>Начало</title>
<link rel="shortcut icon" type="image/png" href="favicon.jpg">
<link rel="stylesheet" href="IndexStyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
<script src="ResponsiveMenu.js" ></script>
</head>
<body>
<nav class="nav">
<button class="dot_a">
<span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
<span class="dot" style="background-color: #ff4757;"></span>
<span class="dot" style="background-color: #ffa502"></span>
<span class="dot" style="background-color: #2ed573;"></span>
</button>
<ul class="nav-list">
<li><a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i> НАЧАЛО</a></li>
<li><a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i> HTML&CSS</a></li>
<li><a class="anchors" href="#"><i class="fas fa-tools"></i> ИНСТРУМЕНТИ</a></li>
<li><a class="anchors" href="#"><i class="fas fa-thumbtack"></i> ЗАДАЧИ</a></li>
<li><a class="anchors" href="#"><i class="far fa-address-card "></i> ЗА НАС</a> </li>
</ul>
</nav>
</body>
</html>
IndexStyle.css:
body {
background-image: url(1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
}
.pro_column1 {
width: 15%;
}
.pro_column2 {
width: 85%;
}
.nav {
overflow: hidden;
background-color: white;
/*opacity: 60%;*/
margin: 10px;
border-radius: 10px;
width: 850px;
/*background:#3c6382;
/*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
/*border: solid black 2px;*/
}
.nav-list {
display:none;
}
.nav-list.active {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
color: #747d8c;
text-align: center;
padding: 35px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
border-radius: 10px;
transition: 1s;
}
.nav a:hover {
background-color: #ddd;
color: black;
-webkit-animation: 1s ease-in forwards;
}
.dot_a {
/*float: right;*/
color: #747d8c;
/*display: block;*/
text-align: center;
padding: 30px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
display: inline-block;
border-radius: 10px;
transition: 1s;
/*justify-content: center;*/
/*position: fixed; /* or absolute */
}
i {
/*float: right;*/
font-size: 20px;
border: none;
outline: none;
color: #747d8c;
padding: 32px 5px;
font-family: inherit;
margin: 0px;
border-radius: 20px;
transition: 1s;
}
.dot {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
margin: 0px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 870px) {
.nav a {
padding-top: 5px;
padding-bottom: 5px;
}
div.dot_a {
padding-top: 3px;
padding-bottom: 0px;
}
.nav {
width: 90%;
}
.dot {
margin-top: 15px;
margin-bottom: 15px;
}
.nav a:active {
display: block;
}
}
ResponsiveMenu.js:
const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})

Lets take this one step at a time, first lets look at the HTML. The center tag is no longer supported in HTML5 so I removed it. Second you had an extra quotation mark in your last anchor which I removed. In order to get all the links to show at once you should wrap them in a container. In this case a list makes the most sense. I have created a nav-list for you and wrapped all your anchor tags in an li tag.
As far as your CSS I noticed you were using .anchor:active which is a Pseudo class. This is not the same as having a class of anchor AND a class of active. If you want to select a class of anchor that also has a class of active you would use .anchor.active. In this case the active class is going on the nav-list so I style it using .nav-list.active
Now for the Javascript. Instead of using it to loop over all the anchor tags and setting them to active individually you can now just toggle the active class on your nav-list. This will make all the links appear at the same time.
const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
body {
background-image: url(1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
}
.pro_column1 {
width: 15%;
}
.pro_column2 {
width: 85%;
}
.nav {
overflow: hidden;
background-color: white;
/*opacity: 60%;*/
margin: 10px;
border-radius: 10px;
width: 850px;
/*background:#3c6382;
/*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
/*border: solid black 2px;*/
}
.nav-list {
display:none;
}
.nav-list.active {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
color: #747d8c;
text-align: center;
padding: 35px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
border-radius: 10px;
transition: 1s;
}
.nav a:hover {
background-color: #ddd;
color: black;
-webkit-animation: 1s ease-in forwards;
}
.dot_a {
/*float: right;*/
color: #747d8c;
/*display: block;*/
text-align: center;
padding: 30px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
display: inline-block;
border-radius: 10px;
transition: 1s;
/*justify-content: center;*/
/*position: fixed; /* or absolute */
}
i {
/*float: right;*/
font-size: 20px;
border: none;
outline: none;
color: #747d8c;
padding: 32px 5px;
font-family: inherit;
margin: 0px;
border-radius: 20px;
transition: 1s;
}
.dot {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
margin: 0px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 870px) {
.nav a {
padding-top: 5px;
padding-bottom: 5px;
}
div.dot_a {
padding-top: 3px;
padding-bottom: 0px;
}
.nav {
width: 90%;
}
.dot {
margin-top: 15px;
margin-bottom: 15px;
}
.nav a:active {
display: block;
}
}
<nav class="nav">
<button class="dot_a">
<span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
<span class="dot" style="background-color: #ff4757;"></span>
<span class="dot" style="background-color: #ffa502"></span>
<span class="dot" style="background-color: #2ed573;"></span>
</button>
<ul class="nav-list">
<li><a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i> НАЧАЛО</a></li>
<li><a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i> HTML&CSS</a></li>
<li><a class="anchors" href="#"><i class="fas fa-tools"></i> ИНСТРУМЕНТИ</a></li>
<li><a class="anchors" href="#"><i class="fas fa-thumbtack"></i> ЗАДАЧИ</a></li>
<li><a class="anchors" href="#"><i class="far fa-address-card "></i> ЗА НАС</a> </li>
</ul>
</nav>

As I understood you want to make the nav items active on click here's some issues to fix
1- querySelector returns only the first element in the list, so here you have 5 elements with class of anchors so it'll return the first anchor tag with class of .anchors and therefore you need querySelectorAll
Read more about querySelector here https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
And querySelectorAll in here https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
Briefly querySelectorAll returns a nodeList that you can treat as an array so you need to loop over this array and set the onclick event on each element like so
const navbarLinks = document.querySelectorAll(".anchors");
navbarLinks.forEach((link) =>
link.addEventListener("click", (e) => {
e.target.classList.toggle("active");
})
);
2- you don't appear to have a class called active so classList.toggle would not work add this to your css
.active {
background-color: #ddd !important;
color: black;
}
3- you have a small bug in your html, the last anchor tag (a href="#"") notice that it has 2 double quotes for closing
4- with the previous code in (2) you'll notice being able to select multiple values which is not what we want therefore you should remove active class from all other anchor tags when 1 is active and you can achieve this with the following code
link.addEventListener("blur", (e) => {
link.classList.remove("active");
});
blur works when you're not focusing on the element anymore
check MDN here for more info https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
here's a working example
const toggleButton = document.querySelector(".dot_a");
const navbarLinks = document.querySelectorAll(".anchors");
navbarLinks.forEach((link) => {
link.addEventListener("click", (e) => {
e.target.classList.add("active");
});
link.addEventListener("blur", (e) => {
link.classList.remove("active");
});
});
body {
background-image: url(1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
}
.pro_column1 {
width: 15%;
}
.pro_column2 {
width: 85%;
}
.nav {
overflow: hidden;
background-color: white;
/*opacity: 60%;*/
margin: 10px;
border-radius: 10px;
width: 850px;
/*background:#3c6382;
/*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
/*border: solid black 2px;*/
}
.nav a {
/*float: right;*/
color: #747d8c;
/*display: block;*/
text-align: center;
padding: 35px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
border-radius: 10px;
transition: 1s;
/*justify-content: center;*/
/*position: fixed; /* or absolute */
}
.anchors {
/*float: right;*/
color: #747d8c;
/*display: block;*/
text-align: center;
padding: 35px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
border-radius: 10px;
transition: 1s;
/*justify-content: center;*/
/*position: fixed; /* or absolute */
}
.nav a:hover {
background-color: #ddd;
color: black;
-webkit-animation: 1s ease-in forwards;
}
.active {
background-color: #ddd !important;
color: black !important;
}
.dot_a {
/*float: right;*/
color: #747d8c;
/*display: block;*/
text-align: center;
padding: 30px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
display: inline-block;
border-radius: 10px;
transition: 1s;
/*justify-content: center;*/
/*position: fixed; /* or absolute */
}
i {
/*float: right;*/
font-size: 20px;
border: none;
outline: none;
color: #747d8c;
padding: 32px 5px;
font-family: inherit;
margin: 0px;
border-radius: 20px;
transition: 1s;
}
.dot {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
margin: 0px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 870px) {
.nav a {
display: none;
padding-top: 5px;
padding-bottom: 5px;
}
div.dot_a {
padding-top: 3px;
padding-bottom: 0px;
}
.nav {
width: 90%;
}
.dot {
margin-top: 15px;
margin-bottom: 15px;
}
.nav a:active {
display: block;
}
}
<head>
<title>Начало</title>
<link rel="shortcut icon" type="image/png" href="favicon.jpg">
<link rel="stylesheet" href="IndexStyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="ResponsiveMenu.js" defer></script>
<script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
<script src="ResponsiveMenu.js"></script>
</head>
<body>
<center>
<nav class="nav">
<div class="dot_a" style="pointer-events: none;">
<span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
<span class="dot" style="background-color: #ff4757;"></span>
<span class="dot" style="background-color: #ffa502"></span>
<span class="dot" style="background-color: #2ed573;"></span>
</div>
<a class="anchors" href="#"><i class="fas fa-house-damage"></i> НАЧАЛО</a>
<a class="anchors" href="#"><i class="fas fa-code"></i> HTML&CSS</a>
<a class="anchors" href="#"><i class="fas fa-tools"></i> ИНСТРУМЕНТИ</a>
<a class="anchors" href="#"><i class="fas fa-thumbtack"></i> ЗАДАЧИ</a>
<a class="anchors" href="#"><i class="far fa-address-card"></i> ЗА НАС</a>
</nav>
</center>
</body>

Related

Search Bar showing footer when any word is typed in thats not on the product cards

I have implemented a search bar on my website and when a name of a product card is typed in it works. However, if you was to type in a word such as "lol' or any other word that is not included on the product cards the footer begins to show. I'm wanting the footer to stay in its current place which is at the bottom of the page.
I will be uploading code snippets and the files to my server so you can view the entire website and the problems I am experiencing.
I hope all of the information provided shows the problem I am experiencing.
[Click the product page to see the problem I am experiencing or click run snippet below][1]
[1]: https://kipplo.co.uk/kipplov2
// JavaScript code
function search_products() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('products');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
body {
background-color: black;
}
* {
font-family: Verdana;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.alertcontainer {
display: flex;
flex-direction: column;
height:100vh;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(139, 185, 255);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
.boxed {
box-shadow: 0 0 15px rgb(24, 143, 190);
border-radius: 15px;
text-align:center;
padding: 4%;
margin: 10vh;
font-size:20px;
color:#00ffd5;
}
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
height: auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
height: auto;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
/* Scroll bar */
::-webkit-scrollbar {
background: transparent;
width: 7px;
}
::-webkit-scrollbar-thumb {
background: #606060;
border-radius: 100px;
}
/* search bar */
#searchbar{
margin-left: 15%;
padding:15px;
border-radius: 10px;
}
input[type=text] {
width: 30%;
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
}
/* When the input field gets focus,
change its width to 100% */
input[type=text]:focus {
width: 70%;
}
#list{
font-size: 1.5em;
margin-left: 90px;
}
.products{
display: list-item;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<title>Products</title>
<style>
p1 {
color: whitesmoke;
}
</style>
</head>
<body>
<!-- Alert Bar -->
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<center><strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center></div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png">
<div>
<li>Home</li>
<li><a class="active" href="products.html">Products</a></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
<!-- input tag copy this-->
<input id="searchbar" onkeyup="search_products()" type="text"
name="search" placeholder="Search Products..">
<!-- Product Card -->
<div class="gallery">
<div class="content products">
<img src="shoes.png" class="productcard-image">
<h3>Product 1</h3>
<p3>Test product line</p3>
<h6>£100</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li></li> <i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-1 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
</div>
<div class="content products">
<img src="earphone.png" class="productcard-image">
<h3>Product 2</h3>
<p3>Test product line</p3>
<h6>£40.00</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-2 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
</div>
<div class="content products">
<img src="watch.png" class="productcard-image">
<h3>Product 3</h3>
<p3>Test product line</p2>
<h6>£70</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="false"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li></li><i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-3 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
<script src="products.js"></script>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<!-- Kipplo Footer Logo -->
<a href="index.html">
<img src="img/logo2.png" id="footer__logo" ></a>
</div>
<!-- Creative Commmons Logo -->
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">
<img src="img/88x31.png" id="footer__logo"></a>
<p class="website__rights">
Creative Commons - KIPPLO.CO.UK 2022.</p>
</div>
</div>
</section>
</div>
</body>
</html>

I would just wrap it with id or class and set it min-height:100vh;. Its the easiest way, not the cleanest code. Hope it helped!
// JavaScript code
function search_products() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('products');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
body {
background-color: black;
}
* {
font-family: Verdana;
}
.wrap-nav-and-main {
min-height: 100vh;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.alertcontainer {
display: flex;
flex-direction: column;
height:100vh;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(139, 185, 255);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
.boxed {
box-shadow: 0 0 15px rgb(24, 143, 190);
border-radius: 15px;
text-align:center;
padding: 4%;
margin: 10vh;
font-size:20px;
color:#00ffd5;
}
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
height: auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
height: auto;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
/* Scroll bar */
::-webkit-scrollbar {
background: transparent;
width: 7px;
}
::-webkit-scrollbar-thumb {
background: #606060;
border-radius: 100px;
}
/* search bar */
#searchbar{
margin-left: 15%;
padding:15px;
border-radius: 10px;
}
input[type=text] {
width: 30%;
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
}
/* When the input field gets focus,
change its width to 100% */
input[type=text]:focus {
width: 70%;
}
#list{
font-size: 1.5em;
margin-left: 90px;
}
.products{
display: list-item;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<title>Products</title>
<style>
p1 {
color: whitesmoke;
}
</style>
</head>
<body>
<section class="wrap-nav-and-main">
<!-- Alert Bar -->
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<center><strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center></div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png">
<div>
<li>Home</li>
<li><a class="active" href="products.html">Products</a></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
<!-- input tag copy this-->
<input id="searchbar" onkeyup="search_products()" type="text"
name="search" placeholder="Search Products..">
<!-- Product Card -->
<div class="gallery">
<div class="content products">
<img src="shoes.png" class="productcard-image">
<h3>Product 1</h3>
<p3>Test product line</p3>
<h6>£100</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li></li> <i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-1 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
</div>
<div class="content products">
<img src="earphone.png" class="productcard-image">
<h3>Product 2</h3>
<p3>Test product line</p3>
<h6>£40.00</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-2 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
</div>
<div class="content products">
<img src="watch.png" class="productcard-image">
<h3>Product 3</h3>
<p3>Test product line</p2>
<h6>£70</h6>
<ul class="product-card">
<li class="productcard-list">
<li> <i class="fa fa-star" aria-hidden="false"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
<li></li><i class="fa fa-star" aria-hidden="true"></i></li>
<li> <i class="fa fa-star" aria-hidden="true"></i></li>
</ul>
<button class="buy-3 productcardbutton" onclick="location.href='https://buy.stripe.com/test_00g7tvcTneaigM07st'">Buy Now</button>
<script src="products.js"></script>
</div>
</div>
</section>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<!-- Kipplo Footer Logo -->
<a href="index.html">
<img src="img/logo2.png" id="footer__logo" ></a>
</div>
<!-- Creative Commmons Logo -->
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">
<img src="img/88x31.png" id="footer__logo"></a>
<p class="website__rights">
Creative Commons - KIPPLO.CO.UK 2022.</p>
</div>
</div>
</section>
</div>
</body>
</html>

How to make an animation on my menu bar in CSS

How to make my navigation bar, have a slide animation when my div button is pressed.
I have created the java script function for it showing up in general, but having it popping up from nowhere is kind of annoying.I want it to show and slide slowly from the top for 2-3 seconds.
I tried using the following code on the class that wraps up all (nav-list) but it didn't work out:
const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
body {
background-image: url(1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
}
.pro_column1 {
width: 15%;
}
.pro_column2 {
width: 85%;
}
.nav {
overflow: hidden;
background-color: white;
/*opacity: 60%;*/
margin: 10px;
border-radius: 10px;
width: 850px;
/*background:#3c6382;
/*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
/*border: solid black 2px;*/
}
.nav a {
color: #747d8c;
text-align: center;
padding: 35px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
border-radius: 10px;
transition: 1s;
}
.nav a:hover {
background-color: #ddd;
color: black;
-webkit-animation: 1s ease-in forwards;
}
.dot_a {
padding: 30px 10px;
font-size: 17px;
text-align: center;
margin: 0;
display: inline-block;
border-radius: 10px;
transition: 1s;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
i {
/*float: right;*/
font-size: 20px;
border: none;
outline: none;
color: #747d8c;
padding: 32px 5px;
font-family: inherit;
margin: 0px;
border-radius: 20px;
transition: 1s;
}
.dot {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
margin: 0px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 870px) {
.nav a {
padding-top: 5px;
padding-bottom: 5px;
display: block;
}
.dot_a {
padding-top: 3px;
padding-bottom: 0px;
}
.nav {
width: 90%;
}
.dot {
margin-top: 15px;
margin-bottom: 15px;
}
.nav-list {
display: none;
transform: translateX(100%);
transition: transform 1s ease-in;
}
.nav-list.active {
display: block;
margin: 0;
padding: 0;
transform: translateX(0%);
}
}
<script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
<center>
<nav class="nav">
<div class="dot_a">
<span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
<span class="dot" style="background-color: #ff4757;"></span>
<span class="dot" style="background-color: #ffa502"></span>
<span class="dot" style="background-color: #2ed573;"></span>
</div>
<span class="nav-list">
<a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i> НАЧАЛО</a>
<a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i> HTML&CSS</a>
<a class="anchors" href="#"><i class="fas fa-tools"></i> ИНСТРУМЕНТИ</a>
<a class="anchors" href="#"><i class="fas fa-thumbtack"></i> ЗАДАЧИ</a>
<a class="anchors" href="#"><i class="far fa-address-card "></i> ЗА НАС</a>
</span>
</nav>
</center>

.nav-list{
display: block;
transform: translateX(100%);
transition: transform 1s ease-in;
opacity: 0;
visibility: hidden;
}
.nav-list.active {
margin: 0;
padding: 0;
transform: translateX(0%);
opacity: 1;
visibility: visible;
}
You have to replace this css and check.

HTML - Dropdown with ahref and button

So I am creating a dropdown list with text and a delete button, but I have a small issue. When pressing the ahref link, it redirects perfectly to the website, but when pressing the delete button, it displays the popup message as it should, but then redirect to the ahref link. I don't want it to redirect when pressing the delete button. How can I avoid this?
function myFunction() {
alert("You clicked the button");
return;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
/*overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 54px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.home {
background-color: green;
}
.dropdown {
float: left;
/* overflow: hidden; */
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.deleteBtn {
float: right;
}
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- Dropdown value below, value is for testing purpose -->
<a href="https://google.com/">Google
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
<a href="https://youtube.com/">Youtube
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
<a href="https://amazon.com/">Amazon
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>

#navbar should not be inside #main-container!
Don't place <button> inside <a> and vice-versa.
Use a common parent for both your <a> and <button> instead. (I.e: use an <ul> and <li> list)
type='deleteBtn' is an invalid attribute. Use class instead class='deleteBtn'
Don't use inline on* handlers. JS should be in one place only, and that's your script
Edited CSS and HTML:
function removeListItem(ev) {
const EL_list = ev.currentTarget.closest("li")
EL_list.remove();
}
const ELS_deleteBtn = document.querySelectorAll(".deleteBtn");
ELS_deleteBtn.forEach(EL => EL.addEventListener("click", removeListItem));
/*QuickReset*/ * {margin:0; box-sizing:border-box; }
html {height: 100%;}
body {height: 100%; font-family: "Poppins", sans-serif;}
#navbar {
background-color: #333;
position: sticky;
display: flex;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
#navbar>a {
display: block;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar .home {
background-color: green;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-list {
padding: 0;
margin: 0;
}
.dropdown-list li {
display: flex;
}
.dropdown-list li a {
padding: 14px 16px;
flex: 1;
}
.dropdown-list li:hover a {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
#main-container {
padding: 0 20px;
}
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<ul class="dropdown-list">
<li>
Google
<button class='deleteBtn'>X</button>
</li>
<li>
Youtube
<button class='deleteBtn'>X</button>
</li>
<li>
Amazon
<button class='deleteBtn'>X</button>
</li>
</ul>
</div>
</div>
</div>
<div id="main-container">
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>

use preventDefault().
Read More about preventDefault
function myFunction(e) {
e.preventDefault();
alert("You clicked the button");
return;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
/*overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 54px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.home {
background-color: green;
}
.dropdown {
float: left;
/* overflow: hidden; */
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.deleteBtn {
float: right;
}
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- Dropdown value below, value is for testing purpose -->
<a href="https://google.com/">Google
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
<a href="https://youtube.com/">Youtube
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
<a href="https://amazon.com/">Amazon
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>

HTML/CSS: Add Icon to Text Button

I'm relying on increasing the top and bottom paddings of the center element to create a hover effect, seen below.
Keeping this effect, is there a way to do the following:
To make room for their respective icons, lower the text (help and logout) a little bit (I know I can do position: relative, and then top: 7px, for example, but that messes up the hover animation effect because the center of the 'white' expansion should be the center of the green header)
Now that the text is lowered, I want to add a transparent background sprite to each of the two 'buttons' - a question mark symbol for "help", and another symbol for "logout". So the background would still be green, and on top of the green background, I will see a symbol for each button, and the text below each symbol. If I simply do
.help {background: url() no-repeat -2px 0;}, for example, the image moves along with the hover effect because the height of the element is increased.
The sprites I'm going to using for the background/icons are in the form of:
{url(../theme/images/top_sprites.png) no-repeat -2px 0;}
So how can I use the sprites as Icons for these 'buttons' while keeping the text, the green background, as well as the animation? Note that the borders are added to make it clearer how the animation/effect works.
.header {
height: 50px;
background-color: #008b10;
}
.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}
.menu a:hover {
background-color: #ffffff;
color: #008b10;
padding: 16px 5px;
}
.menu a {
/*box-sizing: border-box;*/
/*float:left*/
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}
<div class=header>
<div class="menu">
<a class="help" href="#" id="online_help">Help</a>
<a class="logout" href="#" onclick="openLogout();">Logout</a>
</div>
</div>

You could animate a pseudoelement on the anchor.
Example:
.header {
min-height: 50px;
background-color: #008b10;
}
.menu {
padding: 0 16px;
font-family: Raleway, arial, sans-serif;
border: 1px solid blue;
}
.menu a {
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
padding: 16px 5px;
display: inline-flex;
align-items: center;
flex-direction: column;
position: relative;
}
.menu a span {
position: relative;
}
.menu a:before {
transition: 0.4s;
content: '';
display: block;
position: absolute;
background: white;
opacity: 0;
transform: scaleY(.5);
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.menu a:hover:before {
transform: scaleY(1);
opacity: 1;
}
.menu a img {
max-width: 15px;
display: block;
position: relative;
padding-bottom: 4px;
}
.menu a:hover {
color: #008b10;
}
<div class=header>
<div class="menu">
<a href="#">
<img src="https://unsplash.it/15">
<span>Help</span>
</a>
<a href="#">
<img src="https://unsplash.it/15">
<span>Logout</span>
</a>
</div>
</div>

.header {
height: 50px;
background-color: #008b10;
}
.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}
.menu a:hover {
background-color: #ffffff;
color: #008b10;
padding: 16px 5px;
}
.menu a {
/*box-sizing: border-box;*/
/*float:left*/
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class=header>
<div class="menu">
<a class="help" href="#" id="online_help">Help <i class="far fa-question-circle"></i>
</a>
<a class="logout" href="#" onclick="openLogout();">Logout <i class="fas fa-sign-out-alt"></i>
</a>
</div>
</div>

---CSS---
a:hover {
cursor: pointer;
}
.a-border {
display: inline-block;
position: relative;
color: white;
padding: 0.5rem 0.25rem;
margin: 0 1.5rem;
overflow: hidden;
}
.a-border::after {
content: url("../img/more-btn-bottom.png");
display: block;
position: absolute;
bottom: 0;
left: -0.25rem;
border: none;
transform: scale(0, 1);
transform-origin: 0% 100%;
transition: transform 0.4s;
}
a:hover .a-border::after {
transform:scale(1, 1);
}
a.focused .a-border::after {
transform: none;
}
---JS---
function menuclick(underline) {
var focused = document.getElementsByClassName("focused");
var i;
for (i = 0; i < focused.length; i++) {
var under = focused[i];
if (under.classList.contains('focused')) {
under.classList.remove('focused');
}
}
if (!underline.parentElement.classList.contains('focused')) {
underline.parentElement.classList.add('focused');
}
}
---HTML---
<span class="a-border" onclick="menuclick(this)">ABOUT US</span>
<span class="a-border" onclick="menuclick(this)">CREATERS</span>
<span class="a-border" onclick="menuclick(this)">NEWS</span>
<span class="a-border" onclick="menuclick(this)">CONTACT</span>

Add text pop up on link click

MY website is currently under construction so im trying to add a little pop up on the header links that says "coming soon" or something like that. You click it and it just pops up near the link.
This is the tutorial i was following but cant get it to work with my own code. So ill take anything at this point.
https://www.w3schools.com/howto/howto_js_popup.asp
Id like something where all i have to do is add a certain class to each link and it just work once that class is added or something like that seems to me to be the best.
so idealy id like to add it to the about us, our work and services button.
<ul class="nav">
<div class="new">
<li>HOME</li>
<li>ABOUT US</li>
<li>OUR WORK</li>
<li>SERVICES</li>
</div>
</ul>
#import url('https://fonts.googleapis.com/css?family=Roboto');
#import url('https://fonts.googleapis.com/css?family=Roboto:bold');
#import url('https://fonts.googleapis.com/css?family=Roboto:100');
#import url('https://fonts.googleapis.com/css?family=Roboto:600');
#font-face {
font-family: "roboto";
src: url('https://fonts.googleapis.com/css?family=Roboto');
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
top: 0;
background-image: url('images/bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color:#e0e0e0;
}
.logo {
width: 150px;
fill: white;
display: block;
position: relative;
padding: 23px 0px 0px 50px;
}
.logo svg {
position: absolute;
top: 0px;
right: 0px;
}
#hireus {
position: absolute;
top: 0;
right: 0;
padding: 3px;
font-family: proxima nova;
font-size: 12px;
text-decoration: none;
color: white;
margin: 27px 50px 0px 0px;
text-decoration: none;
z-index: 10;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
/*
top: 0;
background-image: url('images/bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
*/
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
/* was ul */
.nav {
list-style-type: none;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
display: table;
margin: 0;
width: 100%;
text-align: center;
padding: 0
}
li {
/*
width: 120px;
height: 40px;
*/
margin: 0px 0px;
display: inline-block;
padding: 0;
font-family: proxima nova;
font-size: 10px;
text-decoration: none;
}
.new a {
display: block;
/*
width: 120px;
height: 40px;
*/
/* line-height: 40px; */
text-decoration: none;
text-align: center;
color: white;
/* margin: 20px 20px; */
margin: 32px 20px 0px 20px;
}
.content {
max-width: 1200px;
margin: 0 auto;
text-align: center;
padding-bottom: 7%;
}
.content h1 {
font-family: proxima nova;
font-size: 520%;
font-weight: bold;
color: white;
margin: 0;
padding-bottom: 3px;
}
.content p {
font-family: proxima nova;
font-size: 12px;
font-weight: 100;
color: white;
margin: 0 auto;
max-width: 420px;
padding-bottom: 25px;
}
.btn {
font-family: proxima nova;
font-size: 14px;
font-weight: bold;
color: white;
text-decoration: none;
border: solid 1px white;
/* padding: 10px 100px; */
border-radius: 60px;
transition: all 0.5s;
width: 160px;
display: inline-block;
text-align: center;
padding-top: 13px;
padding-bottom: 13px;
}
.btn:hover {
color: #b0ccff;
border: solid 1px #b0ccff;
}
.btn2 {
font-family: proxima nova;
font-size: 14px;
font-weight: bold;
color: white;
text-decoration: none;
border: solid 1px #0B315C;
/* padding: 10px 100px; */
border-radius: 60px;
transition: all 0.5s;
width: 160px;
background-color: #0B315C;
display: inline-block;
text-align: center;
padding-top: 13px;
padding-bottom: 13px;
margin-left: 30px;
-webkit-box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5);
}
.btn2:hover {
color: #b0ccff;
border: solid 1px #b0ccff;
}
#scroll {
color: green;
}
.title {
font-family: proxima nova;
font-size: 50px;
font-weight: 600;
color: black;
text-align: center;
margin-top: 60px;
padding-bottom: 2px;
}
.subtitle {
font-family: proxima nova;
font-size: 12px;
font-weight: 200;
color: #9D9D9D;
text-align: center;
margin-top: -45px;
padding-bottom: 2px;
}
#second {
border-bottom: 1px solid #E6E6E6;
width: 480px;
margin: auto;
}
#Layer_1 {
width: 100px;
height: 100px;
}
#group2 {}
.whatwedo {
text-align: center;
width: 100%;
margin-top: 100px;
}
.subject {
text-align: center;
width: 300px;
display: inline-block;
margin: 0px 50px;
}
.subject img{
width: 100px;
}
.subject h2 {
font-family: proxima nova;
font-size: 20px;
font-weight: 600;
color: black;
margin-bottom: 12px;
}
.desc {
font-family: proxima nova;
font-size: 12px;
font-weight: 200;
color: #9D9D9D;
}
.group3 {
position: relative;
text-align: center;
color: white;
margin-top: 90px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: proxima nova;
font-size: 24px;
font-weight: 100;
color: white;
width: 550px;
}
form {
display: table;
margin: 0 auto;
}
#forth {
width: 100%;
}
#forth h2{
margin-bottom: 20px;
}
input[type=text],
select {
width: 400px;
padding: 13px 20px;
margin: 8px 0;
display: inline-block;
border-radius: 30px;
box-sizing: border-box;
font-family: proxima nova;
font-size: 14px;
}
input[type=submit] {
width: 160px;
background-color: #4CAF50;
color: white;
padding: 13px 20px;
margin: 8px 0;
border: none;
border-radius: 30px;
cursor: pointer;
background-color: #0B315C;
font-family: proxima nova;
font-size: 14px;
font-weight: bold;
position: relative;
bottom: 42px;
margin: -9px 0px 0px 240px;
}
.email-form {
width: 400px;
}
.email-form input {
border: 0;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
#hi{
background-color: #F9F9F9;
margin-top: -64px;
padding-top: 150px;
padding-bottom: 120px;
}
footer {
background-color: #30659B;
width: 100vw;
}
.logo2 {
width: 150px;
fill: white;
display: block;
}
.nav2 {
padding:0;
list-style-type: none;
color: white;
display: flex; /*Generates a flexbox layout with default flex direction as row */
width: 100%; /* Not really required */
height:100px;
align-items: center; /*Aligns contents vertically */
justify-content: space-around;
margin: 0px;
}
li {
padding:0;
font-family: proxima nova;
font-size: 10px;
text-decoration: none;
text-align:center;
margin:5px;
}
li:first-child{
margin-left:100px;
}
li:last-child{
margin-right:100px;
}
li a {
text-decoration: none;
color: white;
}
/*--- Media Queries --*/
#media screen and (max-width: 900px) {
.content {
padding-bottom: 10%;
}
.content h1 {
font-size: 400%
}
.btn {
font-size: 110%;
padding: 9px 43px;
}
}
#media screen and (max-width: 768px) {
.content {
padding-bottom: 12%;
}
.content h1 {
font-size: 300%
}
.btn {
font-size: 100%;
padding: 9px 43px;
}
}
#media screen and (max-width: 480px) {
.content {
padding-bottom: 14%;
}
.content h1 {
font-size: 300%
}
.btn {
font-size: 100%;
padding: 10px 44px;
}
}
<!DOCTYPE html>
<head>
<title>Launchpad | Web design and marketing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
</head>
<body>
<div class="logo">
<svg class="logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268 50"><title>Artboard 1</title><path d="M46.26,10.5h6.46V35.17H65.55v5.69H46.26Z"/><path d="M82.8,38.59a9.1,9.1,0,0,1-7,2.82c-3.5,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87A14.42,14.42,0,0,1,79,18.33c5,0,9.6,2,9.6,8.33v14.2H82.8Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M109.15,38.08a10.29,10.29,0,0,1-7.74,3.32c-4.82,0-7.1-2.64-7.1-6.92V18.88h5.78V32.21c0,3,1.59,4.05,4.05,4.05a6.47,6.47,0,0,0,5-2.5V18.88h5.78v22h-5.78Z"/><path d="M135.5,27.57c0-3-1.59-4.1-4.05-4.1a6.26,6.26,0,0,0-5,2.59V40.86h-5.78v-22h5.78v2.87a10.07,10.07,0,0,1,7.69-3.41c4.82,0,7.15,2.73,7.15,7V40.86H135.5Z"/><path d="M157.26,18.33c4.51,0,7.24,2,8.69,4l-3.78,3.5a5.44,5.44,0,0,0-4.64-2.37c-3.5,0-6,2.55-6,6.37s2.46,6.42,6,6.42a5.55,5.55,0,0,0,4.64-2.37L166,37.4c-1.46,2-4.19,4-8.69,4-6.78,0-11.65-4.78-11.65-11.56S150.48,18.33,157.26,18.33Z"/><path d="M184.61,27.48c0-3-1.59-4-4.1-4a6.4,6.4,0,0,0-5,2.59V40.86h-5.78V10.5h5.78V21.74a10.17,10.17,0,0,1,7.74-3.41c4.82,0,7.15,2.64,7.15,6.92V40.86h-5.78Z"/><path d="M196.12,49.24V18.88h5.78v2.78a8.49,8.49,0,0,1,6.78-3.32c5.64,0,9.74,4.19,9.74,11.52s-4.1,11.56-9.74,11.56A8.4,8.4,0,0,1,201.9,38v11.2Zm10.74-25.76a6.47,6.47,0,0,0-5,2.5v7.78a6.62,6.62,0,0,0,5,2.5c3.32,0,5.55-2.59,5.55-6.42S210.19,23.47,206.86,23.47Z"/><path d="M235.94,38.59a9.1,9.1,0,0,1-7,2.82c-3.51,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87a14.42,14.42,0,0,1,9.6-3.46c5,0,9.6,2,9.6,8.33v14.2h-5.78Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M262.57,38.08a8.62,8.62,0,0,1-6.78,3.32c-5.55,0-9.74-4.19-9.74-11.51s4.14-11.56,9.74-11.56a8.47,8.47,0,0,1,6.78,3.37V10.5h5.83V40.86h-5.83Zm0-12.11a6.36,6.36,0,0,0-5-2.5c-3.28,0-5.55,2.59-5.55,6.42s2.28,6.37,5.55,6.37a6.36,6.36,0,0,0,5-2.5Z"/><path d="M7.56,38.52l8.13,10.73a1.41,1.41,0,0,0,2.16,0L26,38.52a1.34,1.34,0,0,0-.56-2L18.53,33A4,4,0,0,0,15,33l-6.89,3.5A1.34,1.34,0,0,0,7.56,38.52Z"/><path d="M30.31,14.15,18.12.82a1.91,1.91,0,0,0-2.7,0L3.23,14.15a4,4,0,0,0-1,2.16L-.38,34.52c-.13.9,1,1.53,1.93,1.07L4.29,34.2l12.48-6.37L29.25,34.2,32,35.59c.92.47,2.06-.17,1.93-1.07l-2.57-18.2A4,4,0,0,0,30.31,14.15Z"/></svg>
</div>
<a id="hireus" href="/">HIRE US</a>
<ul class="nav">
<div class="new">
<li>HOME</li>
<li>ABOUT US</li>
<li>OUR WORK</li>
<li>SERVICES</li>
</div>
</ul>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0.2s">
<h1>Welcome to Launchpad</h1>
<p>We are a creative agency who specializes in digital marketing and graphic design. Let us launch your business to the next level!</p>
</section>
<section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0.7s">
<a class="btn" href="#">Hire Us</a>
<a class="btn2" href="#">Learn More</a>
</section>
</div>
</div>
</section>
<div id="second">
<h2 class="title">What we do</h2>
<p class="subtitle">Let us take your buisness to the next level.</p>
</div>
<div class="group2">
<div class="whatwedo">
<div class="subject" id="customdesign">
<img src="images/customdesign.svg" alt="Custom Design">
<h2 class="title2">Custom Design</h2>
<p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p>
</div>
<div class="subject" id="contentmarketing">
<img src="images/contentmarketing.svg" alt="Content Mrketing">
<h2 class="title2">Content Marketing</h2>
<p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p>
</div>
<div class="subject" id="emailmarketing">
<img src="images/emailmarketing.svg" alt="Email Marketing">
<h2 class="title2">Email Marketing</h2>
<p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p>
</div>
</div>
</div>
<div class="group3">
<img src="images/testimonialbg.png" alt="Norway" style="width:100%;">
<div class="centered">“The team at Launchpad exceeded our expectations!
They have a bright future ahead of them.”<br>
<span style="font-weight: 600;">Sam Molloy, Unmatched Masonry</span></div>
</div>
<!--
<div id="second">
<h2 class="title">Our work</h2>
<p class="subtitle">Nervous about taking off? Here's the portfolio.</p>
</div>
-->
<div id="hi">
<div id="forth">
<h2 class="title">Lets get in touch</h2>
<form action="mailto:contact#madebylaunchpad.com" method="post" enctype="text/plain" class="email-form">
<input type="text" name="mail" placeholder="Your email address"><br>
<input type="submit" value="Lets talk">
</form>
</div>
</div>
<footer>
<ul class="nav2">
<li class="li2">ABOUT US</li>
<li class="li2">OUR WORK</li>
<li class="li2">SERVICES</li>
<li>
<div class="logo2">
<svg class="logo2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268 50"><title>Artboard 1</title><path d="M46.26,10.5h6.46V35.17H65.55v5.69H46.26Z"/><path d="M82.8,38.59a9.1,9.1,0,0,1-7,2.82c-3.5,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87A14.42,14.42,0,0,1,79,18.33c5,0,9.6,2,9.6,8.33v14.2H82.8Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M109.15,38.08a10.29,10.29,0,0,1-7.74,3.32c-4.82,0-7.1-2.64-7.1-6.92V18.88h5.78V32.21c0,3,1.59,4.05,4.05,4.05a6.47,6.47,0,0,0,5-2.5V18.88h5.78v22h-5.78Z"/><path d="M135.5,27.57c0-3-1.59-4.1-4.05-4.1a6.26,6.26,0,0,0-5,2.59V40.86h-5.78v-22h5.78v2.87a10.07,10.07,0,0,1,7.69-3.41c4.82,0,7.15,2.73,7.15,7V40.86H135.5Z"/><path d="M157.26,18.33c4.51,0,7.24,2,8.69,4l-3.78,3.5a5.44,5.44,0,0,0-4.64-2.37c-3.5,0-6,2.55-6,6.37s2.46,6.42,6,6.42a5.55,5.55,0,0,0,4.64-2.37L166,37.4c-1.46,2-4.19,4-8.69,4-6.78,0-11.65-4.78-11.65-11.56S150.48,18.33,157.26,18.33Z"/><path d="M184.61,27.48c0-3-1.59-4-4.1-4a6.4,6.4,0,0,0-5,2.59V40.86h-5.78V10.5h5.78V21.74a10.17,10.17,0,0,1,7.74-3.41c4.82,0,7.15,2.64,7.15,6.92V40.86h-5.78Z"/><path d="M196.12,49.24V18.88h5.78v2.78a8.49,8.49,0,0,1,6.78-3.32c5.64,0,9.74,4.19,9.74,11.52s-4.1,11.56-9.74,11.56A8.4,8.4,0,0,1,201.9,38v11.2Zm10.74-25.76a6.47,6.47,0,0,0-5,2.5v7.78a6.62,6.62,0,0,0,5,2.5c3.32,0,5.55-2.59,5.55-6.42S210.19,23.47,206.86,23.47Z"/><path d="M235.94,38.59a9.1,9.1,0,0,1-7,2.82c-3.51,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87a14.42,14.42,0,0,1,9.6-3.46c5,0,9.6,2,9.6,8.33v14.2h-5.78Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M262.57,38.08a8.62,8.62,0,0,1-6.78,3.32c-5.55,0-9.74-4.19-9.74-11.51s4.14-11.56,9.74-11.56a8.47,8.47,0,0,1,6.78,3.37V10.5h5.83V40.86h-5.83Zm0-12.11a6.36,6.36,0,0,0-5-2.5c-3.28,0-5.55,2.59-5.55,6.42s2.28,6.37,5.55,6.37a6.36,6.36,0,0,0,5-2.5Z"/><path d="M7.56,38.52l8.13,10.73a1.41,1.41,0,0,0,2.16,0L26,38.52a1.34,1.34,0,0,0-.56-2L18.53,33A4,4,0,0,0,15,33l-6.89,3.5A1.34,1.34,0,0,0,7.56,38.52Z"/><path d="M30.31,14.15,18.12.82a1.91,1.91,0,0,0-2.7,0L3.23,14.15a4,4,0,0,0-1,2.16L-.38,34.52c-.13.9,1,1.53,1.93,1.07L4.29,34.2l12.48-6.37L29.25,34.2,32,35.59c.92.47,2.06-.17,1.93-1.07l-2.57-18.2A4,4,0,0,0,30.31,14.15Z"/></svg>
</div></li>
<li class="li3">TWITTER</li>
<li class="li3">FACEBOOK</li>
<li class="li3">INSTAGRAM</li>
</ul>
</footer>
</body>
</html>

Here's the code working:
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
</body>

I built a pretty easy example for you and I'll run you through the code here.
First here it is in action:
var selector = document.getElementById('showHide');
selector.onclick = function(){
var show = document.getElementById('hidden');
show.style.display = "block"
};
<ul class="nav">
<div class="new">
<li id="showHide">HOME</li>
<li id='hidden' style='display: none;'>Hello</li>
<li>ABOUT US</li>
<li>OUR WORK</li>
<li>SERVICES</li>
</div>
</ul>
This is going to be your nav bar. As you can see i made some changes. I gave your home button an id so that we can call it later. I also added a new <li> tag that is hidden from site by "display: none".
<ul class="nav">
<div class="new">
<li id="showHide"><a href="/" >HOME</a></li>
<li id='hidden' style='display: none;'>Hello</li>
<li>ABOUT US</li>
<li>OUR WORK</li>
<li>SERVICES</li>
</div>
</ul>
Here is the magic
var selector = document.getElementById('showHide');
selector.onclick = function(){
var show = document.getElementById('hidden');
show.style.display = "block"
};
At the top we create a selector variable to tell it what we want to target, which for us will be the Home button.
Below that we write a function that triggers when our selector is clicked. When it is triggered we define what we want to change(in this case that would be the element with the id of "hidden"). After that we simply edit it's display property to show.

We Keep Coding

JavaScript is the programming language of the Web.

I am trying to make a responsive nav bar - javascript

Related

Search Bar showing footer when any word is typed in thats not on the product cards

How to make an animation on my menu bar in CSS

HTML - Dropdown with ahref and button

HTML/CSS: Add Icon to Text Button

Add text pop up on link click

Categories

Resources