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
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
As mentioned in the title, for some reason, particular menu items that have active class do not have active-trail class and so do their parents.
Example menu tree when I am currently at page Test2:
<ul class="menu">
<li class="first expanded">
Test
<ul class="menu">
<li class="first expanded">
Test2
</li>
</ul>
</li>
</ul>
This is how should it be when I am currently at page Test2:
<ul class="menu">
<li class="first expanded active-trail">
Test
<ul class="menu">
<li class="first expanded active-trail">
Test2
</li>
</ul>
</li>
</ul>
Any help is appreciated.
It's more likely that your theme (or a module) is overriding the output using one of these hooks and changing the classes:
theme_menu_link
theme_menu_tree
template_preprocess_menu_tree
I'd recommend starting with checking out the active theme's code.
Or you can just implement theme_menu_link() in your theme and override the classes to your liking.
I am trying to style the nav in a template theme that I neither wrote nor picked. The nav uses lists in its structures and the children at various levels have the same class. I'm hoping someone can help me find the right CSS selector to pick the third level down. Here is the basic structure:
<nav class="nonbounce desktop vertical">
<ul>
<li class="item sub active">
<a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a> THIS ONE!!!
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
What I need to do is grab the 3rd level down (called Mowers in example).
My ultimate goal is to style this level and move it vertically but first I need to be able to modify only that level with CSS.
This is a new site but I can provide the real site URL if that would help.
jc
You can try this
.subitemLink[title~="mowers"] {
font-size:20px;
}
<nav class="nonbounce desktop vertical">
<ul>
<li class="item sub active">
<a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a> THIS ONE!!!
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
I'm trying to make a menu with submenu but when I hover the menu, submenu is opened itself. Here is my site where I try to make sub menu http://ilkereksioglu.com/
And my HTML:
<li class="dropdown">
Dropdown2 <b class="caret"></b>
<ul class="dropdown-menu">
<li class="kopie">Dropdown2</li>
<li>Dropdown2 Link 1</li>
<li>Dropdown2 Link 2</li>
<li>Dropdown2 Link 3</li>
<li class="dropdown dropdown-submenu">Dropdown2 Link 4
<ul class="dropdown-menu">
<li class="kopie">Dropdown2 Link 4</li>
<li>Dropdown2 Submenu Link 4.1</li>
<li>Dropdown2 Submenu Link 4.2</li>
<li>Dropdown2 Submenu Link 4.3</li>
<li>Dropdown2 Submenu Link 4.4</li>
</ul>
</li>
</ul>
</li>
sorry if this has been asked before, I've looked and have tried several options but I can't seem to get this to work. I want to center my submenu. Each parent item has variable widths, and the submenu items also have variable widths.. This is my code:
.menu-wrap ul li{margin:0;padding:0;display:inline-block}
.menu-wrap ul li>a{font-size:16px;color:rgba(0,0,0,.6);display:block}
.menu-wrap ul li>ul{position:absolute;float:left;left:0;right:auto;top:90px;width:auto;padding:10px 0;background:#fff;opacity:0;border-top:solid 1px rgba(245,130,32,1)}
.menu-wrap ul li.parent:hover>ul{opacity:1}
<ul class="nav menu">
<li class="item-101">Home</li>
<li class="item-129 parent">About
<ul class="nav-child">
<li class="item-148">About Us</li>
<li class="item-116">Testimonials</li>
</ul>
</li>
<li class="item-114 parent">Services
<ul class="nav-child">
<li class="item-122">Services Page Example</li>
<li class="item-123">Services Page Example 2</li>
<li class="item-124">Services Page Example 3</li>
</ul>
</li>
<li class="item-154">Case Studies</li>
<li class="item-115">Gallery</li>
<li class="item-149">FAQ's</li>
<li class="item-117">Contact</li>
</ul>
Currently it's just left aligned.
I came across this guide recently and found it helpful.
http://css-tricks.com/centering-css-complete-guide/