- This topic has 15 replies, 2 voices, and was last updated 7 years, 2 months ago by
.
Hi,
I would like to have my contact button displayed as per screenshot. How may I achieve it?
Hi @mjejun,
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 teamHi,
Thank you for your reply.
I haven’t tried anything yet on my website. But, I would love to know how I may achieve it?
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
#menu-item-8845 a { border: 2px solid #3377e0; padding: 0 10px; margin-top: 30px; }Hi,
Thank you for the solution. However, there is a problem with the menu bar. Please refer to the attached file.
Please try changing above shared CSS code as following.
#page-container #menu-item-8845 a { border: 2px solid #3377e0; padding: 0 10px !important; margin-top: 30px; }Hello,
Thank you for getting back to me. I’ve tried the given solution, but the problem still persists.
Please advise.
Thank you.
I don’t see the CSS solution used on your shared site so please use it so that I can troubleshoot the issue.
Hi,
Okay, noted. Please do check.
Thank you.
Still I don’t see it on your site.
Where have you added it?
Also please clear the WP Fastest Cache that you are using on your site.
Hi,
Can you please check again? It is located at the menu bar.
Thank You.
Yes I checked it and it is displaying fine for me as shown in the attached screenshot.
Which browser are you using?
Please test it clearing your browser cache or using a different browser.
Hi,
The problem occured when the user os scrolling down the page. Otherwise, it works fine in desktop view.
Solution for this topic
You can resolve this by changing above shared CSS code as following.
#page-container #menu-item-8845 a { border: 2px solid #3377e0; padding: 0 10px !important; margin-top: 30px; transition: 0.3s margin ease-in-out; } .sh-sticky-header-active:not(.sh-header-4):not(.sh-header-5):not(.sh-header-6) .sh-nav > li.menu-item#menu-item-8845 > a{ margin-top: 15px !important; }Hello,
Thank you so much for the help! The problem has been solved.
Thank you again.
You are most welcome here 🙂
