Element issues on my translated page

hello,

i’m having some element issues on the Arabic side of my site again, first of all here is the codes you gave me so far to fix most issues:

.rtl .post-title, .rtl .slide-entry-title {
    letter-spacing: 0.01em!important;
}
ul.avia_wpml_language_switch_extra {
display:none !important;
}
.responsive #top .avia-team-member .team-social {
    max-width: 300px;  
    margin: 0 auto;
}
@media only screen and (max-width: 767px) {
.responsive.html_mobile_menu_tablet.html_logo_right #advanced_menu_toggle {
    left: 5px !important;
}
}
.iconbox_left .iconbox_icon {
    left: 5px;
}
@media only screen and (max-width: 767px) {
	.responsive #header_meta .social_bookmarks li {
	    border: 0 !important;
	}

    #header_meta .container{
        text-align: center;
    }

    #header_meta .container > * {
        display: inline-block;
        width: auto !important;
        padding: 0;
    }

    #header_meta .phone-info.with_nav {
        position: absolute;
        right: 0;
        top: 5px;
    }

    #header_meta .responsive #header .social_bookmarks {
        position: absolute;
        left: 0;
    }
.sub_menu {
    position: absolute !important;
    left: 0;
    right :0;
    top: 0px;
    margin: 0 auto;
}
}
.rtl #header .social_bookmarks li:last-child {
    border-right: 1px solid #e2e2e2!important;
}
.rtl .av_secondary_left .sub_menu>ul>li:last-child, .rtl .av_secondary_left .sub_menu>div>ul>li:last-child {
    padding-right: 10px;
}
.rtl .sub_menu {
    padding-right: 0;
    padding-left: 10px;
}
.rtl #header .social_bookmarks li:first-child {
    border-right: none!important;
}
.avia-tooltip.avia-tt {
    width: 200px;
}
.av_header_transparency a .avia-menu-text{
    color:#fff!important;
}
.av_header_transparency .phone-info a {
    color: #ffffff;
}
@media only screen and (max-width: 767px) {
#header_meta .phone-info a {
    color: black;
}}
#top #wrap_all .av_header_transparency .sub_menu > ul > li > a {
    color: #ffffff;
}
#top.rtl #header .social_bookmarks li:last-child {
    border-color: rgba(255,255,255,0.25) !important;
}

#top.rtl #header.header-scrolled .social_bookmarks li:last-child {
    border-right: 1px solid #e1e1e1 !important;
}
@media only screen and (min-width: 767px) {
  a#advanced_menu_toggle {
    color: white!important;
  }

  .header-scrolled a#advanced_menu_toggle {
    color: #000 !important;
  }
}
@media only screen and (max-width:960px) {
	#header_main .container.av-logo-container {
	  padding: 9;
	  max-width: 100%;
	}

	#advanced_menu_toggle {
	  left: 10px !important;
	}
}

1) first of look at this picture of the home page, this is when it is first loaded (no scroll), its perfect, no issues
https://www.dropbox.com/s/se5uhawt671qxcv/Home%20page%20when%20first%20loaded.png?dl=0
2) look at the home page when i scroll down a little and the header turns to sticky, it perfect as well
https://www.dropbox.com/s/wzznf2908ehy62i/Home%20page%20after%20scroll.png?dl=0
3) heres a look at another page, you can see the lines are missing on the social media
https://www.dropbox.com/s/cj4e9n3rekgzh5n/Page%20when%20first%20loaded.png?dl=0
4) after i scroll down it works normally
https://www.dropbox.com/s/yuqcibnon5lmfo2/Page%20after%20scroll.png?dl=0
5) i don’t know if this is part of the issue, but look at the share icons under the comments and you will see there is a line missing there as well
https://www.dropbox.com/s/6n17a5ir8pqglys/Share%20icons%20on%20blog%20page.png?dl=0

The issue with these lines is non stop, if i set lines between the menus in the main header there will be lines missing and such. please let me know what to remove and add in the code above to fix all these issues.

I also hope you guys can fix these issues as i love this theme and i’m getting many jobs coming up in Arabic, and i don’t want to try another theme for those jobs, but i will have to if i cant fix these issues.