Making some CSS changes to awebsite?

I am needing to make some changes to this website for a client but can't figure out how to do them:

-I need to change the donate link in the navigation to a button that's distinguishable. At this point, I have added a class to the navigation item. The class has been named myButton and I have applied styling but nothing is happening.

-Also, the white background where the image is located need to be transparent; however, I can't make that happen.

  • Denitsa
    • WordPress Warrior

    Hello Julius,
    I hope you're doing great today and thank you for your question!

    Can you provide me with a link to the page you want to edit, as I am not able to give any advice without seeing the actual outline?

    Please also advise on the exact styling would you like the button to have.

    Looking forward to hearing back from you!

    All the best,
    Denitsa

  • Denitsa
    • WordPress Warrior

    Hello Julius,
    I hope you are having an amazing day!

    I can indeed see your HTML class myButton, but no CSS for it. How did you try to add that? You can try to add custom CSS in your child theme's style.css file or by using a plugin like https://wordpress.org/plugins/simple-custom-css/ for example.

    Just setting the display would look like so

    This is done by setting the following css:

    li#menu-item-692 {
        background-color: #f32837;
        -webkit-box-shadow: 1px 1px 3px #000000;
        -moz-box-shadow: 1px 1px 3px #000000;
        box-shadow: 1px 1px 3px #000000;
    }
    
    li#menu-item-703 {
    -webkit-border-radius: 4;
      -moz-border-radius: 4;
      border-radius: 4px;
      border: solid #009DDb 3px;
    }

    So, to set the desired behaviour for your buttons without getting that broken look would mean changing the overall view of your menu (main issue here is with the padding). Do you still want to proceed? Please advice on how to do so with regards to the menu display!

    Warm regards,
    Denitsa

  • Patrick
    • Support Monkey

    Hi there Julius

    I hope you had a great weekend!

    Are you comfortable with editing the CSS in your child-theme? I ask because I see you are using a child-theme of the Salient theme.

    If you are not comfortable with that, have you installed the plugin recommended above? https://wordpress.org/plugins/simple-custom-css/

    You can add the CSS provided above in either of the 2 ways, then we see the live results on your site and tweak as needed.

  • Nithin
    • Support Wizard

    Hi Julius,

    Hope you are doing good today. :slight_smile:

    I could see that you haven't add the CSS provided by Denitsa, since your menus have huge padding, the easiest would be to apply the following CSS, and then check whether it would fit your needs.

    #menu-item-692 {
        background-color: #f32837;
        box-shadow: 1px 1px 3px #000000;
    }
    
    #menu-item-703 {
    
      border-radius: 4px;
      border: solid #009DDb 3px;
    }
    
    #menu-item-692 > a {
    	padding-top: 35px !important;
    	padding-bottom: 8px !important;
    }
    
    #menu-item-703 > a {
    	padding-top: 35px !important;
    	padding-bottom: 5px !important;
    }
    
    #menu-item-703 {
    	margin-left: 5px;
    }

    The above CSS will style the menu items, with the same line height. Please test the above CSS, and then check whether it would fit to your needs, if not, please advise what all changes you want from the given CSS.

    However the use of !important declaration is not something which I would recommend, but in some cases's it's necessary to apply these rules to overwrite the existing styles. Would highly recommend that you make changes like this to a theme using a Child theme, so that it won't be overwritten when you update your theme.

    Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Denitsa
    • WordPress Warrior

    Hello there Julius,
    I hope you are having an amazing day!

    How exactly are you applying the CSS to your website - where are you putting the code?

    I can see the changes made by the CSS NIthin provided when I append those temporarily via Inspector in Chrome like so:

    Please advise on that! Looking forward to hearing back from you!

    Warm regards,
    Denitsa

  • Patrick
    • Support Monkey

    Hi there Julius

    I hope you're well today!

    You should really only add your custom CSS to one of those, as having multiple duplicate CSS declarations causes code bloat and can easily lead to conflicts.

    But it looks like you got things sorted; I see the changes just fine on your site now. :slight_smile:

    Can you please confirm? Thanks!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.