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.
Related
I am using MaterializeCSS's extended navbar with tabs to display content on my static website. I copied and pasted the example code into my project files, and while it seemed to work fine initially on my screen, when I began resizing it, I noticed that some of the tab names would get cut off, and the scrollbar that the documentation says should appear when this happens does not display on my end.
<header>
<nav class="nav-extended navColor" role="navigation">
<div class="nav-wrapper">
BRAND
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>page 2</li>
<li>modal 2</li>
<li>Contact</li>
</ul>
</div>
<div class="nav-content">
<ul class="tabs navColor">
<li class="tab"><a class = "active" href="#all">All</a></li>
<li class="tab">Really Long Name 1</li>
<li class="tab">Really Long Name 2</li>
<li class="tab">Really Long Name 3</li>
<li class="tab">Really Long Name 4</li>
<li class="tab">Really Long Name 5</li>
<li class="tab">Really Long Name 6</li>
<li class="tab">Really Long Name 7</li>
<li class="tab">Really Long Name 8</li>
<li class="tab">Really Long Name 9</li>
</ul>
</div>
</nav>
<ul class="sidenav navColor" id="mobile-menu">
<li>Home</li>
<li>page 2</li>
<li>modal 2</li>
<li>Contact</li>
</ul>
</header>
codepen with materializecss and js: https://codepen.io/khw889ajv/pen/JjpvjEN
materialize tabs: https://materializecss.com/tabs.html
materialize navbar: https://materializecss.com/navbar.html
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
This is what I have:
And this is what I want:
I cannot easily change the DOM structure as I am working with a WordPress list generated via creating a new menu. I have tried different techniques such as Flexbox and grid but I just cannot seem to get the results I am after. I'd love it if someone could help here. Thank you.
https://codepen.io/WayneHaworth/pen/BGzzpr
<div class="container">
<ul id="main-menu">
<li>
<span>List 1</span>
<ul class="inner-list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
</li>
<li>
<span>List 2</span>
<ul class="inner-list">
<li>item 1</li>
<li>item 2</li>
</ul>
</li>
...etc
</ul>
</div>
As per #Doug's comment, adding a CSS column to the outside UL fixed this.
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 5;
Using CSS, is it possible to select the first N items matching a class, when they don't have a common parent? I know it is possible when they have a common parent, using nth-child I believe, but that only works when all the elements have a common parent, because that's the only case when they are siblings.
Here's an example of my specific situation. In this example, I want to select the <li> for tasks 1 to 5, using CSS. Possible?
<div id="todo-lists">
<ul class="list">
<li>Task 1</li>
<li>Task 2</li>
</ul>
<ul class="list">
<li>Task 3</li>
<li>Task 4</li>
<li>Task 5</li>
<li>Task 6</li>
</ul>
<ul class="list">
<li>Task 7</li>
<li>Task 8</li>
<li>Task 9</li>
<li>Task 10</li>
</ul>
</div>
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>