I'm using the Twitter Bootstrap (v2.1.1) with a PHP site. I'm generating the navigation bar dynamically in a php script as the navigation bar will have different content if the user is logged in or out of the site.
I would like to align the last dropdown menu to the right of the screen but haven't been able to so far. Here's a jsFiddle showing a simplified version:
http://jsfiddle.net/fmdataweb/AUgEA/
I would like the Menu 2 drop down to be right aligned. The code the for last dropdown is the same as for other dropdowns:
<li class="dropdown pull-right">
Menu 2<b class="caret"></b>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
I've tried chaging it to:
<li class="dropdown pull-right">
but that makes no difference. Anyone know how to pull the dropdown menu to the right like you can with forms and <p> text?
You need to change the .pull-right class to ul element instead of li.
HTML
<ul class="nav pull-right">
<li class="dropdown">
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
Version 2.1.1
I rewrote your code including only necessary JavaScript plugins (bootstrap-dropdown.js), the latest version of Twitter Bootstrap (2.1.1) and support for responsive design.
http://jsfiddle.net/caio/gvw7j/
If you see the responsive menu in the above link, you can see the "wide result" in this link:
http://jsfiddle.net/caio/gvw7j/embedded/result/
.pull-right is defined by:
.pull-right {
float: right !important;
}
Version 3.1.1
There were no changes in this class. You might see the helpers classes section.
However, the documentation recommends using the class .navbar-right because it has some specific optimizations, unlike the pull-right class.
If you came here trying to right-align a regular bootstrap .dropdown-menu and NOT a .nav, and are using Bootstrap 3, the correct class to add is .dropdown-menu-right
Here's the bootstrap documentation:
<ul class="dropdown-menu dropdown-menu-right">
...
</ul>
For those using Bootstrap 3, .navbar-right would do the trick.
For eg.,
<ul class="nav navbar-nav navbar-right">
.
.
</ul>
Instead of pulling the li element to the left, simply contain that element which you wish to be right aligned within its own ul list and pull that instead like so:
HTML
<ul class="nav pull-right">
<li class="dropdown">
Menu 2<b class="caret"></b>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
Demo: http://jsfiddle.net/AUgEA/1/
Related
I have the code below for my nav bar. I want the text in the "Download Freebies" item to change color when the mouse is hovered over it. I am only editing an existing template and there's some css already written for it in the style sheet (for "single-freebie" and "freebie-box"). What can I add (and where) to make the text "Download Freebies" change color to blue when the mouse is hovered over it.
PS: I've already tried the ":hover" and maybe one or two other "solutions" I found online. The color isn't changing and the border of the "Download Freebies" instead jumps upwards or sideways when hovered. I know I am doing something wrong but can't figure out what it is. I am happy to post more code if you specifically request anything you want to look at for me.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li >Home</li>
<li>About</li>
<li>Download Freebies</li>
<li><div class="single-freebie">
Upload resources</li>
<li>
</li>
</ul><!-- / ul -->
</div><!-- /.navbar-collapse -->
You can use this or you can use JavaScript. I think both will meet your needs.
<li ><a href="index.html"
onMouseOver="this.style.color='#000'"
onMouseOut="this.style.color='#333'">Home</a></li>
<li><a href="about.html"
onMouseOver="this.style.color='#000'"
onMouseOut="this.style.color='#333'">About</a></li>
I am using Twitter Bootstrap.css.
I have a top navigation bar which will normally show a menu with hover-over popup for sub items.
But when the collapsed is set due to #media constraints, I want to show the content as nested <select> and <Option> elements.
Clicking the menu button will show content like this:
I am not sure how to perform an inverse collapse. I have tried collapse, collapse.in, etc. styles.
I want to show one content when collapsed and another if not collapsed. Both content areas need to show in the navbar area.
I would like to do pure CSS with no javascript.
The following is the HTML I want to hide when callapsed. I have not created the HTML with the select/option tags yet.
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" ng-if="userData.isAdminUser" style="cursor: pointer;">
<li class="dropdown">
<a>Managment</a>
<ul class="dropdown-menu">
<li>Employees</li>
<li>Groups</li>
<li>Products</li>
<li>Skills</li>
<li>Levels</li>
</ul>
</li>
</ul>
</div>
i have this code for navbar all works perfectly but when i try to replaced the text by an image the image does not displaying.
here's the code:
<img src="DAR.png" class="img-responsive"><b class="caret"></b>
<ul class="dropdown-menu">
<li>Sign-in</li>
<li>Sign-up</li>
</ul>
You can add a image inside link. check out this fiddle. And make sure that path to the image is correct. If the path is right it should work. I changed your image and its working now.
<img src="https://s13.postimg.org/pzvk4df07/1475139047_three_bars.png" class="img-responsive"><b class="caret"></b>
<ul class="dropdown-menu">
<li>Sign-in</li>
<li>Sign-up</li>
</ul>
I think your trying to add an image to your navbar. If so you will need to add the image with css inside your nav. Remove your img link. You can do this :
<b class="caret"></b>
<ul class="dropdown-menu">
<li>Sign-in</li>
<li>Sign-up</li>
</ul>
Inside your css add this :
#nav {
background-image:url('DAR.png');
}
I would like to use a Font Awesome arrow instead of the default Bootstrap arrow for the dropdown menu link. I've added the Font Awesome arrow and it looks the way I want (on the left), but still there is the default Bootstrap arrow on the right. How can I get rid of it? I can't say I've tried anything yet as I keep checking and I don't find anything to be removed anywhere.
<ul class="nav navbar-nav">
<li class="dropdown drop-li">
<a href="#" class="dropdown-toggle menu-link" data-toggle="dropdown">
<i class="fa fa-angle-down arrow-down"></i>O Festiwalu <b class="caret"></b>
</a>
<ul class="dropdown-menu drop-one">
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</li>
</ul>
This is how it looks: http://postimg.org/image/id3jbf27x/
Why not deleting <b class="caret"></b>?
If you are using Firefox, you can press STRG + I (I for Inspection) to inspect your html Code and see why something is here (Click on the Element in the Main Page) or even not here (Look at the CSS in the right bottom and select via the left bottom).
I'm new to Bootstrap/PHP, so please be gentle :-)
The code is as follows:
<div class = "navbar navbar-inverse navbar-fixed-bottom">
<div class = "container">
<p class = "navbar-text pull-left">Copyright 2014 by ABC</p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Support<b class = "caret"></b>
<ul class = "nav navbar-nav navbar-right dropdown-menu">
<li>Help</li>
<li>FAQ</li>
<li>How To</li>
</ul>
</li>
</ul>
</div>
</div>
This creates a navbar on the bottom of the page with a drop-up menu.
The navbar has an inverse colour, so the text has been set to white to maximise the contrast.
Unfortunately the result is white text on a white background when attempting to select from the menu.
My guess is that I need to override Bootstrap's CSS, but I'm not sure what to override.
And I would prefer not to screw with Bootstrap's CSS file just in case I blow everything.
Many thanks
You have overridden link color by adding an inline style style="color: #ffffff;". This is a bad practice as it’ll take precedence on all other declarations to this element (:hover, :active, …).
If you want to change Bootstrap defaults, you should better do it in a separated CSS file. In this case the style would be:
.navbar-inverse .navbar-nav>li>a {
color: white;
}
You have extra classes on your dropdown
<ul class="nav navbar-nav navbar-right dropdown-menu">
It should be
<ul class="dropdown-menu">
You can see the result here.
The above ans, by LeBen is pretty much fine. But, while working on Bootstrap, keep an eye while overriding Bootstrap CSS. You can easily play it first in Firebug then override, and place a common comment with its description so you can easily make it out. And, while overriding make sure it wont affect the other part in the project, so think before overriding it