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
Related
List categories:
<ul class="list">
<li data-value="" class="option selected focus">All Categories</li>
<li data-value="5058" class="option">Cat 1</li>
<li data-value="5064" class="option">Cat 2</li>
<li data-value="5121" class="option">Cat 3</li>
<li data-value="6151" class="option" style="display: list-item;">Cat 4</li>
<li data-value="6379" class="option"></li>
<li data-value="6758" class="option">Cat 6</li></ul>
I removed <li data-value="6379" class="option"></li> List from Wordpress Dashboard and now i get this:
How is displayed
I try to hide that with CSS:
1. ul.list li.option:nth-of-type(5n+0) {display: none !important;}
2. ul.list li.option:nth-child(5) {
display:none;
}
3.ul.list li.option:nth-of-type(1n+4) {display: none;}
How to remove that field from the dropdown?
This works for me, you needed nth-child(6) because its the 6th item!!
ul.list .option:nth-child(6) {
display:none;
}
<ul class="list">
<li data-value="" class="option selected focus">All Categories</li>
<li data-value="5058" class="option">Cat 1</li>
<li data-value="5064" class="option">Cat 2</li>
<li data-value="5121" class="option">Cat 3</li>
<li data-value="6151" class="option" style="display: list-item;">Cat 4</li>
<li data-value="6379" class="option"></li>
<li data-value="6758" class="option">Cat 6</li></ul>
</ul>
Using an example of W3Schools at the following :W3Schools DropDown
I have followed the example but it is not working for me. Here's where I want it:
#Styles.Render("~/Content/bootstrap.min.css")
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" #Html.ActionLink("Our Church", "Index", "Home")</a>
</div>
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>MTB Link 1</li>
<li>MTB Link 2</li>
<li>MTB Link 3</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>MTB Link 4</li>
<li>MTB Link 5</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
#Html.Partial("_LoginPartial")
</ul>
</div>
</nav>
</header>
I honestly don't understand why this isn't working. My css file contains the correct code.
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