Bootstrap NavBar Hamburger Menu not working on Mobile
1
When I make the window smaller on my mac the hamburger menu appears but on mobile it does not. The navbar just becomes very unformatted. Any kind of help will be much appreciated. Thanks!
<nav class="navbar navbar-inverse">
<div class="container">
<div class = "row">
<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>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to "HomePage", listings_path %></li>
<li><%= link_to "Reviews", reviews_path %> </li>
<li><%= link_to "My Personal Listings", mylistings_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<%if user_signed_in? && current_user.admin? %>
<li><%= link_to "Admin Page", users_path %></li>
<li><%= link_to "Add a Personal Listing", new_mylisting_path %></li>
<%end%>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Your Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Sign In', new_user_session_path %></li>
<li><%= link_to 'Sign Up', new_user_registration_path %></li>
<li><%= link_to('Sign Out', destroy_user_session_path, :method => :delete) %></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Additional Resources<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Zillow', "http://www.zillow.com/", :target => "_blank"%></li>
<li><%= link_to 'Realtor.com', "https://www.realtor.com/", :target => "_blank"%></li>
<li><%= link_to "Multiple Listing Service", "http://www.mls.com/", :target => "_blank"%></li>
<li><%= link_to 'Trulia', "https://www.trulia.com/", :target => "_blank"%></li>
<li><%= link_to 'Redfin', "https://www.redfin.com/", :target => "_blank"%></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
html css ruby-on-rails ruby twitter-bootstrap
asked Nov 15 '18 at 3:26
Matt GrossmanMatt Grossman
83
add a comment |
1
When I make the window smaller on my mac the hamburger menu appears but on mobile it does not. The navbar just becomes very unformatted. Any kind of help will be much appreciated. Thanks!
<nav class="navbar navbar-inverse">
<div class="container">
<div class = "row">
<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>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to "HomePage", listings_path %></li>
<li><%= link_to "Reviews", reviews_path %> </li>
<li><%= link_to "My Personal Listings", mylistings_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<%if user_signed_in? && current_user.admin? %>
<li><%= link_to "Admin Page", users_path %></li>
<li><%= link_to "Add a Personal Listing", new_mylisting_path %></li>
<%end%>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Your Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Sign In', new_user_session_path %></li>
<li><%= link_to 'Sign Up', new_user_registration_path %></li>
<li><%= link_to('Sign Out', destroy_user_session_path, :method => :delete) %></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Additional Resources<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Zillow', "http://www.zillow.com/", :target => "_blank"%></li>
<li><%= link_to 'Realtor.com', "https://www.realtor.com/", :target => "_blank"%></li>
<li><%= link_to "Multiple Listing Service", "http://www.mls.com/", :target => "_blank"%></li>
<li><%= link_to 'Trulia', "https://www.trulia.com/", :target => "_blank"%></li>
<li><%= link_to 'Redfin', "https://www.redfin.com/", :target => "_blank"%></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
html css ruby-on-rails ruby twitter-bootstrap
asked Nov 15 '18 at 3:26
Matt GrossmanMatt Grossman
83
add a comment |
1
1
1
When I make the window smaller on my mac the hamburger menu appears but on mobile it does not. The navbar just becomes very unformatted. Any kind of help will be much appreciated. Thanks!
<nav class="navbar navbar-inverse">
<div class="container">
<div class = "row">
<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>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to "HomePage", listings_path %></li>
<li><%= link_to "Reviews", reviews_path %> </li>
<li><%= link_to "My Personal Listings", mylistings_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<%if user_signed_in? && current_user.admin? %>
<li><%= link_to "Admin Page", users_path %></li>
<li><%= link_to "Add a Personal Listing", new_mylisting_path %></li>
<%end%>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Your Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Sign In', new_user_session_path %></li>
<li><%= link_to 'Sign Up', new_user_registration_path %></li>
<li><%= link_to('Sign Out', destroy_user_session_path, :method => :delete) %></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Additional Resources<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Zillow', "http://www.zillow.com/", :target => "_blank"%></li>
<li><%= link_to 'Realtor.com', "https://www.realtor.com/", :target => "_blank"%></li>
<li><%= link_to "Multiple Listing Service", "http://www.mls.com/", :target => "_blank"%></li>
<li><%= link_to 'Trulia', "https://www.trulia.com/", :target => "_blank"%></li>
<li><%= link_to 'Redfin', "https://www.redfin.com/", :target => "_blank"%></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
html css ruby-on-rails ruby twitter-bootstrap
asked Nov 15 '18 at 3:26
Matt GrossmanMatt Grossman
83
When I make the window smaller on my mac the hamburger menu appears but on mobile it does not. The navbar just becomes very unformatted. Any kind of help will be much appreciated. Thanks!
<nav class="navbar navbar-inverse">
<div class="container">
<div class = "row">
<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>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to "HomePage", listings_path %></li>
<li><%= link_to "Reviews", reviews_path %> </li>
<li><%= link_to "My Personal Listings", mylistings_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<%if user_signed_in? && current_user.admin? %>
<li><%= link_to "Admin Page", users_path %></li>
<li><%= link_to "Add a Personal Listing", new_mylisting_path %></li>
<%end%>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Your Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Sign In', new_user_session_path %></li>
<li><%= link_to 'Sign Up', new_user_registration_path %></li>
<li><%= link_to('Sign Out', destroy_user_session_path, :method => :delete) %></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Additional Resources<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Zillow', "http://www.zillow.com/", :target => "_blank"%></li>
<li><%= link_to 'Realtor.com', "https://www.realtor.com/", :target => "_blank"%></li>
<li><%= link_to "Multiple Listing Service", "http://www.mls.com/", :target => "_blank"%></li>
<li><%= link_to 'Trulia', "https://www.trulia.com/", :target => "_blank"%></li>
<li><%= link_to 'Redfin', "https://www.redfin.com/", :target => "_blank"%></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
html css ruby-on-rails ruby twitter-bootstrap
html css ruby-on-rails ruby twitter-bootstrap
asked Nov 15 '18 at 3:26
Matt GrossmanMatt Grossman
83
asked Nov 15 '18 at 3:26
Matt GrossmanMatt Grossman
83
asked Nov 15 '18 at 3:26
Matt GrossmanMatt Grossman
83
asked Nov 15 '18 at 3:26
Matt GrossmanMatt Grossman
83
asked Nov 15 '18 at 3:26
Matt GrossmanMatt Grossman
83
83
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
It works fine. You didn't add the second two icon bars. See snippet below or codepen.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container">
<div class = "row">
<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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to "HomePage", listings_path %></li>
<li><%= link_to "Reviews", reviews_path %> </li>
<li><%= link_to "My Personal Listings", mylistings_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<%if user_signed_in? && current_user.admin? %>
<li><%= link_to "Admin Page", users_path %></li>
<li><%= link_to "Add a Personal Listing", new_mylisting_path %></li>
<%end%>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Your Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Sign In', new_user_session_path %></li>
<li><%= link_to 'Sign Up', new_user_registration_path %></li>
<li><%= link_to('Sign Out', destroy_user_session_path, :method => :delete) %></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Additional Resources<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Zillow', "http://www.zillow.com/", :target => "_blank"%></li>
<li><%= link_to 'Realtor.com', "https://www.realtor.com/", :target => "_blank"%></li>
<li><%= link_to "Multiple Listing Service", "http://www.mls.com/", :target => "_blank"%></li>
<li><%= link_to 'Trulia', "https://www.trulia.com/", :target => "_blank"%></li>
<li><%= link_to 'Redfin', "https://www.redfin.com/", :target => "_blank"%></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>answered Nov 15 '18 at 3:36
webfrogswebfrogs
1,16832447
Thank you for your suggestions! However, when I go to the app on mobile the hamburger menu still does not appear. I am on an iphone 7+.
– Matt Grossman
Nov 15 '18 at 4:36
@MattGrossman Do you have the required meta tag for viewport?<meta name="viewport" content="width=device-width, initial-scale=1">Bootstrap Overview -Mobile First If you look at the CodePen provided and click on Settings you will see the same is included there as well
– engineersmnky
Nov 15 '18 at 19:22
that was it! THANK YOU SO MUCH!
– Matt Grossman
Nov 15 '18 at 19:42
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53311978%2fbootstrap-navbar-hamburger-menu-not-working-on-mobile%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
It works fine. You didn't add the second two icon bars. See snippet below or codepen.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container">
<div class = "row">
<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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to "HomePage", listings_path %></li>
<li><%= link_to "Reviews", reviews_path %> </li>
<li><%= link_to "My Personal Listings", mylistings_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<%if user_signed_in? && current_user.admin? %>
<li><%= link_to "Admin Page", users_path %></li>
<li><%= link_to "Add a Personal Listing", new_mylisting_path %></li>
<%end%>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Your Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Sign In', new_user_session_path %></li>
<li><%= link_to 'Sign Up', new_user_registration_path %></li>
<li><%= link_to('Sign Out', destroy_user_session_path, :method => :delete) %></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Additional Resources<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Zillow', "http://www.zillow.com/", :target => "_blank"%></li>
<li><%= link_to 'Realtor.com', "https://www.realtor.com/", :target => "_blank"%></li>
<li><%= link_to "Multiple Listing Service", "http://www.mls.com/", :target => "_blank"%></li>
<li><%= link_to 'Trulia', "https://www.trulia.com/", :target => "_blank"%></li>
<li><%= link_to 'Redfin', "https://www.redfin.com/", :target => "_blank"%></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>answered Nov 15 '18 at 3:36
webfrogswebfrogs
1,16832447
Thank you for your suggestions! However, when I go to the app on mobile the hamburger menu still does not appear. I am on an iphone 7+.
– Matt Grossman
Nov 15 '18 at 4:36
@MattGrossman Do you have the required meta tag for viewport?<meta name="viewport" content="width=device-width, initial-scale=1">Bootstrap Overview -Mobile First If you look at the CodePen provided and click on Settings you will see the same is included there as well
– engineersmnky
Nov 15 '18 at 19:22
that was it! THANK YOU SO MUCH!
– Matt Grossman
Nov 15 '18 at 19:42
add a comment |
0
It works fine. You didn't add the second two icon bars. See snippet below or codepen.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container">
<div class = "row">
<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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to "HomePage", listings_path %></li>
<li><%= link_to "Reviews", reviews_path %> </li>
<li><%= link_to "My Personal Listings", mylistings_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<%if user_signed_in? && current_user.admin? %>
<li><%= link_to "Admin Page", users_path %></li>
<li><%= link_to "Add a Personal Listing", new_mylisting_path %></li>
<%end%>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Your Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Sign In', new_user_session_path %></li>
<li><%= link_to 'Sign Up', new_user_registration_path %></li>
<li><%= link_to('Sign Out', destroy_user_session_path, :method => :delete) %></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Additional Resources<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Zillow', "http://www.zillow.com/", :target => "_blank"%></li>
<li><%= link_to 'Realtor.com', "https://www.realtor.com/", :target => "_blank"%></li>
<li><%= link_to "Multiple Listing Service", "http://www.mls.com/", :target => "_blank"%></li>
<li><%= link_to 'Trulia', "https://www.trulia.com/", :target => "_blank"%></li>
<li><%= link_to 'Redfin', "https://www.redfin.com/", :target => "_blank"%></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>answered Nov 15 '18 at 3:36
webfrogswebfrogs
1,16832447
Thank you for your suggestions! However, when I go to the app on mobile the hamburger menu still does not appear. I am on an iphone 7+.
– Matt Grossman
Nov 15 '18 at 4:36
@MattGrossman Do you have the required meta tag for viewport?<meta name="viewport" content="width=device-width, initial-scale=1">Bootstrap Overview -Mobile First If you look at the CodePen provided and click on Settings you will see the same is included there as well
– engineersmnky
Nov 15 '18 at 19:22
that was it! THANK YOU SO MUCH!
– Matt Grossman
Nov 15 '18 at 19:42
add a comment |
0
0
0
It works fine. You didn't add the second two icon bars. See snippet below or codepen.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container">
<div class = "row">
<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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to "HomePage", listings_path %></li>
<li><%= link_to "Reviews", reviews_path %> </li>
<li><%= link_to "My Personal Listings", mylistings_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<%if user_signed_in? && current_user.admin? %>
<li><%= link_to "Admin Page", users_path %></li>
<li><%= link_to "Add a Personal Listing", new_mylisting_path %></li>
<%end%>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Your Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Sign In', new_user_session_path %></li>
<li><%= link_to 'Sign Up', new_user_registration_path %></li>
<li><%= link_to('Sign Out', destroy_user_session_path, :method => :delete) %></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Additional Resources<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Zillow', "http://www.zillow.com/", :target => "_blank"%></li>
<li><%= link_to 'Realtor.com', "https://www.realtor.com/", :target => "_blank"%></li>
<li><%= link_to "Multiple Listing Service", "http://www.mls.com/", :target => "_blank"%></li>
<li><%= link_to 'Trulia', "https://www.trulia.com/", :target => "_blank"%></li>
<li><%= link_to 'Redfin', "https://www.redfin.com/", :target => "_blank"%></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>answered Nov 15 '18 at 3:36
webfrogswebfrogs
1,16832447
It works fine. You didn't add the second two icon bars. See snippet below or codepen.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container">
<div class = "row">
<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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to "HomePage", listings_path %></li>
<li><%= link_to "Reviews", reviews_path %> </li>
<li><%= link_to "My Personal Listings", mylistings_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<%if user_signed_in? && current_user.admin? %>
<li><%= link_to "Admin Page", users_path %></li>
<li><%= link_to "Add a Personal Listing", new_mylisting_path %></li>
<%end%>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Your Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Sign In', new_user_session_path %></li>
<li><%= link_to 'Sign Up', new_user_registration_path %></li>
<li><%= link_to('Sign Out', destroy_user_session_path, :method => :delete) %></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Additional Resources<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Zillow', "http://www.zillow.com/", :target => "_blank"%></li>
<li><%= link_to 'Realtor.com', "https://www.realtor.com/", :target => "_blank"%></li>
<li><%= link_to "Multiple Listing Service", "http://www.mls.com/", :target => "_blank"%></li>
<li><%= link_to 'Trulia', "https://www.trulia.com/", :target => "_blank"%></li>
<li><%= link_to 'Redfin', "https://www.redfin.com/", :target => "_blank"%></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container">
<div class = "row">
<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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to "HomePage", listings_path %></li>
<li><%= link_to "Reviews", reviews_path %> </li>
<li><%= link_to "My Personal Listings", mylistings_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<%if user_signed_in? && current_user.admin? %>
<li><%= link_to "Admin Page", users_path %></li>
<li><%= link_to "Add a Personal Listing", new_mylisting_path %></li>
<%end%>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Your Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Sign In', new_user_session_path %></li>
<li><%= link_to 'Sign Up', new_user_registration_path %></li>
<li><%= link_to('Sign Out', destroy_user_session_path, :method => :delete) %></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Additional Resources<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Zillow', "http://www.zillow.com/", :target => "_blank"%></li>
<li><%= link_to 'Realtor.com', "https://www.realtor.com/", :target => "_blank"%></li>
<li><%= link_to "Multiple Listing Service", "http://www.mls.com/", :target => "_blank"%></li>
<li><%= link_to 'Trulia', "https://www.trulia.com/", :target => "_blank"%></li>
<li><%= link_to 'Redfin', "https://www.redfin.com/", :target => "_blank"%></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container">
<div class = "row">
<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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to "HomePage", listings_path %></li>
<li><%= link_to "Reviews", reviews_path %> </li>
<li><%= link_to "My Personal Listings", mylistings_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<%if user_signed_in? && current_user.admin? %>
<li><%= link_to "Admin Page", users_path %></li>
<li><%= link_to "Add a Personal Listing", new_mylisting_path %></li>
<%end%>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Your Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Sign In', new_user_session_path %></li>
<li><%= link_to 'Sign Up', new_user_registration_path %></li>
<li><%= link_to('Sign Out', destroy_user_session_path, :method => :delete) %></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Additional Resources<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to 'Zillow', "http://www.zillow.com/", :target => "_blank"%></li>
<li><%= link_to 'Realtor.com', "https://www.realtor.com/", :target => "_blank"%></li>
<li><%= link_to "Multiple Listing Service", "http://www.mls.com/", :target => "_blank"%></li>
<li><%= link_to 'Trulia', "https://www.trulia.com/", :target => "_blank"%></li>
<li><%= link_to 'Redfin', "https://www.redfin.com/", :target => "_blank"%></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>answered Nov 15 '18 at 3:36
webfrogswebfrogs
1,16832447
answered Nov 15 '18 at 3:36
webfrogswebfrogs
1,16832447
answered Nov 15 '18 at 3:36
webfrogswebfrogs
1,16832447
answered Nov 15 '18 at 3:36
webfrogswebfrogs
1,16832447
1,16832447
Thank you for your suggestions! However, when I go to the app on mobile the hamburger menu still does not appear. I am on an iphone 7+.
– Matt Grossman
Nov 15 '18 at 4:36
@MattGrossman Do you have the required meta tag for viewport?<meta name="viewport" content="width=device-width, initial-scale=1">Bootstrap Overview -Mobile First If you look at the CodePen provided and click on Settings you will see the same is included there as well
– engineersmnky
Nov 15 '18 at 19:22
that was it! THANK YOU SO MUCH!
– Matt Grossman
Nov 15 '18 at 19:42
add a comment |
Thank you for your suggestions! However, when I go to the app on mobile the hamburger menu still does not appear. I am on an iphone 7+.
– Matt Grossman
Nov 15 '18 at 4:36
@MattGrossman Do you have the required meta tag for viewport?<meta name="viewport" content="width=device-width, initial-scale=1">Bootstrap Overview -Mobile First If you look at the CodePen provided and click on Settings you will see the same is included there as well
– engineersmnky
Nov 15 '18 at 19:22
that was it! THANK YOU SO MUCH!
– Matt Grossman
Nov 15 '18 at 19:42
Thank you for your suggestions! However, when I go to the app on mobile the hamburger menu still does not appear. I am on an iphone 7+.
– Matt Grossman
Nov 15 '18 at 4:36
Thank you for your suggestions! However, when I go to the app on mobile the hamburger menu still does not appear. I am on an iphone 7+.
– Matt Grossman
Nov 15 '18 at 4:36
@MattGrossman Do you have the required meta tag for viewport?
<meta name="viewport" content="width=device-width, initial-scale=1"> Bootstrap Overview -Mobile First If you look at the CodePen provided and click on Settings you will see the same is included there as well– engineersmnky
Nov 15 '18 at 19:22
@MattGrossman Do you have the required meta tag for viewport?
<meta name="viewport" content="width=device-width, initial-scale=1"> Bootstrap Overview -Mobile First If you look at the CodePen provided and click on Settings you will see the same is included there as well– engineersmnky
Nov 15 '18 at 19:22
that was it! THANK YOU SO MUCH!
– Matt Grossman
Nov 15 '18 at 19:42
that was it! THANK YOU SO MUCH!
– Matt Grossman
Nov 15 '18 at 19:42
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53311978%2fbootstrap-navbar-hamburger-menu-not-working-on-mobile%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
