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.
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;
}
We're using a bootstrap page that we found for a menu that's displayed at the left. Then I added a menu at the top. The page basically looks like this.
The issue is that the following CSS that's supposed to affect the top menu is also affecting the menu at the left:
nav > ul > li:hover {
background-color: rgb(0,168,224);
}
This CSS is in a file menu.css that's supposed to be used exclusively by the top menu, but when I change the color, it changed both the top and left menu. It also occurs with other properties.
I tried adding !important; but that didn't do much.
I'm familiar with basic CSS, but this seems a little more complex.
What can I do so that any changes to hover (and any other properties) will only affect the top menu?
You have to write your css a bit more specific in order to style to top navigation.
For example, you can add an id to the top menu:
<nav id="topmenu">
<ul>
<li>item 1</li>
<li>item 2</li>
....
<ul>
</nav>
Your css should be this:
nav#topmenu > ul > li:hover {
background-color: rgb(0,168,224);
}
you should add class to tags which you want to affect and style by class names instead of tags.
Even if you have multiple stylesheets they can override one another if using the same names/elements. So instead of using
nav > ul > li:hover
You should make a class or id for your menus (optionally in menu.css)
So this could be for the upper menu:
.upperMenuLi:hover{
background-color: Yellow;
}
and for your side menu you could do the same, but with a different name, like;
.sideMenuLi:hover{
background-color: Grey;
}
The above code causes the top menu to have a yellow bg on hover, and the side menu to have a grey background on over.
so keep in mind:
By using nav > ul > li:hover that style will be applied to ALL elements following that order.
You want to limit the scope of you rules. nav > ul > li:hover selects a hovered li item that is a direct child of a ul which in it's case is a direct child of a nav element. The "problem" is this hierarchy is very common and might (and does) clash with other structures.
You have to create a selector which is uniqe. The easiest way, and IMO the most elegant way is to declare descriptive classes for this and select based on those.
For instance:
.navigation {
}
.navigation__list,
.navigation__list-item {
list-style: none;
margin: 0;
}
.navigation__list {
display: flex;
justify-content: spece-between;
padding: 0;
}
.navigation__list-item {
padding: 0 10px;
transition: all 0.3s;
}
.navigation__list-item:hover {
background-color: rgb(0,168,224);
}
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__list-item">Home
<li class="navigation__list-item navigation__list-item--active">About
</ul>
</nav>
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
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!