0 

// 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>

我有一个使用 Bootstrap 3 创建的移动菜单，它会自动对齐到屏幕的右侧。我编写了一些 JavaScript 代码来使移动菜单图标出现在屏幕左侧，因为我在屏幕右侧有一个 Facebook 按钮。一切都适用于我的代码；但是，我正在努力改进一个领域。在我的图库页面上，我有 500 多张图片。问题是我的移动菜单停留在右侧，并将 Facebook 按钮稍微向左推，直到页面完全加载。页面完全加载后，一切都会正确显示。如何更正此问题，以便移动菜单始终立即出现在左侧？谢谢！

我附上了几张图片来参考我要解释的内容。尝试上传视频，但该网站不允许视频。

仅在画廊页面上，当页面首次加载时，它最初看起来像名为“before-page-loads.png”的附加图像。加载页面后，它会正确显示，并且看起来像“after-page-loads.png”中的图像。

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

我还提供了我的 JavaScript 和 HTML 代码。

谢谢你的帮助！

4

0 回答 0