I'm a graphic designer who started coding a few weeks ago to hopefully move into front end stuff. This sample website I'm building isn't cooperating in the navbar area. I have it set up nicely in all my desktop views, but when it collapses, I can't seem to get it to work. It won't expand or show menu items. I looked up everything I could, but I just got different types of navbars with the same problem. I'm using Brackets.
Any help at all is appreciated, even if you see something unrelated I'm bugging up.
Thank you!
Here is my html
<!DOCTYPE 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"> <title>loot</title> <meta name="description" content="fast and personal messenger delivery service"> <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div> <div> </div> </div> <div> <nav class = "navbar navbar-default navbar-right" role = "navigation"> <div class = "navbar-header"> <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#example-navbar-collapse"> <span class = "sr-only">Toggle navigation</span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> </button> </div> <div class = "collapse navbar-collapse" id = "example-navbar-collapse"> <ul class = "nav navbar-nav"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">About</a></li> <li><a href= "#">Merch</a></li> <li><div>Schedule a pickup</div></li> <li><div>Schedule a delivery</div></li> </ul> </div> </nav> </div> </body> and my CSS
.header { background-color: #46B4CE !important; background: url(images/) no-repeat center center; background-size: 30%; position: relative; margin-top: 25px; height: 20em; } /*extra small devices*/ @media (min-width: 300px) { .header { background-size: 55%; height: 15em; } } /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { .header { background-size: 40%; } } /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { .header { background-size: 30%; } } .btn{ margin-left:10px; margin-top:8px; } .navbar { margin-top: -30px; } mobile view not able to be expanded
41 Answer
You have to add bootstrap js and jquery min js to work nav menu.
.header { background-color: #46B4CE !important; background: url(images/) no-repeat center center; background-size: 30%; position: relative; margin-top: 25px; height: 20em; } /*extra small devices*/ @media (min-width: 300px) { .header { background-size: 55%; height: 15em; } } /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { .header { background-size: 40%; } } /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { .header { background-size: 30%; } } .btn{ margin-left:10px; margin-top:8px; } .navbar { margin-top: -30px; }<!DOCTYPE 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"> <title>loot</title> <meta name="description" content="fast and personal messenger delivery service"> <!-- <link rel="stylesheet" href="main.css"> --> <link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script type="text/javascript" src=""></script> <script type="text/javascript" src=""></script> </head> <body> <div> <div> </div> </div> <div> <nav class = "navbar navbar-default navbar-right" role = "navigation"> <div class = "navbar-header"> <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#example-navbar-collapse"> <span class = "sr-only">Toggle navigation</span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> </button> </div> <div class = "collapse navbar-collapse" id = "example-navbar-collapse"> <ul class = "nav navbar-nav"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">About</a></li> <li><a href= "#">Merch</a></li> <li><div>Schedule a pickup</div></li> <li><div>Schedule a delivery</div></li> </ul> </div> </nav> </div> </body>
