See the Information section of the navbar here. I'm trying to get it to float right. I used .pull-right like the Bootstrap docs say, but it isn't working.
I also tried messing around with Inspect Element and applying float: right !important; directly to the li, which didn't work, and then to the a, which also didn't work.
This is my code:
<div class="navbar"">
<div class="navbar-inner">
<ul class="nav">
<li class="divider-vertical"></li>
<li id="academics" class="dropdown main_college_nav_item">Academics <b class="caret"></b>
<ul class="dropdown-menu">
<li id="professors"><a>Professors</a></li>
<li id="classes"><a>Classes</a></li>
<li id="difficulty"><a>Difficulty</a></li>
<li id="major"><a>Majors</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li id="living_environment" class="dropdown main_college_nav_item">Living Environment <b class="caret"></b>
<ul class="dropdown-menu">
<li id="campus"><a>Campus</a></li>
<li id="food"><a>Food</a></li>
<li id="housing"><a>Housing</a></li>
<li id="weather"><a>Weather</a></li>
<li id="safety"><a>Safety</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li id="social_life" class="dropdown main_college_nav_item"><a class="dropdown-toggle" data-toggle="dropdown">Social Life <b class="caret"></b></a>
<ul class="dropdown-menu">
<li id="kids"><a>Kids/Atmosphere</a></li>
<li id="parties"><a>Parties</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li id="information" class="main_college_nav_item"><a class="pull-right">Information <i class="icon-resize-vertical"> </i></a></li>
<li class="divider-vertical"></li>
</ul>
</div>
</div>
Use the below HTML instead of your HTML.
I have created Separate ul for the Information tab and floated to right.
Update: Working Demo
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="divider-vertical"></li>
<li id="academics" class="dropdown main_college_nav_item">Academics <b class="caret"></b>
<ul class="dropdown-menu">
<li id="professors" class="active"><a>Professors</a></li>
<li id="classes"><a>Classes</a></li>
<li id="difficulty"><a>Difficulty</a></li>
<li id="major"><a>Majors</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li id="living_environment" class="dropdown main_college_nav_item">Living Environment <b class="caret"></b>
<ul class="dropdown-menu">
<li id="campus"><a>Campus</a></li>
<li id="food"><a>Food</a></li>
<li id="housing"><a>Housing</a></li>
<li id="weather"><a>Weather</a></li>
<li id="safety"><a>Safety</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li id="social_life" class="dropdown main_college_nav_item"><a class="dropdown-toggle" data-toggle="dropdown">Social Life <b class="caret"></b></a>
<ul class="dropdown-menu">
<li id="kids"><a>Kids/Atmosphere</a></li>
<li id="parties"><a>Parties</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
</ul>
<ul class="nav pull-right">
<li class="divider-vertical"></li>
<li id="information" class="main_college_nav_item"><a>Information <i class="icon-resize-vertical"> </i></a></li>
</ul>
</div>
</div>
Related
I'm adjusting someone else's code, html is not my thing. For some reason the code makes the drop down menu change, sometimes to two parts. I would much rather a dropdown menu that just works directly and doesn't change. Was hoping someone can tell me why it acts the way it does.
Below is the code and am including a before and after image
Thanks
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href=""></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href=“/index.html” id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="index.html">Home</a>
<a class="dropdown-item" href="sales.html">Sales</a>
<a class="dropdown-item" href="/management">Management</a>
<a class="dropdown-item" href="/bartending">Bartending</a>
<a class="dropdown-item" href="/print">My Name In Print</a>
<a class="dropdown-item" href="/guerillamarketing">Guerilla Marketing</a>
</div>
</li>
</ul>
</div>
usually (but not always) a dropdown list is a nested list inside of an li that is controlled by a button like this
<ul>
<li>regular link</li>
<li>
<button>drop down</button>
<ul>
<li>drop down link 1</li>
<li>drop down link 2</li>
</ul>
</li>
</ul>
so yours might end up looking something like this:
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href=""></a>
</li>
<li class="nav-item dropdown">
<button>menu</button>
<ul>
<li><a class="dropdown-item" href="index.html">Home</a></li>
<li><a class="dropdown-item" href="sales.html">Sales</a></li>
<li><a class="dropdown-item" href="/management">Management</a></li>
<li><a class="dropdown-item" href="/bartending">Bartending</a></li>
<li><a class="dropdown-item" href="/print">My Name In Print</a></li>
<li><a class="dropdown-item" href="/guerillamarketing">Guerilla Marketing</a</li>
</ul>
</li>
</ul>
</div>
Ill also include an example of a drop down I created to help you with those aria attributes sorry in advance for the lack of style on it. Hope this helps.
<header id="sitewide-header">
<ul id="visible-navigation">
<li id="logo-container">vertical template</li>
<li id="control-container"><button id="menu-button" aria-expanded="false" aria-controls="toggled-navigation">menu</button></li>
</ul>
<nav id="navigation-container">
<ul id="toggled-navigation" aria-hidden="true" aria-labelledby="menu-button">
<li>home section</li>
<li>section two</li>
<li>
<button id="dropdown1-button" aria-expanded="false" aria-controls="dropdown-one">three – five</button>
<ul id="dropdown-one" aria-hidden="true" aria-labelledby="dropdown1-button">
<li>section three</li>
<li>section four</li>
<li>section five</li>
</ul>
</li>
<li>section six</li>
</ul>
</nav>
</header>
I have this dropdown on my navbar which looks like this:
Now I added a "Contact Us" tab on "HR & Admin" menu.
So is it possible to make "Contact Us" a dropdown based on my code?
Here's my html:
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<ul class="nav navbar-nav main-navbar-nav">
<li class="active">HOME</li>
<li class="dropdown">
HR & Admin <span class="caret"></span>
<ul class="dropdown-menu">
<li>C.O.C.</li>
<li>Contact Us</li>
<li>Job Vacancies</li>
</ul>
</li>
Yes like so, leave the css to you of course:-
<ul class="nav navbar-nav main-navbar-nav">
<li class="active">HOME</li>
<li class="dropdown">
<a href="#" title="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">HR & Admin <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>C.O.C.</li>
<li>Contact Us
<ul class="dropdown-menu-2">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Job Vacancies</li>
</ul>
</li>
</ul>
Just add another ul li inside your Contact Us li like so:
<li>Contact Us</li>
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</li>
Let's say we have a simple navigation bar like this:
http://getbootstrap.com/components/#nav-pills
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
How can I add the class "nav-stacked" to it when the window or parent element is smaller than say 940px. Or even better: as soon as the navigation bar can't fit all elements in the same line anymore.
This would be pretty straight forward in javascript, but I'd like to see a pure css/html solution, but without adding #media queries to the bootstrap source code.
Found the solution. There is a class called "nav-justified". It simply stacks the navigation pills as soon as they don't fit into a single row anymore.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
Try to add this CSS to your solution. Please check the result. Is it what you want to achieve?
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#media (min-width: 768px) {
.nav-justified > li {
display: inline-block;
width: auto;
}
}
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
I am building a site here:
Website Link
The drop-down navbar menu is working fine except the fact that when there is a mouse-over on the items to the right of the navbar, the first drop-down menu activates. (i.e. Click on Administration and both its drop-down menu and the drop-down menu under "who are we" also drops down!)
Any further suggestions, please?
The code is as follows:
<nav id="myNav" class="navbar navbar-inverse navbar-top" role="navigation">
<div class="container dropdown">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header dropdown">
-->
Toggle navigation
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse dropdown" id="bs-example-navbar-collapse-1" data-hover="dropdown">
<ul class="nav navbar-nav navbar-right dropdown">
<li>
_Home
</li>
<li class="dropdown">
_Who are we?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_About the Association
</li>
<li class="">
_Objectives
</li>
<li class="dt_bg">
_Quem Somos?
</li>
</ul>
</li>
<li class="dropdown">
_How do we help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Snips
</li>
<li>
_Other
</li>
<li class="dt_bg">
_Forms
</li>
</ul>
</li>
<li class="dropdown">
_How can <strong>You</strong> help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Our Shops
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Alvor
</li>
<li>
_Albufeira
</li>
<li class="dt_bg">
_Silves
</li>
</ul>
</li>
<li>
_Fundraising
</li>
<li class="dt_bg">
_Membership
</li>
</ul>
</li>
<li class="dropdown">
_Latest News<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Upcoming Events
</li>
<li>
_Other
</li>
</ul>
</li>
<li class="dropdown">
_Administration<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Structure of the association
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Management Board
</li>
<li>
_Fiscal Council
</li>
<li class="dt_bg">
_Annual General Assembly
</li>
</ul>
</li>
<li>
_Reports & Accounts
</li>
</ul>
</li>
<li>
_Vet Clinics
</li>
<li>
_Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
Any help in seeing where the problem is would be gratefully received as my eyes are going after hours of tring nto find the problem.
Many Thanks
Update:
I have applied the solution proposed by #Spade but the situation remains.
Using [link]http://apaaportugal.doidosou.eu/useful_links.php as a test page (no carousel) onmouseover on any dropdown menu item also activates the first drop-down under item "_who are we".
Javascript code on the page is:
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Sub-Menu JavaScript -->
<script src="js/sub_menu.js"></script>
<!-- header script -->
<script>
var headerHeight = 200;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > headerHeight) {
$('#myNav').removeClass('navbar-top');
$('#myNav').addClass('navbar-fixed-top');
} else {
$('#myNav').removeClass('navbar-fixed-top');
$('#myNav').addClass('navbar-top');
}
});
</script>
<!-- Bootstrap Dropdown Hover JS -->
<script src="js/bootstrap-dropdownhover.min.js"></script>
<script>
$(function() {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$(window).resize(function() {
var width = $(this).width();
if (width < 769) {
$('.navbar .dropdown').removeClass('test');
} else {
$('.navbar .dropdown').addClass('test');
}
});
});
</script>
Navbar Html code as follows:
<!-- Header Content -->
<div class="container">
<div class="row">
<div class="col-lg-1">
<img src="/images/APPA_logo_R_80.png"><a class="navbar-brand" href="#"></a>
</div>
<div class="col-lg-11">
<div>
<h1 class="h_header">APAA - Association for the Protection of Animals in the Algarve</h1>
<h3 class="h_header">Associação de Protecção Animal do Algarve</h3>
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- Navigation -->
<nav id="myNav" class="navbar navbar-inverse navbar-top" role="navigation">
<div class="container dropdown">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header dropdown">
<!-- <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown">-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse dropdown" id="bs-example-navbar-collapse-1" data-hover="dropdown">
<ul class="nav navbar-nav navbar-right dropdown">
<li>
_Home
</li>
<li class="dropdown">
_Who are we?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_About the Association
</li>
<li class="">
_Objectives
</li>
<li class="dt_bg">
_Quem Somos?
</li>
</ul>
</li>
<li class="dropdown">
_How do we help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Snips
</li>
<li>
_Other
</li>
<li class="dt_bg">
_Forms
</li>
</ul>
</li>
<li class="dropdown">
_How can <strong>You</strong> help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Our Shops
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Alvor
</li>
<li>
_Albufeira
</li>
<li class="dt_bg">
_Silves
</li>
</ul>
</li>
<li>
_Fundraising
</li>
<li class="dt_bg">
_Membership
</li>
</ul>
</li>
<li class="dropdown">
_Latest News<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Upcoming Events
</li>
<li>
_Other
</li>
</ul>
</li>
<li class="dropdown">
_Administration<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Structure of the association
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Management Board
</li>
<li>
_Fiscal Council
</li>
<li class="dt_bg">
_Annual General Assembly
</li>
</ul>
</li>
<li>
_Reports & Accounts
</li>
</ul>
</li>
<li class="dropdown">
_Useful Links<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Algarve - Veterinary Surgeries
</li>
<li>
_Algarve - Other animal-related institutions
</li>
</ul>
</li>
<li>
_Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Two things need to be changed:
1) Replace "Script to Activate the Carousel" with the following:
$(function() {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$(window).resize(function() {
var width = $(this).width();
if (width < 769) {
$('.navbar .dropdown').removeClass('test');
} else {
$('.navbar .dropdown').addClass('test');
}
});
});
2) Replace the code you shared for Navigation with the following:
<!-- Navigation -->
<nav id="myNav" class="navbar navbar-inverse navbar-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1" data-toggle="dropdown">
<ul class="nav navbar-nav">
<li>
_Home
</li>
<li class="dropdown">
_Who are we?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_About the Association
</li>
<li class="">
_Objectives
</li>
<li class="dt_bg">
_Quem Somos?
</li>
</ul>
</li>
<li class="dropdown">
_How do we help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Snips
</li>
<li>
_Other
</li>
<li class="dt_bg">
_Forms
</li>
</ul>
</li>
<li class="dropdown">
_How can <strong>You</strong> help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Our Shops
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Alvor
</li>
<li>
_Albufeira
</li>
<li class="dt_bg">
_Silves
</li>
</ul>
</li>
<li>
_Fundraising
</li>
<li class="dt_bg">
_Membership
</li>
</ul>
</li>
<li class="dropdown">
_Latest News<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Upcoming Events
</li>
<li>
_Other
</li>
</ul>
</li>
<li class="dropdown">
_Administration<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Structure of the association
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Management Board
</li>
<li>
_Fiscal Council
</li>
<li class="dt_bg">
_Annual General Assembly
</li>
</ul>
</li>
<li>
_Reports & Accounts
</li>
</ul>
</li>
<li class="dropdown">
_Useful Links<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Algarve - Veterinary Surgeries
</li>
<li>
_Algarve - Other animal-related institutions
</li>
</ul>
</li>
<li>
_Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Also Attaching the result at my side:
This is the partial view that generates the menu for the site.
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav" >
#foreach (var menu in Model)
{
<li class="dropdown">
#menu.DisplayName
#foreach (var menuitem in menu.MenuItems)
{
<ul class="dropdown-menu" >
<li class="dropdown">#Html.ActionLink(menuitem.DisplayName, menuitem.ActionName, menuitem.ControllerName, new { tabindex = "-1" })</li>
</ul>
}
</li>
}
</ul>
</div>
The menus can be visible and actually the dropdown menus are also created in the HTML as shown below
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="dropdown open">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Training</a>
<ul class="dropdown-menu">
<li class="dropdown"><a tabindex="-1" href="/TTS.UI/Menu?Length=18">Attendance Confirmation</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">ePARCS</a>
<ul class="dropdown-menu">
<li class="dropdown"><a tabindex="-1" href="/TTS.UI/Menu?Length=12">Upload</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
In out put is shown as bellow in the GUI
What is the issue with regard to this.
Make sure you have included the bootstrap.js file on that page.
Your markup is a bit off. The <li> in your dropdown menu should not have the "dropdown" class
Here is the jsFiddle -> http://jsfiddle.net/abrudtkuhl/GYSuY/
Here's markup that works, based on your example
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Training</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/TTS.UI/Menu?Length=18">Attendance Confirmation</a>
</li>
</ul>
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">ePARCS</a>
<ul class="dropdown-menu">
<li> <a tabindex="-1" href="/TTS.UI/Menu?Length=12">Upload</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>