I would like to create page header menu by bootstrap like image below (I am wondering how to create "+" link below the Contact menu ). Can anybody help?
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Contacts", "Index", "Contacts")</li>
<li>#Html.ActionLink("Administration", "Index", "Settings")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
You can achieve that either by adding a span in the li, or by targeting the first list element and using the pseudo-element ::after
Here is an example using ::after:
http://jsfiddle.net/8gj1wsca/
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>
Background
I am making an interface, where I show items and I use nav pills to display information.
I am using Twitter Bootstrap to achieve the look I want, but my grid layout is not working as intended.
Problem
In my interface, I want the nav-pills to occupy the entire space of the row they are in, but they only occupy the left corner:
<ul class="nav nav-pills row">
<li class="active col-sm-4">
<a>Information</a>
</li>
<li class="col-sm-4">
<a>Facts</a>
</li>
<li class="col-sm-4">
<a>Simillar</a>
</li>
</ul>
I read the documentation, and I believe I am doing everything fine. Here is a Plunker example where you can check the mini example I provided:
https://plnkr.co/edit/E4Fx0x8xmuy6d1TwJe9R?p=preview
Questions
What am I doing wrong?
How can I fix it?
I think "to occupy the entire space of the row they are in" you could use predefined class nav-justified:
<ul class="nav nav-pills nav-justified">
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
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/