In pyroCMS it echo's its navigation like:
<li class="last current">
portfolio
</li>
What I am trying to do is format the li.current and in my css code I have the following:
header nav li.current{
font:18px Myriad Pro;
color:#2d2d2d;
}
But this does not seem to be sticking to the current page, Are there any other ways that I could code the css for the particular css current class?
Do you have other rules that apply to anchors? Try
header nav li.current > a
Related
<div class="col-lg-3">
<ul class="nav navbar-nav login-right">
<li>Login or create account</li>
</ul>
</div>
Simple question, how to write class in CSS and how to name it to make different colors for those two links, and also to move inline style in external CSS.
I tried to give normal class to each link and just to call that classes in external CSS file but solution fails.
Any idea?
Simple question, how to write class in CSS and how to name it to make different colors for those two links, and also to move inline style in external CSS.
You can use nth-child and color both a tags differently
ul.nav li a:nth-child(1){
color:green;
}
And
ul.nav li a:nth-child(2){
color:blue;
}
Since both have the same padding style you can place it in a common style definition
ul.nav li a{
padding:0;
}
Important: make sure the external file which you write this in is placed last in your HTML hierarchy. By CSS prioritisation rule the file placed last in the hierarchy gets the priority.
Edit: seems like you have many elements with same structure. In this case it's better to select specific element and using id will be our best choice. Add id to your ul as below
<ul id="colorMe" class="nav navbar-nav login-right">
And change your CSS selectors to
#colorMe li a:nth-child(1)
Do similar to other selectors too
I have this DOM Tree:
<ul id="menu-horizontalnav" class="menu">
<li id="menu-item-19">
<ul class="sub-menu">
<li id="menu-item-99" ></li>
</ul>
</li>
</ul>
Now I want that the <ul class="sub-menu"> and his child content is hidden.
I added a new .css rule to my style.css file:
But as you can see it gets overriden by this rule:
If I deactivate display: block; everything works.
My Quesiton is how can I add a .css rule which is only valid for the class="sub-menu"
without getting this rule overriden by the rule .menu ul
In my Understanding from the .css rules the display: none; rule should override the
display: block; rule, because it is deeper in the hiracy
I added my code in the style.css file in my child theme
A trivial way would be to overwrite the CSS rule by marking it as important:
.sub-menu {
display: none !important;
}
But this technique should be avoided if at all possible for various reasons.
The better way would be to explicitely address the place the sub-menu class takes in the DOM hierarchy in your css:
.menu ul.sub-menu {
display: none;
}
This instruction is more specific than just using .menu ul and will thus be preferred by the browser.
Just add the following css:
ul .submenu {display:none !important;}
It should solve your problem and override the ul.menu class
Add
hideMenu
{
display:none !important;
}
Whenever you want to hide , add this class using addClass or just add the property alone.
Whenever you want to remove this, removeClass or remove the property.
So I'm working with the standard wordpress navigation and I need to change the background of each menu item when the link inside the list item is active.
.current-menu-item does the trick for all list items but the problem then is that I have the same styling for each element.
For instance:
<nav>
<div>
<ul>
<li>
home
</li>
<li>
portfolio
</li>
</ul>
</div>
</nav>
Does anyone have experience with this?
I tried using pages like: http://codex.wordpress.org/Function_Reference/wp_nav_menu
But without any result unfortunately..
Also using child selectors didn't work..
It sounds like you want different active states for each individual link. .current-menu-item captures the active link, but doesn't offer customization for each individual link.
I think you can use a combination of nth-child and .current-menu-item. Do you know where .current-menu-item gets applied? If it's on the <li>, this should work:
nav li:nth-child(1).current-menu-item {
background-color: red;
}
nav li:nth-child(2).current-menu-item {
background-color: blue;
}
nav li:nth-child(3).current-menu-item {
background-color: green;
}
See it in a fiddle: http://jsfiddle.net/Dz32R/
HOw to style link with class selected under this html structure
<li class="submenu_items" style="display: list-item;">
<ul>
<li>
<a class="selected" href="/page">Page</a>
</li>
</ul>
</li>
This should do it for you:
.submenu_items ul li a.selected{
/* your CSS properties here */
}
You can also use the > operator to denote a direct descendant.
There are a number of variations in how you can target the .selected link, I'd also reccommend you have a look at the MDN article on CSS specificity
Use the below to style selected
.submenu_items ul li > a.selected{/* your code goes here. */}
Hope this helps.
To over-ride parent styles (in this case 'submenu_items') you just need to make your CSS targeting more specific. For example:
.submenu_items ul li a.selected{
/* Add your CSS */
}
I have the following piece of code based on Twitter's Bootstrap:
<ul class="nav nav-tabs" id="myTab" style="border-bottom-color: black">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
I was able to customize almost all of its css to my needs.
The part I'm stuck at is the <li class="active">, what would be the css rule to overwrite it?
ul.nav.nav-tabs > li.active {
color: red;
}
I think that should do it, or if you only want to target the li in that particular nav
#myTab > li.active {
}
If you want to override it only for this particular navigation, you can simply include the ID to the CSS rule:
#myTab > li.active{
/* Your CSS goes here */
}
li.active is the rule for that tag. Remember that css rules are run in the order that the files are linked, so if you want to overwrite it, just add li.active rules in a css file that is linked after bootstrap.css. You could also just edit bootstrap.css