Good day, i'm having difficulties changing wordpress top navigation menu.
Here's the full css path :
Css image path
I have tried to apply this css code
.secondary-navigation .menu-top-menu-container .menu pp menu-item menu-item-type-post_type menu-item-object-page menu-item-73 {
color: blue;
}
But it has no effect :(
Can someone point out what am i doing wrong?
Try this code and let me know what is the result is. thanks.
.secondary-navigation .menu-top-menu-container .menu-item {
color: blue;
}
or
.secondary-navigation .menu-top-menu-container .menu-item a {
color: blue;
}
You can target directly it's first immediate parent and then the class itself, like this:
#menu-top-menu li {
color: blue;
}
So the issue you are having is you are
1) calling multiple classes on the same element incorrectly. in the html the classes need to be separated by a space but in the css this is not the case.
so these classes here =
pp menu-item menu-item-type-post_type menu-item-object-page menu-item-73
should be written as [in your CSS file] =
.pp.menu-item menu-item-type-post_type.menu-item-object-page.menu-item-73
[also you missed out the . in front of each class!]
2) HOWEVER, you do not need to include every class on the element to select it. All you really need is just a single class.
so you could use =
.secondary-navigation .menu-top-menu-container .menu-item {color: blue;}
which i believe someone else has already mentioned.
calling an html element by using mulitple elements can be useful if the circumstance is right [like needing to target some more specifically], but in your case you will be fine with the above!
Related
I'm trying different ways but cannot style a text color for a specific element which is a child of a parent element with a class and an ID.
<li id="menu-item-849" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-849">You won’t want to miss it!</li>
You won’t want to miss it!
<li id="menu-item-849" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-849">You won’t want to miss it!</li>
I would like to color the text red in the tag
so I'm trying to target the ID:
#menu-item-849 .a {
color: red important;
}
or target the class:
li#menu-item menu-item-type-post_type menu-item-object-page menu-item-849 a {
color: red important;
}
I'm doing something wrong for sure, somebody here can help?
Thanks
Your syntax is wrong, on the first you're looking for a child link element with the class of a. Try
#menu-item-849 > a {
color: red;
}
Or if you want to go for the class,
.menu-item > a {
color: red;
}
Your selector is wrong. Id selector starts with #, class selector starts with . and element selector is the name of the element itself.
So do either this
#menu-item-849 a {
color: red;
}
or preferabale this class selector
.menu-item-849 a {
color: red;
}
Try to not use important because it makes it hard to overwrite the styles at another place.
Don't give the same id to multiple elements, this is invalid. Use class names instead.
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;
}
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'm having a bit of difficulty adding some CSS to a link. I'm using a CMS that automatically generates menus in an unordered list. However, where you're on a given page, it applies class="active" the the li and not to the link itself. This works fine for adding a background to the link, but I'm trying to change the link color.
<li class="active">
Link
</li>
I'm having difficulty coming up with the CSS to say "If a link is in an li with class="active" then make the link text color x."
How might I accomplish this?
Thanks!
the path is
li.active a { color: .... }
The MDC CSS Reference has good examples for the various types of selectors.
li.active a {color:whatever}
a
{
color: black;
}
a.active
{
color: green;
}
Try this:
.active a {color: red;}
Is it possible to have a CSS rule which basically "undoes" a prior rule?
An example:
<blockquote>
some text <em>more text</em> other text
</blockquote>
and let's say there's this CSS:
blockquote {
color: red;
}
...but I want the <em> to remain the normal text color (which you may not necessarily know).
Basically, would there be a way to do something like this?
blockquote em {
color: inherit-from-blockquote's-parent
}
Edit: The code I'm actually trying to get this to work on is actually a bit more complicated. Maybe this would explain it better:
This text should be *some unknown colour*
<ul>
<li>This text should be BLUE
<ul>
<li>Same as outside the UL</li>
<li>Same as outside the UL</li>
</ul>
</li>
</ul>
ul {
color: blue;
}
ul ul {
color: ???;
}
With CSS alone, you can't refer to a parent's parent.
The thing you can do is try a mix of specific CSS selectors and markup so that the desired effect appears.
<td>
This is the enclosing element.
<ul>
<li>This is the first level UL, direct child of TD
<ul>
<li>This is the second level UL</li>
<li>Same as outside the UL</li>
</ul>
</li>
</ul>
</td>
CSS:
td > ul
color: blue; /* this affects the "direct child" UL only */
}
You would limit the depth of style inheritance to one level, consequently the inner UL is unstyled in regard to color and gets its setup from the enclosing text.
Read more on the CSS Child Selector, and be aware that older browsers may have their quirks with them.
EDIT
For Internet Explorer 6, the child selector can be faked to some extend. Be sure to fasten seat belts (conditional comments or the like) before using this:
td ul {
color: expression(/TD/.test(this.parentNode.tagName)? "blue" : "black");
}
This assumes "black" as the outer color. If this color value is subject to change, your are out of luck, I'm afraid. Unless you can define an expression() that is able to get the color value from the context (e.g. checking some other properties of parent elements). Or you give up and use a JS framework, as someone else has already suggested.
The wimpy solution without having to use JS would of course be:
td ul.first {
color: blue;
}
But I can see why you want to avoid that.
Use this to make sure the inherit overrides whatever else might have been setting the color:
blockquote em {
color: inherit !important;
}
Give up and use a snippet of javascript to detect the style of the parent and set it? :)
Rather than trying to force a selector to inherit font colour from its grandparent, I would suggest that you give the selector and its grandparent a shared declaration for the font colour.
Taking the blockquote example, assuming that body is the grandparent:
body, blockquote em {
color:[whatever];
}
blockquote {
color:red;
}
And in the case of the unordered lists, it would be:
body, ul ul {
color:[whatever];
}
ul {
color:blue;
}
My CSS is a bit rusty, but this should work:
blockquote {
color: red;
}
blockquote em {
color: inherit;
}
You are setting blockquotes to red, but all <em>'s that are contained in a blockquote should inherit... hmmm, should they inherit from the surrounding text, or from the blockquote?
If the above does not work as you want, then there is no way to do it with the current markup, I think. You would have to work with additional markup, or set the colour explicitltly, e.g.
blockquote em {
color: Purple;
}
Ok, the additional text with example clarifies the question a lot. And I'm affraid that what you want is not possible.
If you know the "unknown colour" you can of course repeat the color. But I think CSS needs some mechanism to add variables or references.
So you have to stick to the cumbersome:
ul {
color: blue;
}
li ul {
color: sameenvironment; /* Sorry but you have to add the specific colour here */
}
If you can change your html you could try
<li><span>This text should be BLUE</span>
<ul>
<li>Same as outside the UL</li>
<li>Same as outside the UL</li>
</ul>
</li>
and the style
li span{
color: blue;
}
EDIT
another way to accomplish this without the extra span tag:
If we assume that we have a style class (or any other selector) that defines to parent of the outer ul. We can modify the css like this:
.parentStyle,
.parentStyle li li{
color:red;
}
li{
color:blue;
}
I too had this question but after I glanced at the other answers it hit me,
body {
color : initial;
}
IE doesn't support this currently and Gecko requires a -moz-initial I believe..
body {
color : unset;
}
This one isn't quite as supported right now. I just thought I'd share my answer to this for anyone else who thinks about this.