Wordpress: Highlight active menu item - css

I am working on this website and i am trying to highlight with a border-bottom the active menu link. As you can see is a one scroll website but i can't highlight it via CSS. I want to highlight the MÖGLICHKEITEN - GALERIE - KONTAKT links when they are active.
I tried this:
CSS:
#dslc-module-84 .dslc-navigation .menu > li > a:active { border-bottom: 1px solid #3da22b !important; }
Any ideas?
EDIT:
KONTAKT

You need to use parent child selector CSS to achieve what you are looking for.
For instance,
.menu li.menu-item a._mPS2id-h.mPS2id-clicked.mPS2id-highlight{
border-bottom: 1px solid #3da22b !important;
}
You need to target the main parent menu class which is .menu in your case and go on to select its child till you reach li with the selected menu. Once you do, target it's child a to achieve what you are looking for.
Hope this helps.

Wordpress provides classes for the current menu item (i.e: .current-menu-item).
You should use these selectors to declare your style rule for the given menu item.
Examples:
.menu li[class*="current"] {...}
.menu .current-menu-item {...}
More specific to your case:
.menu li a[class*="-highlight"],.menu li a[class*="-clicked"] {...}
Regarding the :active pseudo-class you initially tried to use:
The :active CSS pseudo-class matches when an element is being
activated by the user. It allows the page to give a feedback that the
activation has been detected by the browser. When interacting with a
mouse, this is typically the time between the user presses the mouse
button and releases it. The :active pseudo-class is also typically
matched when using the keyboard tab key. It is frequently used on
and HTML elements, but may not be limited to just those.
(Source: active - CSS | MDN)
Learn more: :active - CSS | MDN

Just use this:
#dslc-module-84 .dslc-navigation .menu > li.current-menu-item > a {
color:#eee;
}

Related

CSS: Can't get Active link to have extra styles

I'm trying to get the active page link on this Shopify store to have a top white border. Tried all sorts of things and nothing is working. I would just think I need
#main-header .dropdown.menu > li > a:active {
border-top: 2px solid #FFF;
transition: none;
}
Tried a:focus too but no luck.
try
#primary-menu> li.menu__active a {
border-top: 2px solid #FFF;
transition: none;
}
a:active is the state of the link after being clicked until the new page is loaded, which is usually a very short time, often even invisible. If you click and hold on a link in your page, you see the applied border-top appearing
If however by "active link" you mean the link of the page which you are currently on, that's not a:active, but the .menu__active class which is added via JS by the website to the li parent of the menu link (not automatically - there has to be a script that does that, which a lot of frameworks and themes/templates have included).
So in this case, just use .menu__active class as the selector for the CSS rule of the li element of that link. But you probably might have to make the selector more specific to overrule other rules, like #main-header .dropdown.menu > li.menu__active > a.

In Squarespace Adirondack theme, how do I target an individual nav item with CSS?

Using the Squarespace Adirondack theme, I need to make one nav item a different color ("shop kids"), and when I target its id starting with yui_ etc. it does not work because the id keeps changing - it seems that the nav item id gets auto-generated by Squarespace. I can change the colors of the nav items globally with no problem using css, but my requirements here are to make one nav item EE258F (pink) in both the visited and active states. Is this possible?
https://shara-karasic-4b4j.squarespace.com/
You can target that link specifically by selecting it in CSS based on its href attribute, like so:
#main-navigation a[href*='fireandcremekids.com']:visited,
#main-navigation a[href*='fireandcremekids.com']:active {
color: #EE258F;
}
Try this:
#main-navigation .nav-wrapper li:last-child a,
#main-navigation .nav-wrapper li:last-child a:visited{
color: #EE258F;
}
Target that link by attribute.
Do it with jQuery:
$('a[href="fireandcremekids.com"]')
OR Css:
main-navigation .nav-wrapper a[href='fireandcremekids.com']

How can I designate a unique menu item and give it unique properties?

I am working with this menu: http://cssmenumaker.com/menu/light-opera-drop-down-menu
I would like to make the last menu option unique and have it always highlighted red, with a unique hover/active. The problem I am having is navigating the existing code so that I can add styles to my unique option. I tried identifying it via the , and then I can call it in the stylesheet
#cssmenu ul li.donate:hover > a {
background: red;
This allows me to change the hover to red, but I am unable to get it to just always be highlighted red. I tried
#cssmenu ul li.donate {
background:red;
}
but that does nothing.
#cssmenu ul:last-child li.donate:hover > a {
try using :last-child
The reason your styles do not register is because the selector associated with your background declaration is not specific enough. In CSS, the C stands for Cascading. The browser trickles down or cascades multiple declarations that may or may not affect the same element. Ultimately the styles that will be applied are the ones that come with the most specific selector.
Here's the fiddle that works: http://jsfiddle.net/8kfwQ/2/. Hover over "products" and then "product 2" and you'll see a "Donate" link.
Here's the code that I've appended at the very end of the CSS in the fiddle:
#cssmenu .has-sub .has-sub ul li.donate a {
background-color: blue;
}
The selector is more specific and that's why the default maroon background gets overridden.

css multilevel dropdown inheritance

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

Can't seem to change color of link

Here's a screenshot of the problem:
Notice that we're on the stalk page. The CSS I wrote is supposed to change the color of the active page. Here is the CSS:
#nav {
border-top:10px solid #A7C1D1;
height:45px;
padding-left:100px;
padding-top:20px;
margin-left:0;
color:#000;
}
#nav a {
color:#000;
text-decoration:none;
}
#nav a:visited {
color:#000;
}
#nav a:hover {
color:#93AFBF;
}
#nav .active {
color:#93AFBF;
}
Before, I had the CSS for #nav .active to create a border around the active page. This worked and I could see the border around the word "stalk" when I was on the /stalk page. But this time around, I decided to just change the color of the word. This is where I ran into the issue.
Here is the HTML rendered for the page:
<div id="nav">
home · stalk · link3 · link4
</div>
If I take away the CSS for #nav a:visited then the CSS for #nav .active works, but now the visited links are blue when I want them to stay black.
Use
#nav a.active {
color:#93AFBF;
}
The #nav a:visited has higher specificity w3 specs than #nav .active and thus gets applied.
Try
#nav a.active
{
color: #93afbf
}
That should do it.
try:
#nav a:link {color: #000;}
#nav a:visited {color: #000;}
#nav a:hover {color: #93afbf;}
#nav a:active {color: #93afbf;}
You are confusing the active pseudo class
Site Point Refrence
This pseudo-class matches any element that’s in the process of being activated. It would apply, for instance, for the duration of a mouse-click on a link, from the point at which the mouse button’s pressed down until the point at which it’s released again. The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.
Similar Problem
Border property is not inherited while color property it is. So you inherit the color property for your link from the #nav, while the border property was the one declared in the "active" class rules. You should declare the color property for the link with the "active" class as suggested by Gaby
Tonight I found an unusual one. (A link color that I couldn't change.) I went into the inspector and first found the text-decoration-color property set. But no, that would be too easy. I scroll down to color and find this :not selector, which a theme author created. In my specific case, the solution was to duplicate (overwrite) this weird selector with the color I wanted:
#the-post .entry-content a:not(.shortc-button) {
color: white !important;
}
My suggestion is to go into your inspector (F12) and find the "Computed" tab and look where the colors are coming from. Usually it's straightforward where the color is coming from, and the inspector will even tell you which file and which line number set the color. Then the decision is, do you have access/permission to that file? Or maybe you have access, but do you necessarily want access to that file?
If you want to avoid changing the source of the color, for whatever reason, you can just re-declare the color again further down the page, like in your footer, or immediately after the theme is loaded, whatever the case may be. Of course given the option, it's usually preferable to find the root of the problem and then you end up using less CSS code which loads faster and is easier to maintain.

Resources