Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

SVG Logo hover

Jakob May 04, 2017 11:27AM CEST

Hey Guys,

I would like to have the same hover color like the default links on my website.

I tried to fix it with that:
#navbar .logo a:hover { opacity: 1 !important; }

But its not not the same color and speed.
http://jakobwintgen.de/work/e-on-energized-blog/

What do you think?


Best,
Jakob

Up 0 rated Down
Amanda May 04, 2017 03:58PM CEST Semplicelabs Agent

Hi Jakob,

All of the links are showing black → fade to gray. Is this right?

Best,
Amanda

Up 0 rated Down
Jakob May 04, 2017 08:16PM CEST
Yes, all of the links are showing black fade to grey. I would like to have the perfect same effect on the svg logo.
Is that possible?

Thanks so much,
Jakob
Up 0 rated Down
Amanda May 04, 2017 08:24PM CEST Semplicelabs Agent

Hey Jakob,

This is what I am seeing when I hover over your logo:

https://cl.ly/1b3S0415340Q

Are you experiencing something different? If so, which browser are you using?

Thanks,
Amanda

Up 0 rated Down
Jakob May 04, 2017 08:28PM CEST
Wow, nice Video :)
I am using Chrome. Yes, its fading ... and to grey. But its to a different grey. My link color is: #e2e2e2
Up 0 rated Down
Amanda May 04, 2017 10:44PM CEST Semplicelabs Agent

Hi Jakob,

I understand now. :)

Try this CSS:

#navbar .logo a:hover {
    opacity: 1 !important;
}
#navbar .logo a:hover svg {
    fill: #e2e2e2 !important;
}

If you need help on where to enter the CSS, this guide explains: http://help.semplicelabs.com/customer/portal/articles/2762667-guide-adding-custom-css-and-javascript-to-semplice

Best,
Amanda

Up 0 rated Down
Jakob May 04, 2017 10:53PM CEST
Hey Amanda,

thanks. It works, but the speed of the fade seems different. Don´t you think so?
Is there a way to use the text logo instead of the svg logo? Could this work better with the mouse over?
As far as I know it is not possible to change the height of the nav bar. Right?


Thanks,
Jakob
Up 0 rated Down
Amanda May 05, 2017 05:20AM CEST Semplicelabs Agent

Hey Jakob,

The code for the animation is the same, so I’m not sure why it seems different.

You can use text as the logo, if you’re using the font that you want the logo to be on the page.

You can change the height of the navbar with some CSS:

#navbar, #navbar-bg, .controls a, .controls a span {
    height: 107px !important;
}

Best,
Amanda

Up 0 rated Down
Ricardo Nov 08, 2017 10:03PM CET
Hi Amanda,

I'm trying to do the same thing on my page (lacursive.com). I tried copying / pasting your code from above in my global CSS field with my own colour, but it doesn't work :

#navbar .logo a:hover {
opacity: 1 !important;
}
#navbar .logo a:hover svg {
fill: #f25f5c !important;
}

Can you please assist?

Thanks!
Up 0 rated Down
Jon Nov 09, 2017 03:22AM CET Semplicelabs Agent

Hey, Ricardo!

What version of Semplice are you using? 3 or 4?

And would you mind explaining the exact effect you’re trying to get on your logo? Might be able to give a few pointers.

— Jonathan

Up 0 rated Down
Ricardo Nov 10, 2017 03:56PM CET
Hi Jon,

I'm using Semplice 4. I've tried using several versions of this code that I've seen throughout the forum but it doesn't seem to work.

Let me know, thanks!
Up 0 rated Down
Jon Nov 10, 2017 05:40PM CET Semplicelabs Agent

Ricardo,

If you want to edit the SVG color you would do this in Semplice 4:

.logo svg {
fill: red !important;
}

.logo:hover svg {
fill: green !important;
}

If you are adding this in the Global CSS editor under Customize > Advanced it should work perfectly.

— Jonathan

Up 0 rated Down
Ricardo Nov 14, 2017 11:47PM CET
Hi Jon,

I copy pasted your code in the Global CSS editor under Customize > Advanced > Custom CSS and it doesn't work. The svg logo in my navbar remain white (lacursive.com).

If you'd like I can send you my login info to have a look?

Thanks,
Up 0 rated Down
Jon Nov 15, 2017 02:53AM CET Semplicelabs Agent

Hey Ricardo,

That would be great. You can send your info to help@semplice.com. :)

Jonathan

Post Your Public Answer

Your name (required)
Your email address (required)
Answer (required)
17c96688a1a336f6040dd1b6149c3fa8@semplicelabs.desk-mail.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete