In my OceanWP WordPress theme, I customized the top-bar menu by adding a button labeled "Post a Job" using CSS.
Screenshot Link
I have two top-bar menus - one for logged-in users and another for logged-out users.
The "post a job" button has a 2px purple border with a purple background color (#43455C) and white text. When hovered over, I wanted the background to change to the top bar's color (#5cd895) and the text to change to purple (#43455C), so I used this code:
/* Post a Job Button on logged-in top bar menu */
body #menu-item-840 a{
color:#fff;
}
#menu-item-840 a{
font-weight: 600;
border: 2px solid #43455C;
background-color: #43455C;
border-radius: 5px;
padding: 2px 20px
}
#menu-item-1272 a:hover {
color: #43455C;
background-color: #5cd895;
}
/* Post a Job Button on logged-out top bar menu */
body #menu-item-1272 a{
color:#fff;
}
#menu-item-1272 a{
font-weight: 600;
border: 2px solid #43455C;
background-color: #43455C;
border-radius: 5px;
padding: 2px 20px
}
#menu-item-1272 a:hover {
color: #000;
background-color: #fff;
}
However, when a user is logged in and hovers over the "post a job" button, the text only changes to default black color without the background changing:
Screenshot Link
Similarly, when a user is logged out and hovers over the button, the background turns white and the text becomes black by default: Screenshot Link
Despite multiple CSS adjustments, the button still defaults to these colors during hover. Can anyone provide insight on what might be wrong with the CSS code?