Home › Forums › Jevelin Theme › Add Border and Background color to Header menu button
Home › Forums › Jevelin Theme › Add Border and Background color to Header menu button
Hello Again!
I would like to add a border and background color to my DONATE button in the header. How do I accomplish this?
Hi @niftitalks,
I hope you are well today and thank you for your question.
Could you please share me your site URL where it’s displaying so that i can help you to achieve it?
Best regards,
Shufflehound team
Button is on top right corner.
You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
#page-container .sh-nav li.menu-item-type-custom a { background-color: #000; padding: 0 10px; color: #fff; margin: 30px 0; border: 1px solid #DF343C; } #page-container .sh-sticky-header-active:not(.sh-header-4):not(.sh-header-5):not(.sh-header-6) .sh-nav > li.menu-item-type-custom > a{ margin: 15px 0; }
You can change the color value in the above code to whatever you want to use by referring the following pages.
http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp
Hello! Thanks a ton.
Is there a way to round the edges? Like the buttons on the theme?
Solution for this topic
To make the button edges round, use below CSS code instead of shared above.
#page-container .sh-nav li.menu-item-type-custom a { background-color: #000; padding: 0 10px; color: #fff; margin: 30px 0; border: 1px solid #DF343C; border-radius: 20px; } #page-container .sh-sticky-header-active:not(.sh-header-4):not(.sh-header-5):not(.sh-header-6) .sh-nav > li.menu-item-type-custom > a{ margin: 15px 0; }
Hello again!
Thanks much for your help. Is it possible to make this button look more 3-Dimensional?
Kem
You are most welcome here 🙂
Is it possible to make this button look more 3-Dimensional?
You have to develop more custom code to achieve this.
Developing custom code for custom functionality is beyond the scope of support that we provide here. Please see https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
Ok thank you.
You are always welcome here 🙂
Hi,
I used this code to make a button on my navbar, but when you scroll to sticky header the margins are off and that nave link with the button around it is out of alignment with the rest of the links. How to I make sure the margins are correct on sticky nav?