I am using a Bootbusiness theme in my Twitter Bootstrap website, and I am trying to create the stacked tab navigaton, as seen in the documentation of Bootstrap but whenever I try do it only appears as a List without style. And not styled as stacked button.
Here is my code in the HTML
<div >
<ul class="nav nav-tabs nav-stacked">
<li class="active">List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
You need to have an anchor inside li to get the styles
Fiddle
<div>
<ul class="nav nav-tabs nav-stacked">
<li class="active">List Item </li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
Related
I set up a simple css based dropdown navigation.
The last category of the main navigation (named login) is supposed to look different from the rest, hence I simply applied a different style via last-of-type.
However the style now gets applied to the drop-down menus as well, meaning the last item of the dropdowns have said style applied also.
(Also, I cannot target them with nth-... selector since there will be new categories added / removed every once in a while.)
How would I stop this form happening?
<ul>
<li>item 1
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li> <-- unfortunately different style also...
</ul>
</li>
<li>item 2</li>
<li>item 3</li>
<li>login</li> <-- different stlye
</ul>
If you use a wrap for your unordered lis you can use something like this
<div class="test">
<ul>
<li>item 1
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li> <!-- unfortunately different style also...-->
</ul>
</li>
<li>item 2</li>
<li>item 3</li>
<li>login</li> <!-- different stlye -->
</ul>
</div>
So the CSS
.test > ul > li:last-of-type{color:red;}
set style only for the first ul after div.test and doesn't affect the other nested elements
Codepen
In Bootstrap, with <ul class="nav nav-tabs">, one gets tabs with the bottom line extending nicely to the right, e.g.,
The tabs are moved to the right with either <ul class="nav nav-tabs navbar-right"> or <ul class="nav nav-tabs pull-right">, the bottom line does not extend to the left, e.g.,
How to fix this?
You can add classes to your li's as such:
CodePen Here
<ul class="nav nav-tabs">
<li class="pull-right">Item 1</li>
<li class="active pull-right">Item 2</li>
<li class="pull-right">Item 3</li>
</ul>
I just started learning Bootstrap and recreating my old site. I had my side nav done, when yesterday I noticed there is a new Bootstrap release v3.3. That version is missing some of the classes the previous boostrap.css had, such as the `nav-list' I was using (below). Is that common? Should I expect to loose classes with new Boostrap releases?
It's not a big deal, I can create my own, of course. Bootstrap examples don't even demo a stackable side nav! Am I missing linking to some file?
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Seciton Header</li>
<li class="active">Item A</li>
<li>Item B</li>
<li class="nav-header">Seciton Header 2</li>
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
.nav-list was part of Twitter Bootstrap 2, and we're talking of Bootstrap 3 here... This is normal that a new version brings major changes, as dropped functionalities, and new ones.
Have a look on Bootstrap migration guide. You'll see that:
[.nav-list have] no direct equivalent, but list groups and .panel-groups are similar.
Here's how to get a similar behavior in Bootstrap 3:
use .nav-pills.nav-stacked instead of .nav-list
replace .nav-header by .disabled
wrap you "nav-header" content in a <a>
Twitter Bootstrap 2.3:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/2.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Seciton Header</li>
<li class="active">Item A</li>
<li>Item B</li>
<li class="nav-header">Seciton Header 2</li>
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
Bootstrap 3.3:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well sidebar-nav">
<ul class="nav nav-pills nav-stacked">
<li class="disabled"><a>Seciton Header</a></li>
<li class="active">Item A</li>
<li>Item B</li>
<li class="disabled"><a>Seciton Header</a></li>
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
As mentioned here: What replaces nav lists in Bootstrap 3?
The removal of .nav-list has been documented in Migrating from 2.x to 3.0
In the second answer is also mentioned how to add it back, using less or css.
I have a navigation bar with drop down menus created with UL elements. Currently, the drop down table shifts when the web page is zoomed in or out. How do I style the CSS so that the drop down menus will stay aligned?
<ul id="links">
<li>First link</li>
<li>Second link
<ul id="dropdown1">
<li>Drop down item 1</li>
<li>Drop down item 1</li>
<li>Drop down item 1</li>
</ul>
</li>
<li>Third link</li>
<li>Fourth link
<ul id="dropdown2">
<li>Drop down item 1</li>
<li>Drop down item 1</li>
<li>Drop down item 1</li>
</ul>
</li>
</ul>
jsFiddle here.
Is it possible to target only the "Pulldown Parent Menu" link below in CSS (I can't modify the code below)?
The line of code I wish to target so that I can modify it in CSS is:
<li class="page_item page-item-8">Pulldown Menu Parent
The page-item-8 class is dynamically generated so I can't rely on it.
The full code is:
<div id="access" role="navigation">
<div class="skip-link screen-reader-text">Skip to content</div>
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-19">Contact</li>
<li class="page_item page-item-8">Pulldown Menu Parent
<ul class='children'>
<li class="page_item page-item-9">Test Page 2</li>
<li class="page_item page-item-11">Test Page 3</li>
<li class="page_item page-item-13">Test Page 4</li>
<li class="page_item page-item-15">Test Page 5</li>
<li class="page_item page-item-17">Test Page 6</li>
</ul>
</li>
</ul>
</div>
</div><!-- #access -->
How can I access the Pulldown Menu Parent link above in CSS?
At your Appearance > Menus, you can click Screen Options and click CSS Classes to add specific class for a specific menu item.
Click here for full image view