Need Some Help With CSS In HU 2.0.6
Peter Spiegelenburg
Hello, I want to show a line when hovering a menu-item. I have created this in html, which works fine.
<html>
<a class="line" href="#">Home</a>
</html>
<style>
.line {
display: inline;
position: relative;
overflow: hidden;
}
.line:after {
content: "";
position: absolute;
z-index: -1;
right: 0;
width: 0;
bottom: -5px;
background: #000;
height: 4px;
transition-property: width;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.line:hover:after, .line:focus:after, .line:active:after {
left: 0;
right: auto;
width: 100%;
}
</style>Now, I want to implement this in the Helix Ultimate template. I added a Link Class "link" in the menu item. I added the code from "Style" in the custom css file. But it doesn't work.
I know some things about CSS, but I am not a "Master" in CSS. Can someone show me what I am doing wrong?
Regards, Peter
Ariba
Accepted AnswerPlease add !important to display property
.line {
display: inline !important;
position: relative;
overflow: hidden;
}Peter Spiegelenburg
Accepted AnswerHello,
yes. It is a demo-site: http://wim.domeintest.eu/
If you want to have a login, please let me know.
Peter Spiegelenburg
Accepted AnswerHello Ariba ,
I was so close, but you just helped me with the last part. Yes! Working!
Thank you so much!
Regards, Peter
Ariba
Accepted AnswerYou are most welcome :)
Thank you for the kind appreciation, my pleasure!
Please do let me know if there are any other issues, I would be happy to help. If there are no other queries, kindly accept the most useful answer that helped you, in order to resolve and close the post.