I was struggling wit this and found some way, I think I need to borrow power of css for this. please land me some skill if you know how.
I have navbar like this,
<div class = "header">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
and second header
<div class="subheader" style="background:yellow;>
<p>you</p>
</div>
now I want to bring these two blocks together so they look like one navbar divided by background color. how do I do this? I tried setting padding, margin to zero for both but won't work
Supposing you are using bootstrap, just set margin-bottom: 0 for the .navbar. You might want to remove borders as well.
See fiddle: https://jsfiddle.net/yyw99nky/
Related
I could not find any information, why it is common to use anchor in list item in navbar?
<ul>
<li>One</li>
<li>Two</li>
</ul>
Even navbar in Bootstrap 3 is implemented in such way
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
Even now some HTML-coders use it and teach to do it.
Why should I use this awkward markup? Then I have to "clean" all browser-default styles for list-items list-style-type: none; and put inside each list item an anchor for navigation link?
What is wrong with this, below?
<div class="nav">
<span>One</span>
<span>Two</span>
</div>
<span> or <div> does not matter.
It is already 3 years of HTML5, what is wrong with this, below?
<nav>
One
Two
</nav>
Is it connected some-how with old browsers? If yes, give me a link to read what was wrong, please.
<div> and <span> is valid but not semantic since a navbar is essentially a list.
I usually use this approach:
<nav>
<ul>
<li class="navbar-item"><a href=#>placeholder</li>
</ul>
</nav>
This is both semantic and can be cleanly styled using css child selectors.
Because the lis (= "list items") list the available pages of that website. That's a semantic concept in HTML, its inherent logic works well mainly for accessibility on websites and for search engines (again: listing the pages of that website).
I would like have a nav-pill with a dropdown showing a few different options. To this end, this is what I have:
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home</li>
<li role="presentation">FAQ's</li>
<li role="presentation" class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</nav>
This does not seem to work however. I can see the dropdown but when I click, nothing happens. Wondering if anyone has encountered the same issue.
Thanks.
Your code seems to work fine I have a working fiddle at the following link Fiddle.
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home</li>
<li role="presentation">FAQ's</li>
<li role="presentation" class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</nav>
Make sure that you have your libraries loaded in the correct order loading jquery.js first then bootstrap.js. If this is not the problem then you more than likely have conflicting javascript. Take out javascript files one by one and see what javascript is conflicting with bootstrap's javascript.
As wrote Drinkin People, you have working code! just load your jquery.js script before bootstrap.js
<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>
jsfiddle-link
Would like to ask I have a simple application in the navbar which consist a button like below snippet.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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="dropdown">
This should close when click <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Do not close when button click <span class="caret"></span>
<ul class="dropdown-menu">
<li style="text-align:center">
<button class="btn btn-default" type="submit">Button</button>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
How should I code it in such a way that when the button in the dropdown menu is clicked and it should not close the dropdown? Also the css should only appect that particular dropdown menu and not the others?
Note : please run code in full page.
I gave the ul element the id "dropstop" ,and applied this following jquery code:
$('#dropstop').click(function(event){
event.stopPropagation();
});
This is the JSfiddle for it.
I found the jquery code from this post : Stack Overflow Post
I would like to combine my two entries in a new submenu
I have this
<li class="dropdown" ng-controller="MenuPropertiesCtrl">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Properties <span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu" ng-click="$event.stopPropagation()"
style="width: 450px !important">
<li>Creer</li>
<li class="divider"></li>
<li>Comparer properties par versions</li>
<li class="divider"></li>
<li>Comparer properties par plateformes</li>
</ul>
</li>
I have this
Properties
|
|_Creer
|
|_Comparer properties par versions
|
|_Comparer properties par plateformes
So i want to do this ..?
Properties
|
|_Creer
|
|__Comparer
|
|_Comparer properties par versions
|
|_Comparer properties par plateformes
Example in JS Fiddle
you are using the bootstrap make easily drop dun menu. put this html script in your menu
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
and more info to refer this link http://getbootstrap.com/components/#nav
How do I increase the width on the twitter bootstrap dropdown menu. I need the list to have Alcohol Incidents and Status Reports as an option but the default width is not large enough to encompass that much text.
<li class="dropdown subnavbar-open-right">
<span>Reports/Statistics</span><b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a>USN</a>
<ul class="dropdown-menu">
<li><a>Alcohol Incidents and Status Reports</a></li>
</ul>
Looking at the code you provided I made a test page using Twitter BootStrap's default set up and added your text "Alcohol Incidents and Status Reports" into the drop down menu. What I found is the drop down menu auto expanded to include the entire width of the text.
This means that either you have left some code out necessary for this to work correctly or you overriding CSS classes causing it not to work. Here is the code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Alcohol Incidents and Status Reports</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
If this does not help you then you may want to provide more of your code so people can help you debug. I have a link to JSFiddle but it seems that we are not allowed to post those links now. Well here its extension /tS95X/1/ if you want to look it up.