調整瀏覽器寬度時導航欄響應問題？

Question

我有一個響應導航欄的問題，當我調整移動視圖的瀏覽器大小並打開然后關閉菜單按鈕，之后使瀏覽器全屏顯示大屏幕視圖導航欄將消失該問題的任何幫助

我需要在向下滾動時添加另一個功能來修復導航欄，但是當在移動設備上滾動菜單時，它看起來很亂

在我的代碼下面（在代碼段上）

 $(document).ready(function(){ $(".menu").click(function(){ $("nav").slideToggle(800); }) }); 

 nav{ width: 100%; background: #202c45; padding: 0 50px; box-sizing: border-box; } nav h1{ margin: 0; padding: 0; float: left; padding-top: 18px; } nav h1 a{ color: #fff; text-decoration: none; } nav ul{ margin: 0; padding: 0; float: right; } nav ul li{ list-style: none; display: inline-block; padding: 20px; transition: 0.5s; } nav ul li:hover{ background: #f2184f; } nav ul li a{ color: #fff; text-decoration: none; } .responsive-bar{ width: 100%; background: #202c45; padding: 10px 30px; box-sizing: border-box; display: none; } .responsive-bar h3{ margin: 0; padding: 3px 0; float: left; color:#fff; } .responsive-bar h3 a{ color:#fff; text-decoration: none; } .responsive-bar h4{ margin: 0; padding: 0; color: #fff; float: right; cursor: pointer; padding: 5px 10px; background:#f2184f; text-transform: uppercase; } @media (max-width:768px){ nav{ display: none; padding: 0; } .responsive-bar{ display: block; } nav h1{ display: block; float: none; } nav ul{ float: none; } nav ul li{ display: block; text-align: center; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,.1) } #full-logo{ display: none; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <nav> <h1 id="full-logo"><a href="#">MyCar</a></h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> <div style="clear:both;"></div> </nav> <div class="responsive-bar"> <h3 class="brand"><a href="#">MyCar</a></h3> <h4 class="menu">Menu</h4> <div style="clear:both;"></div> </div> 

Answer 1

根據您的html結構，您必須將以下代碼添加到您的CSS

@media (min-width:768px){
    nav{
        display: block !important;
    }
}

使用此功能，您無需在html和css中進行任何更改。

 $(document).ready(function(){ $(".menu").click(function(){ $("nav").slideToggle(800); }) }); 

 nav{ width: 100%; background: #202c45; padding: 0 50px; box-sizing: border-box; } nav h1{ margin: 0; padding: 0; float: left; padding-top: 18px; } nav h1 a{ color: #fff; text-decoration: none; } nav ul{ margin: 0; padding: 0; float: right; } nav ul li{ list-style: none; display: inline-block; padding: 20px; transition: 0.5s; } nav ul li:hover{ background: #f2184f; } nav ul li a{ color: #fff; text-decoration: none; } .responsive-bar{ width: 100%; background: #202c45; padding: 10px 30px; box-sizing: border-box; display: none; } .responsive-bar h3{ margin: 0; padding: 3px 0; float: left; color:#fff; } .responsive-bar h3 a{ color:#fff; text-decoration: none; } .responsive-bar h4{ margin: 0; padding: 0; color: #fff; float: right; cursor: pointer; padding: 5px 10px; background:#f2184f; text-transform: uppercase; } @media (max-width:768px){ nav{ display: none; padding: 0; } .responsive-bar{ display: block; } nav h1{ display: block; float: none; } nav ul{ float: none; } nav ul li{ display: block; text-align: center; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,.1) } #full-logo{ display: none; } } @media (min-width:768px){ nav{ display: block !important; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <nav> <h1 id="full-logo"><a href="#">MyCar</a></h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> <div style="clear:both;"></div> </nav> <div class="responsive-bar"> <h3 class="brand"><a href="#">MyCar</a></h3> <h4 class="menu">Menu</h4> <div style="clear:both;"></div> </div> 

Answer 2

您還需要在調整窗口大小時更新導航。 好心檢查。 希望這對你有所幫助。 剛剛在jquery中進行了更新。

 $(document).ready(function(){ $(".menu").click(function(){ $("nav").slideToggle(800); }); $( window ).resize(function() { if($(window).width() > 767) { $("nav").slideDown(800); } }); }); 

 nav{ width: 100%; background: #202c45; padding: 0 50px; box-sizing: border-box; display: block } nav h1{ margin: 0; padding: 0; float: left; padding-top: 18px; } nav h1 a{ color: #fff; text-decoration: none; } nav ul{ margin: 0; padding: 0; float: right; } nav ul li{ list-style: none; display: inline-block; padding: 20px; transition: 0.5s; } nav ul li:hover{ background: #f2184f; } nav ul li a{ color: #fff; text-decoration: none; } .responsive-bar{ width: 100%; background: #202c45; padding: 10px 30px; box-sizing: border-box; display: none; } .responsive-bar h3{ margin: 0; padding: 3px 0; float: left; color:#fff; } .responsive-bar h3 a{ color:#fff; text-decoration: none; } .responsive-bar h4{ margin: 0; padding: 0; color: #fff; float: right; cursor: pointer; padding: 5px 10px; background:#f2184f; text-transform: uppercase; } @media (max-width:768px){ nav{ display: none; padding: 0; } .responsive-bar{ display: block; } nav h1{ display: block; float: none; } nav ul{ float: none; } nav ul li{ display: block; text-align: center; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,.1) } #full-logo{ display: none; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <nav> <h1 id="full-logo"><a href="#">MyCar</a></h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> <div style="clear:both;"></div> </nav> <div class="responsive-bar"> <h3 class="brand"><a href="#">MyCar</a></h3> <h4 class="menu">Menu</h4> <div style="clear:both;"></div> </div> 

Answer 3

請檢查以下代碼行，在nav上方添加圖片並使標題粘貼。

腳本

$(document).ready(function(){
    $(".menu").click(function(){
        $("nav").slideToggle(800);
        $("nav").toggleClass("fixed_nav");
        $(".responsive-bar").toggleClass("addtop");
    });
}); 


$(window).scroll(function(){
    if($(window).width() > 767) {
        if ($(window).scrollTop() >= 150) {
            $('nav').addClass('fixed-header');
        }
        else {
            $('nav').removeClass('fixed-header');
        }
    }
    else {
        if ($(window).scrollTop() >= 150) {
            $('.responsive-bar').addClass('fixed-header');
        }
        else {
            $('.responsive-bar').removeClass('fixed-header');
        }
    }
});

HTML

<div class="img-wrapper">
    <img src="https://via.placeholder.com/1250x150">
</div>
<nav class="nav-bar">
    <h1 id="full-logo"><a href="#">MyCar</a></h1>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>

    </ul>
    <div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
    <h3 class="brand"><a href="#">MyCar</a></h3>
    <h4 class="menu">Menu</h4>
    <div style="clear:both;"></div>
</div>

.............

CSS

nav{
    width: 100%;
    background: #202c45;
    padding: 0 50px;
    box-sizing: border-box;
}
nav h1{
    margin: 0;
    padding: 0;
    float: left;
    padding-top: 18px;
}

nav h1 a{
    color: #fff;
    text-decoration: none;

}

nav ul{
    margin: 0;
    padding: 0;
    float: right;
}

nav ul li{
    list-style: none;
    display: inline-block;
    padding: 20px;
    transition: 0.5s;
    }

nav ul li:hover{
    background: #f2184f;
}

nav ul li a{
    color: #fff;
    text-decoration: none;
}

.responsive-bar{
    width: 100%;
    background: #202c45;
    padding: 10px 30px;
    box-sizing: border-box;
    display: none;
}

.responsive-bar h3{
    margin: 0;
    padding: 3px 0;
    float: left;
    color:#fff;
}
.responsive-bar h3 a{
    color:#fff;
    text-decoration: none;
    }
.responsive-bar h4{
    margin: 0;
    padding: 0;
    color: #fff;
    float: right;
    cursor: pointer;
    padding: 5px 10px;
    background:#f2184f;
    text-transform: uppercase;
}

@media (max-width:768px){
    nav{
        display: none;
        padding: 0;
    }
    .responsive-bar{
        display: block;
    }
    nav h1{
        display: block;
        float: none;
    }
    nav ul{
        float: none;
    }
    nav ul li{
        display: block;
        text-align: center;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255,255,255,.1)
    }
    #full-logo{
        display: none;
    }
    img {
        display: none;
    }
    .nav-bar.fixed_nav{
        display: none;
        position: fixed;
        width: 100%;
        left: 0px;
        right: 0px;
        top: 0px;
    }
    .fixed-header.addtop {
        top: 98px;
    }
}
@media (min-width:768px){
    nav{
        display: block !important;
    }
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}