Mobile menu created with Bootstrap 3

Question

// Change positioning of mobile menu icon based on screen size.
$(document).ready(function(){
    if($(window).width()<768)
    {
        $('button#mobile-nav').css('float','left');
    }
    $(window).on('resize',function(){
        if($(window).width()<768)
        {
            console.log('here');
              $('button#mobile-nav').css('float','left');
        }
    });
});

<header class="nav">
  <nav class="navbar navbar-default navbar-fixed-top navbar-color" role="navigation">
  <div class="container-fluid">
   <div class="navbar-header mobile-nav-header">
    <button id="mobile-nav" type="button" class="navbar-toggle" role="button" aria-label="Toggle Navigation" data-toggle="collapse" data-target="#navbar">
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>  
    </button>
                <div class="navbar-right" id="facebook-mobile">  
     <a title="Visit on Facebook" target="_blank" href="https://www.facebook.com/?hc_ref=SEARCH">
                    <i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
    </div>
   </div> <!-- navbar-header mobile-nav-header -->

   <div class="collapse navbar-collapse text-uppercase" id="navbar">
    <ul class="nav navbar-nav">
     <li><a title="Welcome" class="glyphicon glyphicon-home" href="index.php"><span class="hidden">Home</span></a></li>
     <li><a title="About" target="_self" href="#about">About</a></li>
     <li><a title="Service" target="_self" href="#services">Services</a></li>
     <li><a title="Address" target="_self" href="#location">Location</a></li>
     <li><a title="Gallery" target="_self" href="gallery.php">Gallery</a></li>
     <li><a title="Contact" target="_self" href="contact.php">Contact</a></li>
               </ul>
             
    <div class="navbar-right" id="facebook-desktop">  
     <a title="Visit on Facebook" target="_blank" href="https://www.facebook.com/?hc_ref=SEARCH">
                    <i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
    </div>

   </div> <!-- #navbar -->
   </div> <!-- container-fluid -->
  </nav>
</header>

I have a mobile menu created with Bootstrap 3 that automatically aligns to the right side of screen. I wrote some JavaScript code to make mobile menu icon appear on the left side of screen because I have a Facebook button on the right side of screen. Everything works with my code; however, there is one area I'm trying to improve. On my gallery page I have 500+ images. The problem is my mobile menu stays on right side and pushes the Facebook button slightly over to the left until the page fully loads. After the page fully loads everything appears correctly. How can I correct this so the mobile menu always appears on the left side immediately? Thanks!

I have attached a couple images to reference what I'm trying to explain. Tried uploading a video, but videos are not allow on this site.

On the gallery page only, when the page first loads, it initially looks like the attached image named "before-page-loads.png". Once the page is loaded it displays correctly and looks like the image in "after-page-loads.png".

before-page-loads.png after-page-loads.png

I have also provided my JavaScript and HTML code.

Thanks for your help!