Hello Dear Community,
I would like to visually highlight the contact button
from my menu bar so that it becomes a call-to-action button.!
The background should be white,
the corners should be rounded (25px)
and the font should be black.
I tried it with this code
//custom-customization for contact button
.ed-menu ul li:last-child a {
background: #fff;
color: #2929; !important
border-radius: 25px;
}
but I get this error message
What can I do?
i think this panel using SCSS not CSS that’s why you got error.
Hi! There is a syntax error (as said in the error message). The important is written after the ;
Here is the correct snippet:
//custom-customization for contact button
.ed-menu ul li:last-child a {
background: #fff;
color: #2929 !important;
border-radius: 25px;
}
Hope this helps!
Hey Lucian! Many thanks first of all for your kind help. This has worked very well. Thanks for your time. 
I’m just so free and ask another question here.
Around the menu items a box appears when hovering over it. I don’t want this to happen with the contact button. instead it should turn red and the font should turn white when I hover over it.
The other menu items should keep the box
Hi! I guess it can be done, but there are multiple styling options for the menus.
Here is the complete CSS for this, I don’t know if it will work with your menu (depends on the styling).
//custom-customization for contact button
//normal colors
.ed-menu ul li:last-child a {
background: #fff;
color: #2929 !important;
border-radius: 25px;
border: none !important;
}
//hover colors
.ed-menu ul li:last-child a:hover {
background: red;
color: #fff !important;
}
//hiding sitejet hover effects
.ed-menu ul li:last-child:hover a{
&::before{
display: none !important;
}
&::after{
display: none !important;
}
}
P.S. Another approach for this contact button at the end of the menu is to simply add a button
Hope this helps!
