CSS classes for links (paragraphs and menu)

[edgrbnz]

Just two quick questions:

1. Can anyone help me out which classes I need to address in my CSS to globally alter the links (active, hover,…) in paragraphs and the links in the menubars?
   The built-in functions of Lay are fine but I'd prefer to style them with custom CSS.

2. On my current (wip) site I have a section Work which is an overview of all the projects on my site. When entering a project the menu-item isn’t shown as active anymore.
   It’s a minor thing,… but it’s kinda inconsequent. I’d prefer to show that menu-item as active inside projects.

Would be helpful!
Thanks!

[mariusjopen]

Dear @edgrbnz

you can try this:

.text a:hover {
   color: red !Important;
}

Can you send us a link to your website?

Best!

Marius

[edgrbnz]

I tryed that CSS already, works fine.
Except for the menu items, they just behave as they did before.

[mariusjopen]

Dear @edgrbnz

for the menu try this:

.menu-item span:hover {
    color: yellow !important;
}

Best!

Marius

[edgrbnz]

Looks like I'm slowly gettign there.
Problem is I don’t want the active menu-Item to lose it’s border-bottom when hovered. Is there any way to also target the active state via CSS to do so?

I tryed to control that via current-menu-item but no success. Here’s the CSS I’m using so far:

.text a{
    color: #eee;
    transition: ease-in-out 0.15s;
}

.text a:hover{
    color: #fff;
    text-shadow: 0 0 4px #fff;
    border-bottom: none;
    transition: ease-in-out 0.15s;
}

.menu-item span {
    color: #eee;
    transition: ease-in-out 0.15s;
}

.menu-item span:hover {
    color: #fff;
    text-shadow: 0 0 4px #fff;
    border-bottom: none;
    transition: ease-in-out 0.15s;
}

And also question #2 → Is there a way to fix that? I sent a link and password via chat.

[mariusjopen]

Dear @edgrbnz
if the menu point WORK would be a category it would not be a problem.

Try this instead:

.type-project .menu-item-302 span {
    color: yellow !important;
}

Best!

Marius

[edgrbnz]

Thanks Marius!

Will try the CSS later on.

Confused about this one:
How can I make a category a page and use a thumbnail grid or similar there?

[edgrbnz]

Oh,…
I wasn’t expecting to find another gridder inside the categories… that problem is solved now! Thank you for the hint @mariusjopen!!

Now I'm just fiddeling with the css to get the underline / border-bottom to stay when a currently active menu point gets hovered. Just cannot get it to work.
Let’s say the currently active page is work or any project in that category. So work will be underlined (because it’s active). As soon as it gets hovered the underline disappears although I want it to stay.

I hope that makes any sense—but I think you can see what I'm trying to describe with the link and pass I sent you.
This is the code I tryed to address this behaviour with:

.menu-item span {
    color: #eee;
    transition: ease-in-out 0.12s;
}

.menu-item span:hover {
    color: #fff;
    text-shadow: 0 0 4px #fff;
    border-bottom: none;
    transition: ease-in-out 0.12s;
}

.current-menu-item span:hover {
    color: #fff;
    text-shadow: 0 0 4px #fff;
    transition: ease-in-out 0.12s;
}

I think I’m just targeting the wrong class with the .current-menu-item. Any help is very much appreciated.

[edgrbnz]

Still need help with this.
Is there a class to target the active hovered item?

Any help is very much appreciated.

[mariusjopen]

Dear @edgrbnz

does this solve the issue?

.menu-item span:hover {
    border-bottom: 2px solid brown !important;
}

.current-menu-item span {
    border-bottom: 2px solid brown !important;
}

.current-menu-item span:hover {
    border-bottom: 2px solid brown !important;
}

Or did I not understand you right?

Best!

Marius

[edgrbnz]

I think the good ol’ !important; solved it!
Just for reference the code I am using right now:

/*custom link styles*/

.text a{
    color: #eee;
    transition: ease-in-out 0.12s;
}

.text a:hover{
    color: #fff;
    text-shadow: 0 0 4px #fff;
    border-bottom: none;
    transition: ease-in-out 0.12s;
}

.caption a{
    color: #eee;
    transition: ease-in-out 0.12s;
}

.caption a:hover{
    color: #fff;
    text-shadow: 0 0 4px #fff;
    border-bottom: none;
    transition: ease-in-out 0.12s;
}

.menu-item span {
    color: #eee;
    transition: ease-in-out 0.12s;
}

.menu-item span:hover {
    color: #fff;
    text-shadow: 0 0 4px #fff;
    border-bottom: none;
    transition: ease-in-out 0.12s;
}

.current-menu-item span {
    color: #eee;
    border-bottom: 1.2px solid #eee !important;
    transition: ease-in-out 0.12s;
}

.current-menu-item span:hover {
    color: #fff;
    text-shadow: 0 0 4px #fff;
    border-bottom: 1.2px solid #fff !important;
    transition: ease-in-out 0.12s;
}

Thank you @mariusjopen !

[mariusjopen]

Dear @edgrbnz
you are very welcome!

Best!

Marius