LennyGraphics

You are a hero Samuel! Thanks tonnes it worked great ??

Yes finally figured it out!

.header-menu a{

}

Ok thanks for that link I learned quite a bit. After reading I changed the target to:

a{
}

because I realised it was in an <a> tag. So I changed it but now it seems to have change a few unwanted things on my page. If I inspect element I can see it’s an <a> tag how do I change the letter so it won’t change all the other things?

Thanks I’ll take a look now.

Yes I had a backup luckily, I’ve just fixed the site now.

alchymyth I am very new to CSS so I could not get it to work with the entire header so instead I just targeted the individual links.

Hi I’ve tried all suggestions and it still doesn’t work.

Here’s the site: https://lennybeadle.com

and it’s currently using this code:

.menu-item-19{
.menu-item-118{
.menu-item-16{
.menu-item-17{

	display: inline-block;
	position: relative;
	padding-bottom: 3px;

}
}
}
}

.menu-item-19:after {
.menu-item-118:after{
.menu-item-16:after{
.menu-item-17:after{

	content: '';
	display: block;
	margin: auto;
	height: 3px;
	width: 0px;
	background: transparent;
	transition: width .5s ease, background-color .5s ease;
}
}
}
}

.menu-item-19:hover:after {
.menu-item-118:hover:after{
.menu-item-16:hover:after{
.menu-item-17:hover:after{

	width: 100%;
	background: #fff;
}
}
}
}

Do you mean the Nav Menu at the top?

**UPDATE**

I managed to remove it by inspecting its element to find its ID/Class.