2016-03-30 33 views
0

Web tasarımım mobil görünüme çöktüğünde, açılan menü altındaki düğmeyi aşağıya itmez, bunun yerine menü sayfanın yarısına kadar iner. Bu sadece carousel işlevi ve lightbox2 ile sayfalarda olduğu görülüyor.Bootstrap Navbar Dropdown Mobile Issue

Herhangi bir yardım için teşekkür ederiz.

ben başka bir konuya doğru sonuçlar veren bu denedi:

.navbar-header { 
position: relative; 

z-index: 1; Ben üst ins de komut dosyası etiketleri koyarak denemek için öneririm

<nav> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="glyphicon glyphicon-menu-hamburger"></span></button> 
    </div> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="defaultNavbar1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="index.html">Home<span class="sr-only">(current)</span></a></li> 
     <li><a href="about.html">About Me</a></li> 
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Photography<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="events.html">Events</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="music.html">Music</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="nature.html">Nature</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="people.html">People</a></li> 
      </ul> 
     </li> 
     <li><a href="construction.html">Contact Me</a></li> 
     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

ve bottom`

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> 
<script src="js/bootstrap-3.3.5.js" type="text/javascript"></script> 
<script src="js/lightbox.js" type="application/javascript"></script> 
<script> 
    lightbox.option({ 
     'resizeDuration': 600, 
     'wrapAround': true, 
     'alwaysShowNavOnTouchDevices': true, 
     'fitImagesInViewport': true 
    }) 
</script>` 
+0

Sorunun bir tanıtımını yapabilir misiniz? Menünüz genellikle mobilde gizlenen masaüstü ekranlarında bir resim veya bir şeyin altında mı? yerine: göreceli, deneyin konumu: mutlak ve üst: 0. Sadece bir tahmin – deebs

+0

evet demo burada: www.tinajarrett.com ve pozisyon değişikliği, ne yazık ki işe yaramadı. – Bekah

cevap

0

de komut: }

İşte Navbar'ı kod. işe yarayabilir.

+0

Bu, açılır menüyü yukarı doğru hareket ettirdi, ancak düğmelerin geri kalanıyla aynı çizgide değil. – Bekah

1

Düzeltildi.

Css dosyalarını günün erken saatlerinde değiştirdim ve bootstrap css'den .dropdown menüsünün eksik olduğunu fark etmedim.

.navbar-nav .open .dropdown-menu 
İlgili konular