I am fairly new to Javascript, when it comes to web development. I am using a bootstrap to build a navbar. My navbar looks fine when it is expanded but when it collapses, the design messes up. My code looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">E-Commerce</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<div class='form-inline my-2 my-lg-0'>
<a href="" class="btn btn-warning change-style" style="margin-right:5px;">SignUp</a>
<a href="" class="btn btn-warning change-style">Login</a>
<a href=""><img id="cart-icon" src="" alt="cart"></a>
<p id="cart-total">0</p>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
My custom style sheet main.css has the following code
#cart-icon {
width: 25px;
display: inline-block;
margin-left: 15px;
}
.bg-dark {
background-color: #4f868c !important;
}
#cart-total {
display: block;
text-align: center;
background-color: red;
color: #fff;
border-radius: 50%;
font-size: 14px;
width: 20px;
height: 25px;
}
When the navbar collapses my login, signup buttons appear in a single line inside collapsed navbar menu but I want them to be shown as seperate navbar links just like the Home link and loose the btn class. I have tried writing the following js script, but it does not produce the desired effect.
var toggleButton = document.getElementsByClassName("navbar-toggler");
toggleButton[0].addEventListener("click", () => {
var buttons = document.getElementsByClassName("change-style");
for (i = 0; i < buttons.length; i++) {
buttons[i].className = "nav-link";
}
});
Can someone please help?
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">E-Commerce</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<div class='form-inline my-2 my-lg-0'>
<a href="" class="btn btn-warning change-style" style="margin-right:5px;">SignUp</a>
<a href="" class="btn btn-warning change-style">Login</a>
<a href=""><img id="cart-icon" src="" alt="cart"></a>
<p id="cart-total">0</p>
</div>
</div>
</nav>
For CSS
#cart-icon {
width: 25px;
display: inline-block;
margin-left: 15px;
}
.bg-dark {
background-color: #4f868c !important;
}
#cart-total {
display: block;
text-align: center;
background-color: red;
color: #fff;
border-radius: 50%;
font-size: 14px;
width: 20px;
height: 25px;
}
@media only screen and (max-width: 600px){
.btn{
display: block;
margin-bottom: 1rem;
float: left;
}
.form-inline{
flex-direction: column;
align-items: flex-start;
}
}
I Hope this will be your desire effect. I know that My answer is not 100% perfect generally because what I am doing now is changing the BOOTSTRAP STYLE This is a big no when its come to ui.
What you are doing now is you want to make a navbar by using the help of bootstrap.Using bootstrap will make it easy to create a naybar but Hard to style according to your need. What I recommend is learn more about basic CSS and javascript then try again.
AND Your javascript code syntax is incorrect.