To add a class to an element you would use
someElement.classList.add("someClass")
To remove a class
someElement.classList.remove("someClass")
To check if an element has a certain class
someElement.classList.contains("someClass")
Try this:
// Responsive navbar Javascript
function responsivetopnav() {
var x = document.getElementById("topnav1");
if (x.classList.contains("topnav")) {
x.classList.add("responsive");
} else {
x.classList.add("topnav");
}
}
a:hover{background-color:#ddff00; }
here is a code from my course, so when the mouse it’s going over, changes the color, of course, that you can change the color
let me know if it’s working
This is my first time asking a question here so please hit me up if I’m doing anything wrong 🙂
I recently started developing my first website, locally, and I am stuck on a small problem that I can’t seem to figure out.
So I have a button in my navbar that I’m using for a login form and I’m trying to make the navbar responsive, but the button won’t go away so that the hamburger menu icon can be shown.
Could you please help me figure out what’s wrong? I just started scratching the surface of web development, so if this seems silly I’m sorry…
Thank you so much, I really aprreciate it! 🙂
// Responsive navbar Javascript
function responsivetopnav() {
var x = document.getElementById("topnav1");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
//Log in Javascript
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}/* Styling the topnav */
.topnav {
background-color: rgba(16, 10, 16, 0.7);
overflow: hidden;
width: 100%;
height: 40px;
display: block;
transition: top 0.3s;
top: 0;
}
.topnav a {
float: right;
color: white;
text-align: center;
padding: 7px 17px;
text-decoration: none;
font-size: 15px;
display: block;
top: 0;
}
.topnav a:hover {
border-bottom: 3px solid white;
}
.topnav .icon {
display: none;
}
/* Styling the login interface */
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: transparent;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
.buttonsubmit {
background-color: blue;
color: white;
cursor: pointer;
width: 50%;
}
button:hover {
opacity: 0.8;
}
.signupbtn {
background-color: black;
color: white;
cursor: pointer;
width: 100%;
text-align: center;
}
.cancelbtn {
width: 48%;
background-color: #f44336;
}
.containeruser {
padding: 16px;
left: 10cm;
}
span.psw {
float: right;
padding-top: 16px;
}
.modal {
display: none;
position: fixed;
z-index: 2;
/* Sit on top */
left: 18cm;
top: 5cm;
width: 30%;
height: 100%;
overflow: auto;
padding-top: 40px;
color: black;
}
.modal2 {
display: none;
position: fixed;
z-index: 5;
left: 18cm;
top: 4cm;
width: 30%;
height: 100%;
overflow: auto;
padding-top: 0px;
color: black;
}
.modal-content {
background-color: white;
margin: 5% auto 15% auto;
border: 1px solid #888;
width: 80%;
border-radius: 10px;
color: black;
}
.modal2-content2 {
background-color: white;
margin: 5% auto 15% auto;
border: 1px solid #888;
width: 80%;
border-radius: 10px;
color: black;
}
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}<div class="topnav" id="topnav1">
<!-- The button I'm trying to hide -->
<a><button onclick="document.getElementById('id01').style.display='block'"><i class="fas fa-sign-in-alt"></i><b> Login</b></button></a>
<div id="id01" class="modal">
<form class="modal-content animate" action="..EWD WebsitePHPlogin.php" method="post">
<div class="containeruser">
<h2 style="color:black; text-align:center;">Login</h2>
<label for="email"><b style="color:black">E-mail</b></label></br>
<input type="text" placeholder="Introduceţi e-mail" name="email" style="width: 100%; border: 1px solid grey; color:black;" required></br>
<label for="psw"><b style="color:black">Parola</b></label>
<input type="password" placeholder="Introduceţi parola" name="psw" style="width: 100%; border: 1px solid grey; color:black;" required>
<button type="submit" class="buttonsubmit">Login</button>
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Anulare</button></br>
<label style="color:black"><input type="checkbox" checked="checked" name="remember">Ţine-mă minte</label>
<a href="#" style="color:black;">Aţi uitat parola?</a>
<h4 style="color:black">Nu ai cont?</h4>
<button type="button" onclick="document.getElementById('id02').style.display='block';document.getElementById('id01').style.display='none'" class="signupbtn">Înscrie-te acum</button>
</div>
</form>
</div>
<div id="id02" class="modal2">
<form class="modal2-content2 animate" action="..EWD WebsitePHPsignup.php" method="post">
<div class="containeruser">
<h2 style="color:black;text-align:center;">Înregistrare</h2>
<label for="fname"><b style="color:black;">Nume</b</label></br>
<input type="text" placeholder="Introduceţi numele dumneavoastră" name="fname" style="width: 100%; border: 1px solid grey; color:black;" required></br>
<label for="lname"><b style="color:black;">Prenumele</b></label></br>
<input type="text" placeholder="Introduceţi prenumele dumneavostră" name="fname" style="width: 100%; border: 1px solid grey; color:black;" required></br>
<label for="email"><b>E-mail</b></label></br>
<input type="text" placeholder="Introduceţi adresa dumneavoastră de e-mail" name="email" style="width: 100%; border: 1px solid grey; color:black;" required></br>
<label for="gender"><b>Sex</b></label>
<div style="padding-left:10px;">
<input type="radio" id="male" name="gender" value="male">Masculin</input>
<input type="radio" id="female" name="gender" value="female">Feminin</input>
<input type="radio" id="other" name="gender" value="other">Altceva</input>
</br>
</br>
</div>
<label for="age"><b>Vârsta</b></label></br>
<input type="text" placeholder="Introduceţi vârsta dumneavoastră" name="age" style="width: 100%; border: 1px solid grey; color:black;" required></br>
<label for="psw"><b>Parola</b></label>
<input type="password" placeholder="Introduceţi o parolă" name="psw" style="width: 100%; border: 1px solid grey; color:black;" required>
<label for="pswrepeat"><b>Reintroduceţi parola</b></label>
<input type="password" placeholder="Reintroduceţi parola de mai sus" name="pswrepeat" style="width: 100%; border: 1px solid grey; color:black;" requiredt>
<button type="submit" class="buttonsubmit">Înregistrare</button>
<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Anulare</button>
<h4>Ai deja cont?</h4>
<button onclick="document.getElementById('id01').style.display='block';document.getElementById('id02').style.display='none'" class="signupbtn">Login</button>
</div>
</form>
</div>
<script src="..EWD WebsiteJavaScriptuser.js"></script>
<a href="#contact"><i class="fas fa-info"></i> Contact</a>
<a href="http://www.tfl.gov.uk" target="_blank"><i class="fas fa-link"></i> Transport for London Website</a>
</div>Please refer this answer. Hope it will be helpful.
Thanks @TanmoySarkar for the promt response! Will try it out and see how it goes.
Thank you for the answer, but this has nothing to do with my question nor with navbar responsiveness. It just changes the background on hover.