I want to the dropdown to be displayed at the bottom of the NAV BRAND (or Nav logo on the top left) when pressing the menu button. But, it appears next to the button in mobile view and in the center. See here:
Below is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<!-- TOP NAVBAR -->
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
MOCK WEBSITE
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>ABOUT</li>
<li class="dropdown">
PORTFOLIO <b class="caret"></b>
<ul class="dropdown-menu">
<li>PHOTOS</li>
<li>VIDEOS</li>
<li>MUSIC</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</div> <!-- Container -->
</div> <!-- Nav -->
<div class="jumbotron">
<div class="container">
<h1>MOCK WEBSITE</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<h4>Contact Me</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="contact-email" placeholder="you#example.com">
</div>
</div>
<div class="form-group">
<label for="contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class="form-control" rows="8" placeholder="Write your message..."></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">Send</button>
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</form>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site Built By Andrew Vu</p>
Subscribe on YouTube
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
You've forgotten wrapper navbar-header to group brand and button:
<div class="navbar-header">
MOCK WEBSITE
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
jsfiddle-example
Related
I have given three textbox in a form .If I resize the page little bit , the label control is overlapped with textbox and some part of the label is not visible. How can I fix this issue. I have given _layout.cs file code here with and also I have attached the employee edit horizontal view html
My layout file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Vehicle Management</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
<!-- Custom styles for this template -->
<link rel="stylesheet" href="~/css/simple-sidebar.css" />
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"> Menu </div>
<div class="list-group list-group-flush">
Dashboard
<a class="list-group-item list-group-item-action bg-light" asp-controller="Vehicle"
asp-action="Index">Vehicle</a>
<a class="list-group-item list-group-item-action bg-light" asp-controller="Employee"
asp-action="Employeelist">Overview</a>
#*Events
Profile
Status*#
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>
<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 ml-auto mt-2 mt-lg-0">
#*<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>*#
#*<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>*#
#*Commended by Polachan*#
#*<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>*#
</ul>
</div>
</nav>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
#RenderSection("Scripts", required: false)
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
#model EmpMgt.Models.ViewModels.AddEmployee
<br />
<form asp-controller="Employee"
asp-action="AddEmployee"
data-ajax="true"
data-ajax-method="POST"
data-ajax-mode="replace"
data-ajax-update="#content"
class="form-horizontal"
role="form" data-parsley-validate novalidate>
<div class="row">
<div class="col-sm-4">
<div class="form-group row">
<label class="control-label col-sm-3">Name</label>
<div class="col-sm-9">
<input class="form-control" type="text" asp-for="Employee.Name" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group row">
<label class="control-label col-sm-3">Address1</label>
<div class="col-sm-9">
<input class="form-control" type="text" asp-for="Employee.Address1" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group row">
<label class="control-label col-sm-3">Address2</label>
<div class="col-sm-9">
<input class="form-control" type="text" asp-for="Employee.Address2" />
</div>
</div>
</div>
</div>
</form>
Here is a demo worked:
View:
<br />
<form asp-controller="Employee"
asp-action="AddEmployee"
data-ajax="true"
data-ajax-method="POST"
data-ajax-mode="replace"
data-ajax-update="#content"
class="form-horizontal"
role="form" data-parsley-validate novalidate>
<div class="row">
<div class="col-sm-4">
<div class="form-group row">
<label class=" control-label " style="margin-right:10px">Name</label>
<input class="form-control" type="text" style="width:60%;" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group row">
<label class=" control-label " style="margin-right:10px">Address1</label>
<input class="form-control" type="text" style="width:60%;" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group row">
<label class=" control-label " style="margin-right:10px">Address2</label>
<input class="form-control" type="text" style="width:60%;" />
</div>
</div>
</div>
</form>
result:
I tried to make a login button which opens up a modal for login details. When I click on the button it is referred to that point where I want it to be. But nothing opens up. A similar problem is with another button that has to open up another modal.
My 2nd problem in about the navbar toggling action is not working. there is no response from the button when I click on the toggle button.
below is my code - :
CODE FOR NAV BAR BUTTON -
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-md fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon "></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.png" height="30" width="41"></a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#"><span class="fa fa-home fa-lg"></span>
Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html"><span
class="fa fa-info fa-lg"></span> About</a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span> Menu</a>
</li>
<li class="nav-item"><a class="nav-link" href="contactus.html"><span
class="fa fa-address-card fa-lg"></span> Contact</a></li>
</ul>
<span class="navbar-text">
<a data-toggle="modal" href="#loginModal">
<span class="fa fa-sign-in"></span> Login
</a>
</span>
</div>
</div>
</nav>
-------------------------------------------------
-------------------------------------------------
CODE FOR LOGIN MODAL -
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog-centered modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3"
placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1"
id="exampleInputPassword3" placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>
</div>
</form>
</div>
</div>
</div>enter code here
</div>
</body>
' <!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js">
</script>
<script src="node_modules/popper.js/dist/umd/popper.min.js">
</script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js">
</script>
<script>'$'(document).on('.data-api')</script>
<script>'
.navbar-toggler {bordeR:2px solid red !important;}
body{min-height: 500px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-expand-md">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon "></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.png" height="30" width="41"></a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#"><span class="fa fa-home fa-lg"></span>
Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html"><span
class="fa fa-info fa-lg"></span> About</a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span> Menu</a>
</li>
<li class="nav-item"><a class="nav-link" href="contactus.html"><span
class="fa fa-address-card fa-lg"></span> Contact</a></li>
</ul>
<span class="navbar-text">
<a data-toggle="modal" data-target="#loginModal">
<span class="fa fa-sign-in"></span> Login
</a>
</span>
</div>
</div>
</nav>
<div id="loginModal" class="modal" role="dialog">
<div class="modal-dialog-centered modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3"
placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1"
id="exampleInputPassword3" placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
There is no Bootstrap JS and jQuery Added, so without it, modal will not work
do not pass href on login button, instead use data-target="#loginModal"
remove FADE class from modal,
I have removed many other classes from your code just for demo purpose, like fixed top on nav, yuou have have those as per your requirements
I use Asp.net mvc and bootstrap , I tried to put search bar to the right of the navbar by pull-right and float-right but it's not working seacrh bar stays next to other elements on the left of the navbr.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-inverse">
<div style="">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("RAWAN", "Index", "Home")
</div>
<!-- Note the new id: #bs-example-navbar-collapse-2 -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav" style="color:white">
<li>#Html.ActionLink("News", "About", "Home")</li>
<li>#Html.ActionLink("Supervisors", "Contact", "Home")</li>
<li>#Html.ActionLink("Senior Projects", "Contact", "Home")</li>
<li>#Html.ActionLink("About me", "Contact", "Home")</li>
<!-- Search bar -->
<li class="pull-right" style="padding-right:-50px;">
<div class=" float-right pull-right">
<form class="navbar-form pull-right" role="search" >
<div class="input-group pull-right">
<input type="text" class="form-control pull-right" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default pull-right" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
The ul has css classes nav and navbar-nav, which gives it the float: left styling, which aligns it with the left of its container, and makes the ul wrap its content without leaving any space between elements unless explicitly instructed to.
In order to see the effects of the float: right on the search bar, try placing that div in the same container as the ul like so:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-inverse">
<!-- <div class="container"> -->
<div style="">
<div class="navbar-header">
<!-- Note: data-target="#bs-example-navbar-collapse-2" -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("RAWAN", "Index", "Home")
</div>
<!-- Note the new id: #bs-example-navbar-collapse-2 -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav" style="color:white">
<li>#Html.ActionLink("News", "About", "Home")</li>
<li>#Html.ActionLink("Supervisors", "Contact", "Home")</li>
<li>#Html.ActionLink("Senior Projects", "Contact", "Home")</li>
<li>#Html.ActionLink("About me", "Contact", "Home")</li>
</ul>
<!-- Search bar -->
<div class=" float-right pull-right">
<form class="navbar-form pull-right" role="search" >
<div class="input-group pull-right">
<input type="text" class="form-control pull-right" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default pull-right" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
You need to place the search bar outside of the <ul> and place it in the same container as the <ul>. Additionally, you only need one pull-right in the top level container for your search bar.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse">
<div style="">
<div class="navbar-header">
<a class="navbar-brand" href="#">RAWAN</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Note the new id: #bs-example-navbar-collapse-2 -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav" style="color:white">
<li>News</li>
<li>Supervisors</li>
<li>Senior Projects</li>
<li>About Me</li>
</ul>
<!-- Search bar -->
<div class="pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
I'm trying to create a responsive header in Bootstrap and am having problems getting it right for mobile devices - it look good for large displays. Here is my html code for layout. I would highly appreciate your help!!! The pic is below the code. Thank you!!!
<section class="container">
<!--HEADER-->
<div class="row header" >
<div class="col-md-6">
<div class="logo">
<img src="img/logo.png" class="img-responsive" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!--/Logo-->
</div>
<div class="col-sm-6 col-lg-6">
<!--Top Utility Links-->
<div class="col-sm-12">
<ul class="utility">
<li>Home</li>
<li>contacts</li>
<li>Help</li>
</ul>
</div><!--/col-sm-12 UTILITY-->
<!--SEARCH-->
<div class="col-md-8 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default search" type="submit"> <i class="glyphicon glyphicon-search"></i> </button>
</div>
<!--/input-group-btn -->
</div>
<!--/input group -->
</form>
</div><!--/col-sm-8 SEARCH-->
</div>
<!-- <nav class="navbar navbar-default" role="navigation">-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right ">
<li>ABOUT</li>
<li>SERVICES</li>
<li class="dropdown">
HISTORY <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link</li>
<li>Another link</li>
<li>One More Link</li>
</ul>
</li>
</ul>
</div>
<!-- </nav>-->
</div>
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">Home</li>
<li>Mac OS9</li>
<li>DOS</li>
<li>Windows '95</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>
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>
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">Home</li>
<li>Mac OS9</li>
<li>DOS</li>
<li>Windows '95</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">×</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>