Önyükleme 3 - Üst üste binen metin düğmeleri Gezinme sorunu

Question

Sorun görmek için bir klavyedir.

https://jsfiddle.net/nn6ydqcw/1/

<header> 
    <nav class="navbar navbar-inverse" role="navigation "> 
     <div class="col-md-12" style="height:150px;background-color:#FFFFFF"> 
      <div class="col-md-3" ><a href="index"><img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/200px-Google_%22G%22_Logo.svg.png"></a></div> 
      <div class="col-md-9" ><h1>Tag line will come here and it will be managed dynamically</h1></div> 
     </div> 
     <div class="col-md-12"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="home">HOME</a></li> 
        <li><a href="contact">CONTACT</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</header> 

Yukarıdaki kodda Bootstrap 3 kullanıyorum ve masaüstü/dizüstü vb üzerinde çalışıyor Ama mobil veya yeniden boyutlandırılmış tarayıcıda gördüğünde daha küçük ekranda görmek, içeri görüntülüyor takip eden sıra. Bu yüzden sorun, geçiş simgesine tıkladığımda daha küçük ekranda gezinme düğmelerinin, etiket satırının üstüne gelmesidir.

1. Logo
2. Navigasyon Geçiş Simge
3. Metin bazlı Etiket çizgisi

Yapmak istediğim bu yüzden diziyi izleyen görüntülenir. Bu yüzden onları daha küçük bir ekranda görseler bile, gezinti düğmeleri etiket satırının üst üste gelmemelidir.

1. Logo
2. Metin bazlı Etiket çizgisi
3. Geçiş Navigasyon Geçiş Simge

bana sonucu gerekli hale nasıl bildirin.

Answer 1

Stili kontrol edin = "height: 150px; background-color: #FFFFFF" yükseklikte çakışıyorsunuz: 150px; Ve sanırım itme ve çekmeyi önyüklemede kullanmanız gerekiyor.

Answer 2

Güncelleme kodunuzu aşağıdaki gibi:

CSS:

 @media only screen and (max-width: 768px) { 
    body { 
    background-color: orange; //FOR TESTING PURPOSE 
    } 

    #tagstyle { 
     position: relative; 
     left: 220px; 
     top: -200px; 
     padding: 0px; 
     width: 60%;  
     } 
} 

HTML: [aşağıda gösterildiği gibi bir kimliği Ekle]

<h1 id="tagstyle">Tag line will come here and it will be managed dynamically</h1> 

Masaüstü Görünümü:

Mobil Görünüm: