Add Border and Background color to Header menu button

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    RESOLVED Posts

  • niftitalks
    Participant

    Hello Again!

    I would like to add a border and background color to my DONATE button in the header. How do I accomplish this?

     

     

    Shufflehound Support
    Moderator

    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

    niftitalks
    Participant

    http://www.veryloudyouth.org

    Button is on top right corner.

    Shufflehound Support
    Moderator

    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

    niftitalks
    Participant

    Hello! Thanks a ton.

     

    Is there a way to round the edges? Like the buttons on the theme?

    Shufflehound Support
    Moderator

    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;
}

    niftitalks
    Participant

    Hello again!

     

    Thanks much for your help. Is it possible to make this button look more 3-Dimensional?

     

    Kem

    Shufflehound Support
    Moderator

    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

    niftitalks
    Participant

    Ok thank you.

    Shufflehound Support
    Moderator

    You are always welcome here 🙂

    ndmedina8
    Participant

    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?

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)