Search function magnifying glass still visible in navigation main menu

Dear Tom,

I have two little scripts from you in a site, to get rid of the search function and magnifying glass in the main navigation.

wordpress-version: 4.9.9, Page Sample "Tasty" (Main Navigation)

It´s OK for the main-navigation itself.
But if I have scrolled within the site and scrolled a little back, the magnification glass is to bee seen again, in the hanging main-navigation.
What´s wrong? Can you help me?

1. Custom CSS:

#site-navigation .search-item {
display: none;
}
______________

2. in wp-head:

<script>
jQuery( document ).ready( function( $ ) {
$( document ).on( 'click', '.main-nav li > a:first-child', function( e ) {
var mobile = $( '.menu-toggle' );
if ( mobile.is( ':visible' ) ) {
$( '.menu-toggle').closest( '.main-navigation' ).removeClass( 'toggled' );
$( '.menu-toggle').closest( '.main-navigation' ).attr( 'aria-expanded', $( '.menu-toggle').closest( '.main-navigation' ).attr( 'aria-expanded' ) === 'true' ? 'false' : 'true' );
$( '.menu-toggle').removeClass( 'toggled' );
$( '.menu-toggle').children( 'i' ).addClass( 'fa-bars' ).removeClass( 'fa-close' );
$( '.menu-toggle').attr( 'aria-expanded', $( this ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
}
});
});
</script>
______
Kind regards Hermann