I am having hard time to figure out on how to style the menu button from http://marloncureg.com/preceptmanagement/our-services/ so that the menu item when it is the active page have a different color.
I have this custom css
#superfish-menu #menu-top-menu-1 .menu text-left sf-js-enabled .current_page_item .menu-item-title {
color:#211d70!important;
}
but it seems I am missing out something
When I add the following rule in Firefox and Chrome:
.current_page_item .menu-item-title {
color: red !important;
}
the current page item is red.
The first selector you have put there is missing the dot from the class name. Is that just a typo here?
Related
Can anyone tell me why the colour of "Slewing Rings" is not in red whilst the background colour is indeed in yellow? I'm sure I'm doing something incredibly stupid... but it is beyond me as to what it could be.
Screenshot showing elementor editor with menu bar
/* Decorate Slewing Rings in Menu */ .slewing-rings {
background-color:
yellow; color: red;
}
As always,
thank you.
Michelle
Maybe your text color is inheritance from parent element.
Try it
color: red !important;
You can do it in two ways:
1. You can give !important to css property like this
/* Decorate Slewing Rings in Menu */
.slewing-rings {
background-color: yellow;
color: red !important;
}
You can give parent class with ".slewing-rings" class to change it priority.
/* Decorate Slewing Rings in Menu */
.parentClass .slewing-rings {
background-color: yellow;
color: red !important;
}
You need to style the child element which contains the "Slewing Rings" text, not the surrounding label box (which is what your .slewing-rings class is currently being applied to.) I can't know your exact node-tree from that picture but if you right click and inspect element on that button, try to style the element which contains the text.
<div class="slewing-rings">
<span>Your Text Is Probably Here</span>
</div>
Now that you've provided your page link I can give more concise help:
<li class="slewing-rings menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-171">
Slewing Rings<span class="sub-arrow"><i class="fa"></i></span>
</li>
The "a" tag needs to be targeted within your CSS. However, your website seems to be working as you intended, so you may have figured it out. It seems the elementor-item class is working to provide the red color.
The class is added to the li item which is why your css doesn't work.
Try this
.slewing-rings a {
color: red;
}
If you look at the top nav menu of http://www.footballpractice.org, you'll see that I've tried to add the dashicons in there using CSS classes assigned via Wordpress menu. The dashicon looks fine in the regular state, but doesn't take on the hover effect. What's the best way to apply hover classes to a :before element?
One way to do it is by applying :hover before :before.
div:hover:before {
...
}
For your website that would be:
.dashicons-megaphone:hover:before,
.dashicons-search:hover:before,
.dashicons-groups:hover:before,
.dashicons-format-video:hover:before {
...
}
Although this is what you ask, it's not what you want. You want the icon to be included in the hover effect, and that's why it's better to set :before on a span inside the a tag.
Updated html
<li>
<a href="#">
<span>Drills</span>
</a>
</li>
Updated css
.nav-header .genesis-nav-menu li a span:before {
content: "\f488";
font: normal 18px/1 'dashicons';
margin-right: 5px;
}
That will do it, let me know if you need more help.
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/
I am trying to override my default CSS in my WordPress theme's settings, but am having a heckuva time doing so.
Here's what my top menu looks like:
And the same goes for the submenu links when hovering over the top links:
I'd like the links to be white ... obviously the blue doesn't show up well at all.
Here's what I get when I Firebug the "About" link:
And when I right click the Firebug and copy the HTML, here's what part of it looks like:
<ul class="menu" id="menu-mega-menu"><li class="menu-item menu-item-type-custom menu-item-
object-custom level0 has-sub" id="menu-item-3462"><a href="#"><i class="icon-thumbs-
up"></i>About<i class="icon-caret-down"></i></a>
<div class="sub-content" style="display: none;"><ul class="columns">
<li><ul class="list"><li class="header">The Basics</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page level2" id="menu-
item-155">Our Mission</li>
I've tried using #MashMenu, .menu-mega-menu, .mashmenu, and always do a color:#FFFFFF!important; but nothing ever gets rid of that blue. I don't know if I provided enough information here, but any help in guiding me in the right direction would be truly appreciated!
My blog is located at http://www.occupyhln.org
I'm not sure if the color is coming from the wordpress theme or from the user agent stylesheets, but the latter do tend to have higher specificity selectors for a that will prevent the simple a selector from working the way you want.
Inherited values are not related to selectors. You need to actually select the a to override other selectors for its property. For example:
.wordpress-theme a {
/* Selects <a> and sets the color
color: blue;
}
#MashMenu {
/* Selector has higher specificity but does not select <a> */
color: red;
}
#MashMenu a {
/* Selects `<a>` with higher specificity */
color: red;
}
I believe you need to apply the color override directly to the the <a> tag your are trying to effect. You probably have something more high-level that is dictating the color.
Consider this simple example:
HTML
<ul>
<li>
<a href='http://google.com'>Here is a link</a>
</li>
</ul>
CSS
li {
color: red;
}
li a {
color: green;
}
The original css is more specific and has the !important value on it. So fight fire with fire and do something like
.catalyst-widget-area a, .catalyst-widget-area a:visited,
.catalyst-widget-area a:hover {
color: #fff !important;
}
You can narrow the selector even more so you make sure it overrides it.
#mashmenu .catalyst-widget-area a, #mashmenu .catalyst-widget-area a:visited,
#mashmenu .catalyst-widget-area a:hover {
color: #fff !important;
}
And you can go on and on, making it more specific until it yields.
But here's something I've been wondering, how are you adding all these custom css files to a Wordpress theme? I say this, because there's is a right way, and many wrong ways to do it.
The right way is making a child theme of your current theme and work it from there. Child themes however, are not for entry-level modifications (though is way easier to override default styles from a child theme), in that case, there are plugins that help you override the css with your own custom css, one of the most popular is Jetpack.
In order to solve this issue in case anybody runs into a similar issue, I used the following:
.mashmenu .menu>li>a{color:#FFF !important;}
.mashmenu .columns .list a{color:#FFF !important;}
.mashmenu .menu .sub-channel li a{color:#FFF !important;}
.mashmenu .content-item .title a {color:#FFF !important;}
.mashmenu .page-item .title a {color:#FFF !important;}
.mashmenu .page-item a {color:#191970 !important;}
But when putting it at the bottom of my custom CSS, it didn't work; when I put it at the beginning of my custom CSS, it worked for some reason. I have no idea why this is the case, but this is what finally did the trick for me. Thank you for all who opined and helped me figure this out.
I have few <asp:LinkButton>'s in my website menu bar. The menu bar and these buttons have Css set. What I am looking for is to highlight the button corresponding to which ever page is active.
I could apply a new Css class dynamically to my Linkbuttons(rendered as anchor tags by the browser) but the newly applied CSS is overridden by the existing class. I have tried analyzing any mistake there but no luck. This is my code-
A part of HTML-
<ul class="navigation">
<li>
<asp:LinkButton ID="lbtn_about" runat="server" OnClick="lbtn_about_Click">About Us</asp:LinkButton>
</li>
Existing css-
ul.navigation li a
{
text-decoration: none;
display: block;
color: #838383;
height: 24px;
}
Css class to be set dynamically-
.activeLink
{
color: #588500;
}
In my page loads I am doing this-
LinkButton lb = (LinkButton)Page.Master.Master.FindControl("lbtn_about");
lb.CssClass = "activeLink";
HTML rendered in browser-
<a id="ctl00_ctl00_lbtn_about" class="activeLink" href="javascript:__doPostBack('ctl00$ctl00$lbtn_about','')">About Us</a>
Its clear that the class is set, but the activeLink css is overridden by the ul.navigation li a. Suggestions please.
This is because ul.navigation li a is more specific than .activeLink.
If you think about a point system an element say ul has 1 point, a class say navigation has 10. Therefore the ul.navigation li a has at least 11 points on just the ul.navigation vs the activeLink of 10.
A good detailed article on css specificity!
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html">
As for a solution you just need to reference your .activeLink with more specificity, be it with an #id or a ul.navigation li a.activeLink.
Go forth and may the css be with you!