I have some buttons in Elementor that are showing with the default Kalium hover styles. Can you guys give me a list of the hover classes (active, focus, hover, etc....) so I can turn them off on my elementor buttons.
I can place custom CSS for each element. Also, in a future update, please give us more control as to way we want hover links. Overall really love the Kalium theme, but not having flexibility with hover states is the one thing I hate.
Thanks for the reply. Unfortunately, when I apply it to the element it takes the text-decoration (underline) off the header and footer links as well on that particular page. You can see it here on this page.
This was a similar issue that I had in another recent support request. If I use the elementor (.elementor-20833 .elementor-element.elementor-element-91df4f2 .elementor-button) class that is specific to that button, I cannot apply the CSS code you gave me.
Is there another way to take off the underline (link) on the buttons?
That worked to get the text underline (hover) on my main menu and footer menu and off of the buttons. However, I have text links within the elementor row. Can we apply the css to just the buttons that I create?
You can see the buttons on these pages no longer have the underline (yay) but does not provide the underline for the other text links. I do want them on text links.
Then if you still have areas where you have underlined but it should not show please tell me those places so I can send you the CSS codes to remove them.
We are preparing some bg updates for the moment and when we finish them we will also check ways to improve Kalium underline so it would not interfere with other elements.
That worked, mostly. I have a text link in an elementor template (saved) called book-discovery-call. The code you gave me will take the underline off the button (yay), however, I also have a text link that it takes the underline off of as well. This is not a huge issue (right now) as that link placement was just temporary. However, it would be nice to have a fix for it once the development team addresses the whole hover state underline issue.
Even with clearing my cache and adding the CSS code, the hover underline still shows.
I figured it out. Even with the declarations on the other Elementor classes (background transparent & !important) , the wrapper class in the following code will still override it. Thankfully, the current color works ok, but would like to change it to match my theme branding.
If there is another way, please let me know. Otherwise, I will have to wait until the development team addresses the entire hover class issue.
Also, you will notice that the hover underline is a different line spacing. If you look at the top menu bar, you will see the line directly underneath the link, on the bottom (footer menu) it is the same. On the links on the Learn & Develop page it is different. There seems to be a difference in line height.
How can I make it match my top menu?
Really grateful that you took the time to help me figure this out. Looking forward to the theme updates.
The code works, however, now it messes up my main menu/sub-menus. You can see it on my staging site here. Everything else is exactly the way I want it. Is there is a way to separate the header/submenu from the rest?
If not, I will leave it as is (without the following code). It's a small aesthetic, but I can live with it.
Also, I just added this affiliate image (Cronometer) on my blog page sidebar and I am getting the hover underline on it as well. This site-footer link class just overpowers everything. I can't keep coming back to Kalium support every time an issue like this arises. It is not a good use of your time or mine.
I made the recommendation changes on the menu bar. That will work for now.
In the future if I had an image that is a link and I get the hover underline, how can I change it or disabled it? Same process that you did on #2 below?
Thank you for all your help. I really do appreciate it.
Hello,
I have some buttons in Elementor that are showing with the default Kalium hover styles. Can you guys give me a list of the hover classes (active, focus, hover, etc....) so I can turn them off on my elementor buttons.
I can place custom CSS for each element. Also, in a future update, please give us more control as to way we want hover links. Overall really love the Kalium theme, but not having flexibility with hover states is the one thing I hate.
Thanks,
Manning
Hi Manning,
Thanks for your input.
To add the animated underline from Kalium theme we use this CSS code:
.site-footer a:after, .wrapper a:after { background-color: #00b19e; }You can remove this animation by adding this CSS code to your Custom CSS area:
.site-footer a:after, .wrapper a:after { background-color: transparent !important; }Have a nice day!
Hi Ylli,
Thanks for the reply. Unfortunately, when I apply it to the element it takes the text-decoration (underline) off the header and footer links as well on that particular page. You can see it here on this page.
https://www.manningstinson.com/coaching-programs/nutrition-coaching/
This was a similar issue that I had in another recent support request. If I use the elementor (.elementor-20833 .elementor-element.elementor-element-91df4f2 .elementor-button) class that is specific to that button, I cannot apply the CSS code you gave me.
Is there another way to take off the underline (link) on the buttons?
Again, appreciate your help.
Thanks,
Manning
Hi Manning,
Please add the code below to your Custom CSS area:
.elementor-row a:after { background-color: transparent; }Thanks!
HI Ylli,
That worked to get the text underline (hover) on my main menu and footer menu and off of the buttons. However, I have text links within the elementor row. Can we apply the css to just the buttons that I create?
You can see the buttons on these pages no longer have the underline (yay) but does not provide the underline for the other text links. I do want them on text links.
https://www.manningstinson.com/coaching-programs/nutrition-coaching/
https://www.manningstinson.com/coaching-programs/life-coaching/
https://www.manningstinson.com/coaching-programs/fitness-coaching/
https://www.manningstinson.com/
Thanks,
Manning
Hi Manning,
Hmm, I need to check this problem more deeply so please share your WordPress credentials.
To include your credentials click the Insert Credentials button in the editor toolbar (see how) so your reply will be private.
Thanks!
Hi Manning,
Please remove the CSS that I gave you earlier because I can't find it.
.elementor-row a:after { background-color: transparent; }and add those one:
.elementor-button-wrapper a:after { background-color: transparent !important; } .elementor-image a:after { background-color: transparent !important; }Then if you still have areas where you have underlined but it should not show please tell me those places so I can send you the CSS codes to remove them.
We are preparing some bg updates for the moment and when we finish them we will also check ways to improve Kalium underline so it would not interfere with other elements.
Thanks!
Hi Ylli,
That worked, mostly. I have a text link in an elementor template (saved) called book-discovery-call. The code you gave me will take the underline off the button (yay), however, I also have a text link that it takes the underline off of as well. This is not a huge issue (right now) as that link placement was just temporary. However, it would be nice to have a fix for it once the development team addresses the whole hover state underline issue.
(Look in fundamentals)
https://www.manningstinson.com/coaching-programs/nutrition-coaching/
One additional question. For the items that do have the underline on hover, what CSS do I need to use to change the hover color?
Here is another place that the hover underline is happening on the images.
https://www.manningstinson.com/learn-develop/
I really appreciate your help. I really like the Kalium theme so thanks for figuring this out for me.
-Manning
Hi Manning,
To change the underline color you can add this CSS code:
.wrapper a:after { background-color: yellow !important; }To remove the underline from those Elementor images you can add this CSS code:
a.elementor-post__thumbnail__link:after { background-color: transparent !important; }Have a nice week!
Hi Ylli,
Even with clearing my cache and adding the CSS code, the hover underline still shows.
I figured it out. Even with the declarations on the other Elementor classes (background transparent & !important) , the wrapper class in the following code will still override it. Thankfully, the current color works ok, but would like to change it to match my theme branding.
If there is another way, please let me know. Otherwise, I will have to wait until the development team addresses the entire hover class issue.
.wrapper a:after { background-color: yellow !important; }Also, you will notice that the hover underline is a different line spacing. If you look at the top menu bar, you will see the line directly underneath the link, on the bottom (footer menu) it is the same. On the links on the Learn & Develop page it is different. There seems to be a difference in line height.
How can I make it match my top menu?
Really grateful that you took the time to help me figure this out. Looking forward to the theme updates.
Have a great day!
-Manning
Hi Manning,
— Ok then, just change the yellow with your preferred color.
— Please add the code below to your Custom CSS area:
.site-footer a:after, .wrapper a:after { bottom: 2px; }if the code doesn't work, add the !important rule. See example:
.site-footer a:after, .wrapper a:after { bottom: 2px !important; }Have a nice day!
Hi Ylli,
The code works, however, now it messes up my main menu/sub-menus. You can see it on my staging site here. Everything else is exactly the way I want it. Is there is a way to separate the header/submenu from the rest?
If not, I will leave it as is (without the following code). It's a small aesthetic, but I can live with it.
https://www.staging2.manningstinson.com/blog/
.site-footer a:after, .wrapper a:after { bottom: 2px !important; }Also, I just added this affiliate image (Cronometer) on my blog page sidebar and I am getting the hover underline on it as well. This site-footer link class just overpowers everything. I can't keep coming back to Kalium support every time an issue like this arises. It is not a good use of your time or mine.
https://www.manningstinson.com/blog/
Thanks for all your help.
-Manning
Hi Manning,
1. One thing that you can do is to make the underline of the menu the same as in the article and remove the previous CSS code.
So add this:
.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu>li>a { padding-bottom: 4px; }and remove this:
.site-footer a:after, .wrapper a:after { bottom: 2px !important; }2. Problem resolved, see video: https://d.pr/v/9WgzgR
Have a nice day!
Hi Ylli,
I made the recommendation changes on the menu bar. That will work for now.
In the future if I had an image that is a link and I get the hover underline, how can I change it or disabled it? Same process that you did on #2 below?
Thank you for all your help. I really do appreciate it.
-Manning
Hi Manning,
Yes, if that is an image that you add through HTML codes you need to do add the same class that I added.
Have a nice day!
Hi Ylli,
I will do that. I appreciate the help.
Thanks,
Manning