I got 2 current items on my web-site, the second is a section from home but i need to highlight only the first one, how can i do that? i added a class to the second menu item and tried to modify but it doesnt work. noob wordpress designer here. the site: https://www.crescentbun.testebossnet.ro/ any help would be apreciate.
Your class set is canceled because there is css from the theme overwriting it like:
.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item a {
color: #f4ab02!important;
}
And as you tried to set the CSS on li and there is a CSS applied on your a under the li the CSS is canceled.
So set your CSS like:
.aboutus span{
color: black;
text-decoration: none;
}
Related
I am trying to style my WP Menu Navbar. I want that the Pages that have children pages can be styled differently (mainly reducing the bottom margin, so that it is clear that the children pages belong to the parent page).
I know how to inspect a site and tried to target possibly every class that is listed there. But nothing is working. The site isn't live yet, but I will attach a screenshot of Google Inspect. It's the "menu-item-425" that I want to style differently.
I tried targeting like this:
.main-menu-links .menu-item .menu-item-has-children ul li a {
color: black;
font-size: 50px;
}
But nothing changes. Any advice?
Try to remove space between .menu-item and .menu-item-has-children like this
.main-menu-links .menu-item.menu-item-has-children ul li a {
color: black;
font-size: 50px;
}
I guess these are classes of the same element.
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;
}
I'm working on this Wordpress theme and I'm adding highlighted menus for the current pages using a darker color.
The thing is, I figured out how to highlight the current link, but when I navigate to the "Sample Page" (which is the one who have sub-menus), all the submenus listed get highlited as well. And I don't want that.
The URL -> http://experiencias.freeserver.me/
The CSS I added:
.nav .current-menu-item a{
color: #fff;
background-color:#bc3031;
}
I also tried this to see if it works, but it was not successful
.nav .sub-menu {
display:none;
}
try this
.nav .current-menu-item > a{
color: #fff;
background-color:#bc3031;
}
this will only highlight direct child not nested elements.
I'm trying to style a custom menu in the sidebar of a child theme of
WordPress' TwentyTwelve theme.
I'm trying to give a current menu item a grey background.
Unfortunately the "parent" menu item somehow gives the background-color to an area much wider than only the current li menu item.
I'm now using this css code:
.current-menu-item {background-color:#666!important;color:#ff0000!important;font-weight:bold;}
.menu li:not(.current-menu-item) {color:#fff!important;background-color:#333!important;}
To give an example/show what I mean: I'm trying to accomplish it on http://populair.eu, you see on the front page that the menu item "populair" also give a grey background around the image above. The sub menu items are ok.
the weird thing is that it runs ok on my localhost.
I have the feeling that if there would be a < br /> between the < asides> it would be solved but somehow im probably missing something.
Has anyone experience with this? / How it should be styled?
You have to use ".current-menu-item a" to give the background to the anchor link, not to the list item. Also, on your ".menu li a" you may have to "display: block" and "clear: both;". The bigger area is a floating problem.
The best thing for you to do is use either Google Chrome's inspect element software or use Firefox's firebug and select the item, while using either of these you can change the CSS code live. This means that while you are looking at the bit you want to change you can change the code and it will reflect in a way you can see it, you will however need to make these changes in your style.css file on your child theme.
Take a look at the menu that is currently on my website www.driftedmass.co.uk, if that is the kind of thing you are looking for then get in touch with me via the contact form on my site.
If you are wanting to bring down the size of the menu you might need to do something like this (were the <<<< that is the bit you need):
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
>>>> display: inline !important; <<<<<<<<
text-align: center;
width: 100%;
background: transparent;
border-color: #ff0000;
}
.main-navigation ul {
margin: 0;
text-indent: 0;
background-color: #ffffff;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
The bit with the arrows would have originally looked like this:
display: inline-block !important;
I hope this sort of helped you out a little bit.
I'm having a bit of trouble with inheritance. if you expand the first menu item and mouse over you'll see a grey fly-out with a link in it. the link inside inherits the original styles and I'm not sure how to stop it from taking on those styles. i just want them to be the default link style while inside the fly-out. I've tried selectors but i'm not having any luck. ideas?
I put my code up here: http://pastie.org/3388191
Just use a CSS's child combinator, ul > li to define the styles to your main list items, that way those styles won't be inherited past your second level subnav, like so:
#nav > ul > ul {
background-color: #999999;
height: 299px;
margin: 0;
padding: 0;
width: 652px;
}
Demo: http://jsfiddle.net/kQuGd/1/show/
EDIT
Read your question too fast and didn't see what your real problem was, sorry about that. There's two ways (that I know of) to fix your link problem.
One way is to add the third level menu links to your default style
a, #nav ul ul a {
// YOUR STYLE PROPERTIES
}
a:hover, #nav ul ul a:hover {
// YOUR STYLE PROPERTIES
}
The second way is to assign a class to either the links in the third level menu, or the links in the first and second level menus.
If you assign a class to the third level links, just apply the same styling to that class as your default links.
If you assign classes to the first and second level links instead, and thus remove all link styles like
#nav ul a
your third level links will automatically get the default link style.
The problem is the use of #nav a which applys a styling to all links within #nav