Mobile header border – good riddance!

Hi Chaps,

I’ve got a transparent header set for all my pages when scrolled to the top. As the header shrinks as the page is scrolled, I have set a black background with 0.8 opacity to help display the menu better. In mobile view, I’m trying to keep the header transparent from top to bottom. I’ve semi-achieved this from help with the forums. The code I have so far is:

 /* transparent header on mobile (scrolled at top)
-------------------------------- */
@media only screen and (max-width: 767px) { 
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
  background: transparent!important;
  position: absolute!important;
}}

 /* transparent header on mobile (scrolled below top)
-------------------------------- */
@media only screen and (max-width: 768px) {
.header_bg { display: none !important; }} 

 /* no logo on mobile
-------------------------------- */
@media only screen and (max-width: 480px) {
.responsive .logo {
opacity: 0!important
}}

 /* sticky mobile menu
-------------------------------- */
.responsive #top #wrap_all #header {
    position: fixed;
}

What I can not get rid of (tried pasting code from other threads) is a tiny thin black border at the bottom of the header when scrolled down after the header ‘shrinks’.

Thank you in advance,

James