I wanted to add a bootstrap collapse navbar for smaller screen sizes for tablets and mobile phones. For some reason the navbar collapses in general even at the regular laptop screen size. Also when I press the button, the links appear below the navbar instead of inside the navbar. Don't understand the issue as I have used this same bootstrap collapse code before on a different project and had no issues. Please help if you can, thank you.
body {
margin: 0;
padding: 0;
background: url(../Images/td.jpg) center/cover fixed no-repeat;
opacity: 5;
}
/* Navbar */
.navbar {
background: #0c0452;
padding: 20px 20px;
width: 100%;
height: 80px;
}
.logo {
height: 50px;
margin: 5px 10px;
}
.links {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.links li {
display: inline;
}
.links li a {
padding: 40px;
color: gold;
font-family: "Calistoga", cursive;
}
/* End of Navbar */<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/><link rel="stylesheet" href="css/style.css" /><title>Lavonte Hights</title><!-- Google Fonts --><link
href="https://fonts.googleapis.com/css?family=Calistoga&display=swap"
rel="stylesheet"
/><!-- Font Awesome --><link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/><!-- Latest compiled and minified CSS Bootstrap --><link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/><!-- jQuery library --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><!-- Popper JS --><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script><!-- Latest compiled JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><!--Navbar--><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><img src="Images/sheplogo2.jpg" alt="" class="logo" /><div class="navbar-header"><button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#myNavbar"><div class="toggler-btn"><div class="bar bar1"></div><div class="bar bar2"></div><div class="bar bar3"></div></div></button></div><div class="collapse navbar-collapse" id="myNavbar"><ul class="links navbar-nav mx-auto"><li class="nav-item"><a href="#home">Home</a></li><li class="nav-item"><a href="#bio">Bio</a></li><li class="nav-item"><a href="#awards">Career Stats/Awards & Accolades</a></li><li class="nav-item"><a href="#film">Film</a></li></ul></div></div></nav><!--End of Navbar--></body></html>