My navbar below has a dropdown-menu which displays a horizontal list of <li> elements
<ul class="dropdown-menu">
How can I ensure that the dropdown-menu acts the same was as the div container class? ie: full width of the screen with the items centralised?
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
<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-left" href="/home/"><span class="logo"></span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse in" id="bs-example-navbar-collapse-1" aria-expanded="true" style="">
<ul class="nav navbar-nav navbar-right">
<li class="">
Option 1
</li>
<li class="">
Option 2
</li>
<li class="">
Option 3
</li>
<li class="dropdown">More...<span class="caret"></span>
<ul class="dropdown-menu">
<li class="">
Dropdown 1
</li>
<li class="">
Dropdown 2
</li>
<li class="">
Dropdown 3
</li>
<li class="">
Dropdown 4
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Take a look at Yamm Menu for Bootstrap , this is what you will need.
Related
I've the following HTML NavBar:
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom" style="margin-bottom : 0px;">
<div class="container-fluid" ng-controller = "NavController">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <span ng-show="userCart.cart_size>0" style="color:orange">({{userCart.cart_size}}) </span><i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">XYZ IoT</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="hidden">
</li>
<li class="page-scroll">
Products
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Contact
</li>
<!-- Add the Login Anchor -->
<li ng-if="!userInfo.authorization">
Login
</li>
<li ng-if="userInfo.authorization">
My Devices
</li>
<li ng-if="userInfo.authorization">
Logout
</li>
</ul>
</div>
</div> <!-- /.navbar-collapse -->
</nav>
The problem is : When the compressed Nav appears, and I click on it, the menu items appear -- so far fine. But as soon I click else where, the menu stays as is. I have to click on the Menu (3 lines) to make menu items to disappear.
Can it be accomplished? I'm using bootstrap
my problem is on this pic:
On mobile view have the same dropdown list like normal screen.
Code Here:
<nav class="navbar navbar-default box-centered" role="navigation">
<div class="container-fluid menu-box">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">"logo here"</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav nav-justified menu" style="margin:0 auto;">
<li class="dropdown">
List ext <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="text-padding">something</li>
<li class="text-padding">other</li>
</ul>
</li>
<li class="text-padding">Two</li>
<li class="text-padding">Three</li>
<li class="text-padding">Fouuur</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
My classes for those elements from stylesheet:
http://pastebin.com/HUUShLNQ
I want to menu look like this, with each element under previous:
Can you help me solve this?
check this fiddle:
https://jsfiddle.net/1ummyodw/1/
you have removed navbar-nav class from navigation ul so if you add that this will work, Updated HTML snippet:
<nav class="navbar navbar-default box-centered" role="navigation">
<div class="container-fluid menu-box">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">"logo here"</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-justified menu" style="margin:0 auto;">
<li class="dropdown">
List ext <span class="caret"></span>
<ul class="dropdown-menu text-center" role="menu">
<li class="text-padding">something</li>
<li class="text-padding">other</li>
</ul>
</li>
<li class="text-padding">Two</li>
<li class="text-padding">Three</li>
<li class="text-padding">Fouuur</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I've just installed bootstrap 3 but the collapsing menu doesn't work;
The menu looks fine in a desktop screen but scaling the hole thing down the menu button doesn't show up..
Here is the code for the menu:
<div id="menu">
<div class="navbar navbar-static-top" role="navigation">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target="#nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="/"><img class="top-logo" src="img/hotels.nl_.jpg" alt="Hotels.nl"></a>
<div id=".nav-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Inloggen <span class="sr-only">(current)</span></li>
<li>Contact</li>
<li class="dropdown">
Taal <span class="caret"></span>
<ul class="dropdown-menu">
<li>Nederlands</li>
<li>English</li>
<li>German</li>
</ul>
</li>
<li class="dropdown">
Valuta<span class="caret"></span>
<ul class="dropdown-menu">
<li>Euro</li>
<li>Dollar</li>
<li>Pond</li>
</ul>
</li>
</ul>
</div>
</div>
</div><!--End container-->
</div><!--End fixedtop-->
Assuming that you've put the jquery library , and after you've put the js file of bootstrap , I can think that the problem is with the data-target.
You're targeting the element with the id "nav-collapse", and you have ".nav-collapse" as id, so you need to take off that dot.
<div id="menu">
<div class="navbar navbar-static-top" role="navigation">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target="#nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="/"><img class="top-logo" src="img/hotels.nl_.jpg" alt="Hotels.nl"></a>
<div id="nav-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Inloggen <span class="sr-only">(current)</span></li>
<li>Contact</li>
<li class="dropdown">
Taal <span class="caret"></span>
<ul class="dropdown-menu">
<li>Nederlands</li>
<li>English</li>
<li>German</li>
</ul>
</li>
<li class="dropdown">
Valuta<span class="caret"></span>
<ul class="dropdown-menu">
<li>Euro</li>
<li>Dollar</li>
<li>Pond</li>
</ul>
</li>
</ul>
</div>
</div>
</div><!--End container-->
</div><!--End fixedtop-->
Here's a fiddle, and I changed some classes and some stuff to make the menu visible. Because if you didn't have the right CSS for it, it's pretty messed up like this.
And Note that you should always refer to the bootstrap docs , and try to stick to their methods to make your menu or anything else works perfectly fine.
And I saw that you've put the class "pull-right" for the menu , there's a class called "navbar-right" that works better that just pulling the menu to the right I think.
I am trying to implement a navigation drawer theme for my website using Boostrap. I am able to convert my navbar in desktop screen size to a navigation drawer button for smaller screens. However what I am trying to achieve is get the 3 bar icons of the drawer on the left hand side and "MyName" should not be visible on smaller screen sizes. Could some one help me out?
My HTML code is:
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container"> MyName
<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">
<li class="active">ABOUT ME<span class="sr-only">(current)</span>
</li>
<li>RESUME
</li>
<li>PROJECTS
</li>
<li>BLOG
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
</div>
</body>
I have created a JSFiddle for this: https://jsfiddle.net/DTcHh/9394/
Add the following classes: hidden-xs (class="navbar-brand hidden-xs") and pull-left (class='navbar-toggle pull-left")
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container"> MyName
<button class="navbar-toggle pull-left" 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">
<li class="active">ABOUT ME<span class="sr-only">(current)</span>
</li>
<li>RESUME
</li>
<li>PROJECTS
</li>
<li>BLOG
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
I have this navbar. It works great in regular screen width, but when collapsed, the mobile navbar button doesn't work. I've tried to find any unclosed divs and other issues but can't identify any. Thanks in advance for any help! Apologies for the beginner question
<nav class="navbar navbar-default" 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-collapse-1">
<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="navbar-brand" href="#">
<div class="text-center">
<img alt="nav" src="/assets/navbar.png" />
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<h4>
<ul class="nav navbar-nav navbar-left">
<!-- <li> Help </li>-->
<li> Buy </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Search </li>
<li class="dropdown">
My purchases<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li> My profile </li>
<li class="divider"></li>
<li> Items bought </li>
<li> Items sold </li>
<li class="divider"></li>
<li> Purchase history </li>
</ul>
</li>
<li class="dropdown">
Settings <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li> Edit my profile </li>
<li> Manage my profile </li>
<li class="divider"></li>
<li class="dropdown-header">GOODBYE </li>
<li> <a data-method="delete" href="/users/sign_out" rel="nofollow">Logout</a> </li>
</ul>
</li>
</div><!-- /.navbar-collapse -->
</nav>
</h4>
Clean-up your HTML and it should work fine. There are several missing close tags (/ul, /div) and the /h4 is closed at the end.
http://bootply.com/ytu2dul2yw