1

The button that is used on mobile devices to view the navbar is not showing up when I make the browser window size smaller to see how it looks on mobile. Here is a CodePen to see my code

<div class="container"> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <a class="navbar-brand" href="#"><h4>EmulateOS.tk</h4></a> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Mac OS9</a></li> <li><a href="#">DOS</a></li> <li><a href="#">Windows '95</a></li> </ul> <form class="navbar-form navbar-left" role="search"> <input type="text" class="form-control" placeholder="Search"> <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> </form> </div> </div> </div> </div>
Improve this question

2 Answers 2

Reset to default
1

The nav is supposed to disappear on mobile screens - in mobile views, the menu is visible by activating the menu by clicking a button. The navbar-collapse class ensures this. See the Bootstrap docs for how to achieve this:

http://getbootstrap.com/components/#navbar

And their examples for different ways this can be implemented:

http://getbootstrap.com/getting-started/#examples

Specifically, this is the critical aspect for your code:

<div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div>
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I know what it's supposed to do, when the page is loaded on a mobile device, or the screen size is smaller, a button is supposed to appear that allows the user to access the navbar. The problem is, the button doesn't show
you don't have the button in your code - if this Fiddle doesn't help let me know in what way, if it does please accept the answer.. jsfiddle.net/tobyl/6u9e7ms4
I don't understand what code I'm supposed to add to my navbar to make the button appear.
See my edit to the answer I posted. The button with a class of navbar-toggle is missing from your code, so it will never appear regardless of screen size.
Does the Fiddle I posted work? If so, then adjust your code and update the code in your question.
|
0

Your code is missing few boot strap styles. Here is the working code -

http://codepen.io/anon/pen/BzAWVa

<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Course</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <style type="text/css"> body { padding: 60px; } </style> </head> <body> <!-- Fixed navbar --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">EmulateOS.tk</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Mac OS9</a></li> <li><a href="#">DOS</a></li> <li><a href="#">Windows '95</a></li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> </form> </div> </div><!--/.nav-collapse --> </nav> <div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div> <a data-target="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span>Sign up for weekly newsletter</a> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Sign up for the newsletter</h4> <div class=modal-body> </div> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </html>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.