So I'm using menu_attributes (http://drupal.org/project/menu_attributes) to add specific classes to my menu items.
A problem for me is that these are added to the link itself
<li class="leaf active menu-mlid-873><a class="customClass active" href="/">Home</a></li>
But I would like to somehow make it like this, so that the class is also used for the parent of the link
<li class="customClass leaf active menu-mlid-873><a class="customClass active" href="/">Home</a></li>
I tried using theme_menu_alter but can't seem to figure out how I can get the class from there too.
override the theme_menu_link function. http://api.drupal.org/api/drupal/includes!menu.inc/function/theme_menu_link/7
Related
I'm wondering if there is a pure CSS way to add a class to elements of another class. The problem I'm trying to solve is below, which is also an example.
Using bootstrap, I have a number of elements that look like this:
<li class="nav-item">
<a class="nav-link" href="#">Law</a>
</li>
What I would like to do is add the pull-right class to each element with the class nav-item (I think), in order to make the nav items all float to the right.
Is there a pure CSS way to do this? I think the answer is no, at least without LESS/SASS/JS, but I'd love to be disabused of that notion.
No, if you are wanting to add a class to the CSS you would need to use either JavaScript or Jquery. I would recommend Jquery because IMO it is a little easier to work with when adding classes.
Or you could just add the class to each nav-item:
<li class="nav-item pull-right">
Here is a tricky challenge for you guys, CSS selector to get the :last-child that doesn't have a class.
What I have tried so far:
.nav-item:not(.nav-item--mobile):last-child {...}
.nav-item:last-child:not(.nav-item--mobile) {...}
I have similar query selectors that do some fun stuff, so I'd rather try and do this via CSS. The mobile items can be variable in quantity.
// Get the first child in the list when there are n or more, and
// they are not mobile. Yes, this actually works.
.nav-item:first-child:nth-last-child(n+7):not(.nav-item--mobile)
The following will give me the last child in all cases, but I want the last child that isn't a mobile only child.
.navigation-item--top:last-child
Target
generic generic generic generic generic mobile mobile
^
target this one
HTML
<ul class="nav-items-list">
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item nav-item--mobile"></li>
<li class="nav-item nav-item--mobile"></li>
</ul>
Yes I could figure out which is the correct one in the generated navigation, or I could find it with JS.
Unfortunately what you want cannot be achieved using CSS only.
:last-child asks only one question, no matter what else you specify: Am I the last child of my parent element?
Sadly, there is no :last-of-class, only :last-of-type, but this cares only about element type.
It is not even planned for selectors level 4 that you can specifiy a class or other limiting property.
See
https://www.w3.org/TR/selectors4/#the-last-child-pseudo
I'm building Bootstrap menu in Kentico 6 using "Universal viewer" webpart and hierarchical transformations. So far I got the structure done, but I'm not able to figure out how to add "dropdown-menu" class to a link when his parent <li> has children.
This is the code I'm generating now:
<ul class="nav navbar-nav">
<li>
Some link
<ul>...</ul>
</li>
</ul>
And I'm trying to achieve this:
<ul class="nav navbar-nav">
<li>
Some link
<ul>...</ul>
</li>
</ul>
Class and data should be added only if parent <li> has <ul> embedded inside.
Should I use macro transformation or is there a way to achieve this with ascx transformation?
If there always is a dropdown in case of some child nodes you could use NodeChildNodesCount value.
<a href="#" <%# ((int)Eval("NodeChildNodesCount") > 0) ? "class=\"dropdown-toggle\" data-toggle=\"dropdown\"" : "" %>>Some link</a>
If there are some additional conditions like document type, you need to retrieve number of child nodes for that specific conditions. You can achieve it through document API, in a helper class or directly in ASCX transformation. Look for TreeProvider class. Note that this may be performance intensive operation. I would also consider adding that those dropdown classes on the client side by javascript.
I am creating a dynamic navigation list and I want to be able to highlight the page from that list that the user is currently browsing without having to explicitly add the style into a CSS document. For instance,
<div class="check-me">
<ul class="any-class">
<li class="hats">Hats</li>
<li class="shirts">Shirts</li>
<li class="pants">Pants</li>
</ul>
</div>
Essentially, I want to be able to replace the "any-class" with another class, one that appears on an LI element within the "any-class" UL.
<div class="check-me">
<ul class="shirts">
<li class="hats">Hats</li>
<li class="shirts">Shirts</li>
<li class="pants">Pants</li>
</ul>
</div>
I cannot append an "active" class to any LI due to limitations, so I wonder if this is possible using a wildcard CSS selector to use inside div.check-me to highlight anything that shares the same class with the UL. I hope I've been clear enough.
I have an unordered list that I'm using as a menu. It has a nested list in order to accommodate sub-items:
<ul class="menu" id="sub_menu">
<li class="item452">About Us</li>
<li class="item453">Leadership</li>
<li id="current" class="parent active item454">Press Room
<ul>
<li class="item455">Press Releases</li>
</ul>
</li>
<li class="item456">Community Resources</li>
<li class="item457">Careers</li>
</ul>
The nested list item is not displaying (the Press Releases item), and when I do an Inspect Element, this is what I get:
Can anyone tell my why the element.style of display:none is overriding the matched css rule of display:block?
*EDITED - !important added; no change**
Inline styles override stylesheet declarations. "element.style" shows you the current inline styles. These were probably set via JavaScript.
It must be added via javascript.
Have a look at your javascript file, and look for:
.css
or
.style
It should be one of the above that is modifying the element and therefore overwriting your CSS.