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.
Related
I am making a navbar for a website made via GatsbyJS. I am attempting to style the links in the navbar such that they do not have an underline.
I have already set the link to not have any text decoration--when I inspect the element in my browser, it even shows the "text-decoration: none" property. I have also confirmed that my CSS is influencing the object--I can change the color of the text, for example, it is only the text-decoration which I cannot influence.
CSS:
.nav {
background: #fd8;
}
.nav ul {
text-align: center;
border: 1px solid #000;
}
.nav ul li {
display: inline-block;
padding: 8px 10px;
margin: 0;
}
.nav ul li a {
color: #221;
text-decoration: none;
}
html + js:
...
import { Link } from "gatsby"
import styles from "./navbar.module.css"
...
<nav className={styles.nav}>
<ul>
<li>
<Link style={{ textDecoration: 'none' }} to="/about">
About
</Link>
</li>
EDIT: the inline styling with textDecoration was a product of some fiddling I was doing prior to posting this question and was not present until recently. Removing it has no effect on the issue.
Rendered HTML by request:
<nav class="navbar-module--nav--25Dcz">
<ul>
<li>
About
</li>
...
</ul>
</nav>
I have discovered that the errant underline was actually a 1px box-shadow, probably from some global style I can't find associated with the Gatsby Typography plugin.
When you say .nav you want to select a class by that. And as I see, in your html,
nav (<nav...) is a tag with a class navbar-module--nav--25Dcz
So if you change your CSS to:
(Remove the period character . from .nav)
nav {...}
nav ul {...}
nav ul li {...}
nav ul li a {...}
It should work fine.
Also, take a look at Styled Components: https://www.styled-components.com/ which let you write CSS in JS and use similar features from preprocessors like Less and SASS.
Hope this helps!
Your issue is that you're using a class selector (.nav) when you should be using a tag name selector instead. Changing to nav ul li a{text-decoration:none} should fix your issue. If that doesn't work, then you probably have some CSS with higher precedence somewhere that is overriding it.
So for those still searching for an answer. It's really a BUG. At least with <ul>, <li> tags and their nesting. There's just one bypass, and even that has a bit of a limitation. So here's a sample with a fixed (removed) underline and it contains notes also on what to add, what to avoid.
https://stackblitz.com/edit/keep-remove-underline-from-nested-li-item?file=index.html [working text decoration removal]
the solution is:
need to use inline-block for <ul>, set vertical top align and 100% width
avoid to use white-space nowrap
I tried everything to remove it, then after reading this I remembered that I added what in the link https://www.gatsbyjs.org/docs/typography-js/
Icones was underlined, anything that will be was underlined
nothing worked until I removed that.
I can't explain why, but when I referenced a class that was LESS specific I was able to get the text decoration to go away with text-decoration none. So if you have a less specific wrapper class try targeting the links with that
.wrapper a {
text-decoration:none;
}
You can select the global a tag or be specific, and after text decoration, add !important. That will override any default styling that gatsby is imposing.
.nav ul li a {
color: #221;
text-decoration: none !important;
}
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.
I am having an issue with an li tag being written as element.style { display:none; } when I have an id or div attached to it. For example:
<ul id="nav>
<li class="another">this</li>
</ul>
In this instance I could either write ul#nav {} or #nav li{} or .another{} which I could then put inside anyone of those a display:inline-block; . The problem is I do that, but the web site still recognizes is as element.style {display:none;} for some reason and I can't figure out why the CSS won't work. I've even tried to do
<li style="display:block;"></li>
but that didn't work either.
When inspecting in Chrome, element.style means that it's an inline style, ie.
<li style="display:none;"></li>
Since the original markup obviously doesn't contain it as you've tried to override it, it is likely being set by JavaScript.
I recommend looking to see if you can find where it is being set in your JS, if that fails or you can't change it, you can always use the less recommended approach and flag your style as !important which will override inline styles.
#nav li {
display:block!important;
}
I have defined a class in my main.css file.
.red {
color: #d14;
}
And using it like this.
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active red">
<i class="icon-leaf icon-white"></i>Admin
</li>
</ul>
</div>
</div>
Besides my main.css I also import the twitter bootstrap css file.
This way it does not work. Is it because Bootstrap is overruling my color definition?
The only element in your markup that could visually apply this style is the <a>, and that element has a lot of really specific CSS rules applied to it by Twitter Bootstrap, stuff like this:
.navbar .nav .active > a,
.navbar .nav .active > a:hover {
color:#FFFFFF;
}
You'll have to write something even more specific to get the style to apply:
.navbar .navbar-inner .nav .red a {
color: #d14;
}
Demo: http://jsfiddle.net/pYGaG/
You could use !important on the rule if you really had to, but I really feel that you should avoid it as much as possible. If this is a single element that has this style, consider adding an id to it, which carries a lot of weight specificity-wise:
<li class="active" id="home_link">
<i class="icon-leaf icon-white"></i>Admin
</li>
#home_link a {
color: #d14;
}
http://jsfiddle.net/pYGaG/1/
Here are a couple good articles on CSS specificity:
http://css-tricks.com/specifics-on-css-specificity/
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
And as a side note, try to avoid presentational class names like red. Use more meaningful ones that aren't tied to the way it should look, but what it is (for example, .active-link).
Your're defining the red color on a <li>-Tag, but there is no text. The text is inside the <a>-Tag, so you need to overwrite this rule.
Code something like this:
.red a {
color: #d14;
}
Update: Go for the answer given by Wesley Murch.
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;}