Integrity: Add a button to the header menu

[andynetzel]

I’m trying to create a button in my header. I used the following CSS:

@media (min-width: 980px) {
#menu-item-25 a {
background-color: #af251b;
color: #ffffff !important;
border: 1px solid #fff;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
margin-top: 24px;
max-height: 34px;
border-radius: 2px;
box-shadow: none !important;
}
}

@media (min-width: 980px) {
#menu-item-25:hover a {
background-color: #d32d21;
color: #ffffff !important;
border: 1px solid #fff;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
margin-top: 24px;
max-height: 34px;
border-radius: 2px;
box-shadow: none !important;
}
}

It SORT OF had the effect intended. But with a few issues.

All the menu links acted as if they were being hovered over.

The Donate button was up higher than the rest of the menu items.

I attached an image:

You can see the site without the CSS here: https://genevalevy.bluehorsecreative.com/

(Obviously early in development.)

BONUS PROBLEM: Despite removing all CSS, the menu now acts as if everything is being hovered over at all times.

Any help you can provide would be great. That includes taking a different approach than CSS to reach the same effect.

[friech]

Hi There,

Thank you for writing in, please update your custom CSS to this:

@media (min-width: 980px) {
		#menu-item-25 a {padding-top: 32px;}
		#menu-item-25 a span {
		background-color: #af251b;
		color: #ffffff !important;
		border: 1px solid #fff;
		padding: 10px 20px;
		border-radius: 2px;
		box-shadow: none !important;
	}
	#menu-item-25:hover a span {
		background-color: #d32d21;
	}
}

Regarding the “bonus problem”, I don’t see that issue on my end (https://prnt.sc/hms44o) but I have an idea why is that happening. Please read my reply here.

Hope it helps,
Cheers!