Archived topic
Color of the little line above header menu
3 replies · Started by Barbara on December 12, 2020
Hi,
Can you please tell me how do I change the color of the little purple horizontal line above the current main menu item? I can't find the option anywhere...
This is the website:
https://freefromsocialanxiety.com/
Thank you,
Barbara
Hi there,
Go to the Additional CSS field in the customizer and modify the color property of these two blocks:
https://www.screencast.com/t/KiVzzlali
Thanks Leo. I decided to delete that whole section since I don't really want the horizontal line. It seems ok for now - only the horizontal line disappeared, but can you please confirm that what I deleted is ok and won't have other consequences than the line being removed?
This is the part I removed from CSS:
/* category menu hover lines */
.main-navigation .menu > .menu-item > a::after {
content: "";
position: absolute;
right: 50;
left: 50%;
color: #ccabc1;
top: 8px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 2px;
background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .menu-item > a:focus::after,
.main-navigation .menu > .current-menu-item > a::after{
width: 40px;
color: #f1c40f;
}
Thank you!
No problem :)
