How do I eliminate slight shadow on bottom edge of transparent header?

[444media]

I have made the header on my site transparent and have the Slider Rev slide on home page showing behind the header using custom CSS (as described in this forum post: https://theme.co/apex/forum/t/how-to-get-slider-behind-transparent-navbar-on-all-other-pages-apart-from-home-page/36589).

I would just like to get rid of the slight shadow that appears at the bottom edge of the header. Is that possible?

The site is cheaperwaterbills.com

Thanks!

Chris

[rubin]

Hey Chris,

I’ve checked your site and there is no shadow CSS applied to your header. Please provide us with a screenshot and the browser you’re using to view the page so we can replicate this. All the best!

[444media]

Hi…thanks for getting back to me. Meant to attach screenshot…one attached now. Blue arrows pointing at the issue in question. The site is cheaperwaterbills.com and current browser I’m using is Chrome.

Thanks!

[nabeel]

Hey @444media,

Thank you for the screenshot. To remove the box shadow from the header, please add the following code in the Theme Options > CSS:

.x-navbar {
    box-shadow: none !important;
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[444media]

Worked perfectly! Thanks so much! And thank you for the reference sites too!

[lely]

You’re always welcome!