menupoint active custom css

[antonia_viola]

I would like to change the appearance of certain menu points when activated: When I click on "Workshops" I would like it to be blurred. Same with "Info". I already managed to blur them with hover but how can it stay like that?

and is there an option to always jumpt to the beginning of the cache when click on it? Bc my site title is linked to the same page as the "info" menu point. It would be cool even though you are on the site it jumps back to top when you click on the menu point/ site title.

website: boothsix.eu

Thank you so much in advance!!!
Best XX,
Antonia

[alasdair17]

@antonia_viola hey, try these for the active blur effect:

.menu-item:active {
filter: blur(5px);
}

or

nav.laynav.primary li:active{
filter: blur(5px);
}

hope that helps!

[Alex F]

@antonia_viola said in menupoint active custom css:

I already managed to blur them with hover but how can it stay like that?

Hi Antonia, how do you managed that? seems cool on your site. also a nice page :)

xx
alex

[antonia_viola]

@Alex-F thank you!
it was super easy. Just use the class you assigned and put it in custom css:

h4 {
color: #ffffff;
-webkit-filter: blur(0px); /* Safari /
filter: blur(0px);
   transition: ease-in-out 0.7s;
}
h4:hover {
color: #ffffff;
-webkit-filter: blur(8px); / Safari */
filter: blur(5px);
   transition: ease-in-out 0.7s;
}

[antonia_viola]

@alasdair17 It didn't work unfortunately. Is there another way to do it?

[alasdair17]

@antonia_viola hmm, if you've already added css for the nav for hover effect, if you just duplicate that code but replace, ':hover' with, ':active' that should work. I tried it on chrome inspector on your site and it worked.