VitaminB Posted April 19 Posted April 19 Hi, I have 2 questions I'm hoping you can help me solve in regards to the top menu bar: Q. Part 1: I want the drop down menu to have a transparent background (no white container) Please see attached pic for reference. How do I make this happen? Q. Part 2: I also added this custom code to create a hover effect on links but I don't want it to apply to the main menu bar because it's too jittery. How do I remove it from the main menu bar but keep it on the other links/buttons (including the 'contact me' button in the menu bar? a { text-decoration: none !important; transition: 0.3s : important; &:hover { opacity: 1 !important; transition: 0.3s !important; margin-top: -8px !important; } Thanks!
tuanphan Posted April 21 Posted April 21 #1. Follow #3 code #2. What is site url? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
VitaminB Posted April 23 Author Posted April 23 @tuanphan legend thank you for Q1! 🙏 For Q2 my site url is: https://www.escreative.net Thanks!
tuanphan Posted April 25 Posted April 25 #2. Change your code to this article, footer.sections { a { text-decoration: none !important; transition: 0.3s : important; &:hover { opacity: 1 !important; transition: 0.3s !important; margin-top: -8px !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
VitaminB Posted April 26 Author Posted April 26 (edited) Hi @tuanphan thanks so much! For some reason the hover effect is now not working on the 'view animation' button on this section: https://www.escreative.net/red-cross-lifeblood-animation#Animation It also stopped working on the orange 'contact me' button in the main menu bar? password is: escuxlocked Edited April 26 by VitaminB forgot password
tuanphan Posted April 27 Posted April 27 On 4/26/2024 at 10:27 AM, VitaminB said: Hi @tuanphan thanks so much! For some reason the hover effect is now not working on the 'view animation' button on this section: https://www.escreative.net/red-cross-lifeblood-animation#Animation It also stopped working on the orange 'contact me' button in the main menu bar? password is: escuxlocked With header button, add this code under a.btn { text-decoration: none !important; transition: 0.3s : important; &:hover { opacity: 1 !important; transition: 0.3s !important; margin-top: -8px !important; } With View animation button, I don't see this button, can you take a screenshot? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
VitaminB Posted April 28 Author Posted April 28 Thanks @tuanphan that worked perfectly for the header button! Here's a screenshot for the 'View animation' one:
tuanphan Posted April 30 Posted April 30 On 4/28/2024 at 6:31 PM, VitaminB said: Thanks @tuanphan that worked perfectly for the header button! Here's a screenshot for the 'View animation' one: With View Animation, use this code a[href="#Animation"].sqs-block-button-element { text-decoration: none !important; transition: 0.3s : important; &:hover { opacity: 1 !important; transition: 0.3s !important; margin-top: -8px !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
VitaminB Posted May 6 Author Posted May 6 Thanks @tuanphan , unfortunately, that's not working for some reason?
Solution tuanphan Posted May 7 Solution Posted May 7 On 5/6/2024 at 9:40 AM, VitaminB said: Thanks @tuanphan , unfortunately, that's not working for some reason? Use this new code a[href="#Animation"].sqs-block-button-element { text-decoration: none !important; transition: 0.3s !important; position: relative; } a[href="#Animation"].sqs-block-button-element:hover { opacity: 1 !important; transition: 0.3s !important; transform: translatey(-8px) !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
VitaminB Posted May 8 Author Posted May 8 Amazing, that worked perfectly! Thanks so much @tuanphan !!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment