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>
Related
In the website I'm working on the navigation menu is made by several nested lists, when one element is clicked on the <li> element with the page name acquires the .active class, if it belongs to a nested list all parent li elements above also acquire the .active class.
I'd like to be able to style the last <li> element with class .active since it corresponds to the currently open webpage.
I'm working with Omeka s content management system, which means that I can't use javascript or modify the HTML files, so I'm looking for a solution in pure CSS.
here is the menu structure:
`
<ul class="">
<li >
Introduction
</li>
<li>
level 1
<ul>
<li>
subpage
<ul>
<li>
sub-subpage
<ul>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
here is when I'm on th page "sub-sub-page":
<ul class="">
<li >
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-subpage
<ul>
<li class="active">
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
`
I've tried to use li.active:last-of-type but it only select the last element of type li.
ul *{
color : #000;
text-decoration: none
}
ul .active ul li ul li ul li a{
color : #f00;
font-weight : bold;
}
<ul class="">
<li >
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-subpage
<ul>
<li class="active">
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
It appeared simpler than I first thought:
Given the current structure, from all nested active elements you need to select the li that only has an a element. To make it work in general (other than a list element) don't use the li element selector at all.
I added two differently nested examples in the snippet along with an ::after text...
.active > a:only-child { color: red }
.active > a:only-child::after { content: ' (active)' }
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-subpage
<ul>
<li>
sub-sub-page
</li>
<li class="active">
sub-sub-page
</li>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br><br><br>
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li>
sub-sub-page
</li>
<li>
sub-sub-page
</li>
<li class="active">
sub-subpage
</li>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br><br><br>
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-sub-page
</li>
<li>
sub-sub-page
</li>
<li>
sub-subpage
</li>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
This solution isn't going to work since I have no control over adding a class/id to the ul element: Get first level li from ul
Given that the parent ul has no id/class, can css be written to target only the first level li? If not, how could it be done?
This is the html:
<ul>
<li id="acomment-62" class=" comment-item" data-bp-activity-comment-id="62">
<div class="bb-activity-more-options-wrap action"></div>
<ul>
<li id="acomment-65" class=" comment-item" data-bp-activity-comment-id="65">
<div class="bb-activity-more-options-wrap action"></div>
<div class="acomment-meta"></div>
<div class="acomment-content"></div>
</li>
</ul>
</li>
<li id="acomment-63" class=" comment-item" data-bp-activity-comment-id="63">
<div class="bb-activity-more-options-wrap action"></div>
<ul>
<li id="acomment-66" class=" comment-item" data-bp-activity-comment-id="66">
<div class="bb-activity-more-options-wrap action"></div>
<div class="acomment-meta"></div>
<div class="acomment-content"></div>
</li>
</ul>
</li>
<li id="acomment-64" class=" comment-item" data-bp-activity-comment-id="64">
<div class="bb-activity-more-options-wrap action"></div>
<ul>
<li id="acomment-67" class=" comment-item" data-bp-activity-comment-id="67">
<div class="bb-activity-more-options-wrap action"></div>
<div class="acomment-meta"></div>
<div class="acomment-content"></div>
</li>
</ul>
</li>
You can do that with CSS alone. There's a few ways you can do it. Here is one of them and a working codepen so you can mess around with it yourself.
HTML
<ul>
<li>Item 1</li>
<li>Item with list 1
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item with list 2
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub List
<ul>
<li>Sub list item 1</li>
<li>Sub list item 2</li>
<li>Sub list item 3</li>
</ul>
</li>
</ul>
</li>
<li>Item 5</li>
CSS
li {
color: red;
}
li li {
color: initial;
}
I'm not sure how supported this is but you could apply the style to all li and then override that style to target any descendant li
EG.
li li {
color: initial;
}
li {
color: red;
}
<ul>
<li>A</li>
<li>B</li>
<li>
C
<ul>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
</li>
<li>D</li>
<li>E</li>
</ul>
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
<ul class="nav">
<li class="dropdown opener">Moodle community
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="Moodle free support" href="https://moodle.org/support">Moodle free support</a></li>
<li class="divider"> </li>
<li class="dropdown-submenu">Moodl
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="Moodle Docs" href="http://docs.moodle.org">Moodle Docs</a></li>
</ul>
</li>
</ul>
</li>
<li class="divider"> </li>
<li><a title="Moodle.com" href="http://moodle.com/">Moodle.com</a></li>
<li class="dropdown opener langmenu">English (en)
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="English (en)" href="http://192.168.1.123/moodle30nw/?redirect=0&lang=en">English (en)</a></li>
<li><a title="عربي (ar)" href="http://192.168.1.123/moodle30nw/?redirect=0&lang=ar">عربي (ar)</a></li>
</ul>
</li>
</ul>
.navbar .nav > li:nth-of-type(2) a:hover{
background-color: #407a61 !important;
color:#fff !important;
}
Why my css is not working here i would like to change the hover background-color of the second element how can i apply it. Is any other way to do it.
Check Here Your Answer
You have to remove > operator from the CSS
Here is the Demo
HTML
<div class="navbar ">
<div class="nav">
<ul>
<li>First One</li>
<li>Second One</li>
<li>Three One</li>
<li>Four One</li>
</ul>
</div>
</div>
CSS
.navbar .nav li:nth-of-type(2):hover {
color:red;
}
I am trying to make my UI-kit navbar fixed, so it will follow the scroll, but my problem is, that it now is overlapping my Off-canvas (like it has a higher z-index, but it hasn't).
Does anyone know how to achieve that the off-canvas is on top of a navbar with a fixed position (top)?
EDIT #1
<nav id="mobileNav" class="tm-navbar uk-navbar uk-navbar-attached uk-hidden-large">
<div class="uk-container uk-container-center">
<a data-uk-offcanvas="{target:'#offcanvas-3'}" class="uk-navbar-toggle"></a>
1.000,-
<div class="uk-navbar-brand uk-navbar-center"><img src="http://www.mammashop.dk/skin/frontend/default/ic_verticalmom_pink_dk/images/logo.gif" title="Mammashop.dk" alt="Mammashop.dk"></div>
</div>
</nav>
<div id="offcanvas-3" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>
<li>Item</li>
<li class="uk-active">Active</li>
<li class="uk-parent">
Parent
<ul class="uk-nav-sub">
<li>Sub item</li>
<li>Sub item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
</ul>
</li>
<li class="uk-parent">
Parent
<ul class="uk-nav-sub">
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
<li>Item</li>
<li class="uk-nav-header">Header</li>
<li class="uk-parent"><i class="uk-icon-star"></i> Parent</li>
<li><i class="uk-icon-twitter"></i> Item</li>
<li class="uk-nav-divider"></li>
<li><i class="uk-icon-rss"></i> Item</li>
</ul>
</div>
</div>
Navbar documentation: http://getuikit.com/docs/navbar.html
Off-canvas documentation: http://getuikit.com/docs/offcanvas.html
My solution:
<nav class="uk-navbar ">
<a class="uk-navbar-brand uk-hidden-small" href="#">Isaac Udotong</a>
<div class="uk-navbar-content uk-navbar-flip uk-hidden-small">
<div class="uk-button-group">
<ul class="uk-navbar-nav uk-hidden-small">
<li class="">
About
</li>
<li>
News
</li>
<li>
contact
</li>
</ul>
</div>
</div>
<div class="uk-container uk-container-center">
<a data-uk-offcanvas="{target:'#offcanvas-3'}" class="uk-navbar-toggle uk-visible-small"></a>
<div class="uk-navbar-brand uk-visible-small uk-hidden-large uk-hidden-medium">
<img src="" title="Mammashop.dk" alt="Mammashop.dk"></div>
</div>
</nav>
<div id="offcanvas-3" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>
<li>Item</li>
<li class="uk-active">Active</li>
<li class="uk-parent">
Parent
<ul class="uk-nav-sub">
<li>Sub item</li>
<li>Sub item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
</ul>
</li>
<li class="uk-parent">
Parent
<ul class="uk-nav-sub">
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
<li>Item</li>
<li class="uk-nav-header">Header</li>
<li class="uk-parent"><i class="uk-icon-star"></i> Parent</li>
<li><i class="uk-icon-twitter"></i> Item</li>
<li class="uk-nav-divider"></li>
<li><i class="uk-icon-rss"></i> Item</li>
</ul>
</div>
</div>
Please Replace this code from your above code.
Here you can use both off-canvas and fixed navbar in responsive design.