I have the following bootstrap code:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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 class="collapse navbar-collapse" id="collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link 1<span class="sr-only">(current)</span></li>
<li>Link 2</li>
</ul>
Which collapses Link 1 and Link 2 into a collapsed menu when the screen width is small, otherwise it just shows in the nav bar. Is there a way to hide Link 1 and Link 2 in the nav bar when screen width is big, and only show them as collapsed menu options?
Related
On this test page I am using Bootstrap. I don't see the brand name showing. What am I doing wrong? in case you need these links, here is http://andrewsamonas.com/css/bootstrap.min.css
here is http://andrewsamonas.com/css/custom2.css
relevant navbar code
<div class="row main-navigation-container navbar-fixed-top" id="primary-navbar">
<nav class="navbar">
<div class="container-fluid">
<!-- Mobile Toggle Button and stuff -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primary-navigation" 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="" target="_blank" title="Atlantic Four Winds"> Atlantic Four Winds</a>
</div>
<!-- End of mobile toggle button -->
<!-- Start of the navbar -->
<div class="collapse navbar-collapse" id="primary-navigation">
<ul class="nav nav-justified">
<li>Home<span class="sr-only">(current)</span></li>
<li>Photos</li>
<li>Rates</li>
<li>Booking</li>
<li>Things To Do <b class="caret"></b>
<ul class="dropdown-menu">
<li>Rye Beach</li>
<li>Jenness State Beach</li>
<li>Wallis Sands Beach</li>
<li>Great Island Commons</li>
<li>Odiorn State Park</li>
<li>Rye Harbor State Park</li>
<li>Seacoast Science Center</li>
<li>Granite State Whale Watch</li>
<li>Atlantic Whale Watch</li>
<li>Portsmouth Harbor Cruises</li>
<li>Rye Airfield</li>
</ul>
</li>
<li>Map</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
In your custom css file you're setting a.navbar-brand:visited to display: none
There are a lot of questions surrounding collapsing navbar, but I can't find this specific case, sorry if it's a duplicate anyway.
<div class="navbar navbar-static-top navbar-default container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Brand</a>
</div>
<div class="nav-collapse" id="navbar">
I am trying to have my navbar start collapsed on mobile (on page load). I found it works that way when I add class="collapse" to the #navbar div, but then on PC my navbar is hidden, unless I go to small resolution and toggle it.
Also in this implementation, the first click on collapse button "reopens" opened navbar on mobile.
Your issue is with:
<div class="nav-collapse" id="navbar">
<ul class="nav navbar-nav">
It should be navbar-collapse:
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
I have a simple nav bar with logo on left and the word Menu on right that act as a dropdown. For small screens I need it to change the menu wording to a burger icon. So far I can get it to change to an icon but the list still contains the word menu and thats still a dropdown. How do I make it so the list only contains the items on the dropdown and not the dropdown itself?
<div class="container-fluid">
<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 class="logo pull-left animated wow fadeInLeft"><a class="navbar-brand" href="index.html"><img src="LOGO" alt="" title=""></a></div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
</ul>
I have top menu and left menu on page, I want that both should collapse on small screen, these are working fine for small but on large screen both menu don't display.
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container nav-main">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#first">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar" role="complementary" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">Business Name Test </span>
</div>
<div class="nav-collapse collapse" id="first">
<ul class="nav navbar-nav navbar-right">
<li>
<span class="glyphicon glyphicon-cog"></span> Settings
</li>
<li>
<span class="glyphicon glyphicon-question-sign"></span> Help
</li>
<li>
<span class="glyphicon glyphicon-log-out"></span> Logout
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container main">
<div class="row">
<div class="nav-collapse collapse" id="sidebar" role="complementary" >
<div class="m-sidebar">
<ul class="nav">
<li>Link1</li>
<li class="divider"></li>
<li>Link2</li>
<li>Link3</li>
<li class="divider"></li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</div>
</div>
<div class="col-md-10 col-sm-10 col-lg-10">
<div class="page-header">
<h1>Home Page</h1>
</div>
</div>
</div>
</div><!-- /container -->
Here is Fiddle
Please guide me what is wrong I am doing?
In order to correct the position of the links, i changed the order of the navbar elements, first the left side, then the right side ( it was not the problem, its a matter of organization). Added a division between the nav & the page title. Changed the class of the navbar items on the left to :
<ul class="nav navbar-nav navbar-left">
Instead of just
<ul class="nav">
Here is the Final Jsfiddle: http://jsfiddle.net/FDkqT/
I know its simple, but if you expand the window you will see that it works just right
I am using this Bootstrap 3's example menu page for my site:
http://getbootstrap.com/examples/jumbotron/
When you shrink the page the menu at the top collapses into a single drop down list.
On my page I have two menues at the top left and right however when I shrink my page I don't get two drop down menues.
I would like it so that when I shrink the page I get two collapsed menues. Is this possible?
Try this: http://bootply.com/79216 i add to button (different) target align the second menu to the right with navbar-right and add some css to reset the float and display of the navbars.
html
<nav class="navbar navbar-inverse" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-collapse">
<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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<div class="collapse navbar-collapse navbar-ex2-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
css
.navbar-collapse:before, .navbar-collapse:after{display:inline; content:"";}