Archived topic
what's wrong with this header button?
5 replies · Started by reallybasic on April 2, 2021
Hello,
I am trying to add a Call button to primary menu. I created class "cta-button" and assigned to the menu item but it does not turn red when hovered/clicked. what am I doing wrong?
Here is the link to my page
below is the css
/*call to action button*/
.cta-button {
background-color: 001F43;
border-radius: 8px;
border: 2px solid #fff;
}
.cta-button:visited {
background-color: 001F43;
border-radius: 8px;
border: 2px solid #fff;
margin-left: 150px;
}
.cta-button:hover {
background-color: #b30000;
border-radius: 8px;
border: 2px solid #fff;
}
.cta-button:active {
background-color: #b30000;
border-radius: 8px;
border: 2px solid #fff;
}Hi there,
your CSS needs to be more specific... see the example doc here:
https://docs.generatepress.com/article/adding-buttons-navigation/
Thanks for replying, what is wrong with my css?
Menu items already have styles applied to them using a CSS selector like this:
.main-navigation .main-nav ul li a
So your CSS selectors are not specific enough.
Also missing some # from background color.
And theres no need to repeat styles such as border and border-radius.
And you can combine CSS rules that have same properties....
Try this:
/* base styles for button */
.main-navigation .main-nav ul li.cta-button a,
.main-navigation .main-nav ul li.cta-button:visited a {
background-color: #001F43;
border-radius: 8px;
border: 2px solid #fff;
}
/* change color on hover */
.main-navigation .main-nav ul li.cta-button:hover a,
.main-navigation .main-nav ul li.cta-button:active a {
background-color: #b30000;
}Thank you David, that was specific.
You're welcome
