移动下拉导航不显示在 1024px 宽以下

Question

这很奇怪。如果屏幕宽度小于 1150 像素，我有一些非常简单的样式和代码可以显示下拉菜单。发生的情况是，如果屏幕边长超过 1024px 且宽度小于 1150px，下拉菜单会出现，但低于 1024px 宽度，它就会消失 (!)。

我似乎没有任何样式可以使此下拉菜单消失（根本）。有谁知道发生了什么事吗？

https://jsfiddle.net/LNMSchneiderman/62ecg453/16/

html:

<navbar  >
     <leftalign>
             
             <span class="navbar-head2" style="">Project</span>
     </leftalign>

        <rightalign>
            <span class="desktop-nav"><a class="current-page" href="index.php">Introduction</a>&nbsp;&nbsp;&nbsp;<a href="">Penn </a>&nbsp;&nbsp;&nbsp;<a href="">Homewood</a>&nbsp;&nbsp;&nbsp;<a href="">Ohio</a> &nbsp;&nbsp;&nbsp;<a href="">Carson </a> </span>

            <span class="mobile-nav hamburger"><i class="fas fa-bars "></i></span>

                <ul class="dropdownL" >
                      <li class="intro" id="intro"><a href="">Introduction</a></li>
                      <li class="intro" id="pennave"><a href="">Penn </a></li>
                        <li class="intro" id="homewood"><a href="">Homewood</a></li>
                      <li class="intro" id="eastohio"><a href="">Ohio</a></li>
                      <li class="intro" id="eastcarson"><a href="">Carson</a></li>

                </ul>

            

        </rightalign>
 </navbar>

css:

navbar {
    width: 100%;
    height: 75px;
    background: #f2f2eb;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding: 0 10px;
    position: fixed;
    top: 0;
    z-index: 3000;
    opacity: 1;
   transform: translate3d(0,0,0);
}

.navbar-head2 {
    font-family: 'proxima-nova', Helevtica, Verdana, sans-serif; color: #000;
   letter-spacing: .1rem; text-transform: uppercase; font-size: 16px;
  margin-left: 5px; font-weight: 700;
}

@media only screen and (max-width: 1024px) {
    .navbar-head2 {
        margin: 0 0 0 10px;
    }
}



 navbar leftalign, navbar rightalign {
        width: auto;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-content: center;
        align-items: center;
    }
    
    @media only screen and (max-width: 1024px) {
        navbar leftalign {
            justify-content: flex-start;
        }
    }
    
    navbar rightalign {
        margin-right: 30px;
        margin-top: -9px;
    }
    
    @media only screen and (max-width: 500px) {
        navbar rightalign {
            margin-right: 10px;
            margin-top: -5px;
        }
    }
    
    @media screen and (max-width: 1024px) {
        navbar {
            display:block;
            position: fixed;
            overflow: hidden;
        }
    
        navbar rightalign {
            position: absolute;
            right:0;
            top: 0;
        }
        
    }
    .hamburger {
      cursor: pointer;
      width: 10px;
      height: 10px;
      margin-right: 40px;
    }
    
    .dropdownL {
      position: fixed;
      top: 75px;
      right: 0vw;
      list-style-type: none !important;
      z-index:10;
      margin-left: 0;
      height: auto;
      width: 200px;
      display: none;
    }
    
      .dropdownL li  {
        padding: 5px 10px 5px 10px;
        color: black;
        cursor: pointer;
        border-bottom: 1px solid #ccc;
        font-family: 'proxima-nova', sans-serif;
    
    
      }
      .dropdownL li:last-child {
        border-bottom: none 0;
      }
      .dropdownL li:hover {
        opacity: .9;
      }
    
      .dropdownL li a:link, .dropdownL li a:visited, .dropdownL li a:hover {
        cursor: pointer;
        padding-left: 0;
        color: black !important;
        font-weight: 400;
      }
      
      .desktop-nav {
      display: block;
      margin-right: 40px;
    }
    
    .mobile-nav {
      display: none;
    }
    
    @media only screen and (max-width: 1150px) {
        .mobile-nav {
            display: block !important;
        }
        .desktop-nav {
            display: none;
        }
    }

jquery:

$('.hamburger').on('click', function(e) {
                    if ( $( ".dropdownL li:first" ).is( ":hidden" ) ) {
                    $( ".dropdownL" ).slideDown( "slow" );
                  } else {
                    $( ".dropdownL" ).slideUp();
                  }

            });

Answer 1

看来你只是把它藏起来了！

@media screen and (max-width: 1024px) {
navbar {
    display:block;
    position: fixed;
    /*overflow: hidden;*/
}

如果删除隐藏的溢出，您将能够在其他任何地方看到下拉菜单。

添加这个将确保在桌面导航显示后，移动将消失。

@media only screen and (min-width: 1167px) {
.dropdownL {
    display: none !important;
  }
}

这里是固定版本：https://jsfiddle.net/fq0Ly478/1/

移动下拉导航不显示在 1024px 宽以下

mobile dropdown navigation not appearing below 1024px wide

css

jquery

drop-down-menu

responsive