Bootstrap 3 Navbar Collapse覆盖重叠的品牌标识

Question

我用Bootstrap 3.3.4重新完成了我的网站。我只设计桌面和移动视图。

在移动视图中，我使用重叠的品牌徽标和固定顶部。

由于折叠下拉菜单未滚动，我定义了最大高度，现在滚动，但菜单项覆盖了品牌徽标的重叠部分。

它的外观如下： https://www.dropbox.com/s/ccevqogpwdxkaz0/logo-overlap.jpg?dl=0

我尝试将品牌徽标的z-index设置为10000，但这也不起作用。

我怀疑是Bootstrap javascript将下拉菜单放在徽标顶部。 （但它仍然在导航栏下）

可在此处访问测试页： http://www.shaolin-wahnam-wien.at/mobiletest/TEST.html.php

MGComposition::MGComposition(){
    MGFrases** frases;
    frases = new MGFrase* [3];
    for( int n = 0 ; n < 3 ; n ++ ){
        frases [n] = new MGFrase[2];
    }

    for( int n = 0 ; n < 3 ; n ++ ){
        frases[n, 0] = new MGFrase();
        frases[n, 1] = new MGFrase();
    }
}

MGFrase* MGComposition::getFrase( int channel , int numFrase ){
    return frases[ channel, numFrase] ;
}

void MGComposition::log(){
    cout << "- Composition --\n";
    for( int n = 0 ; n < 3 ; n ++ ){
         frases[ n , 0]->log();
         frases[ n , 1]->log();
    }
}


MGFrase::MGFrase(){
   int alturas [10];
}

void MGFrase::setTone(int tone, int index) {
    alturas[index] = tone;
}

void MGFrase::log() {

    cout << "\n\nLog de MGFrase\n";

    cout << "\nAlturas \n";

    for (int nota = 0; nota < numNotes; nota++) {
        cout << alturas [nota] << ", ";
    }
}

MGGenerator::MGGenerator() {

  MGComposition* composition;
  composition = theComposition;

  MGFrase* fraseDoBaixo;
  fraseDoBaixo = composition->getFrase(1, 0);
  fraseDoBaixo->setTone(8, 0);
  composition->log();

}

MGFrase*** frases;
frases = new MGFrase** [3];
for( int n = 0 ; n < 3 ; n ++ ){
    frases [n] = new MGFrase*[2];
}

for( int n = 0 ; n < 3 ; n ++ ){
    frases[n][0] = new MGFrase();
    frases[n][1] = new MGFrase();
}

Answer 1

您需要在移动视图中为菜单设置高度，并删除列表中第一个子元素的边距集。

删除：

.navbar-nav > li:first-child {
  margin-top: 35px !important;
}

并添加：

@media (max-width: 468px) {
  .navbar-header {
    min-height: 95px;
  }
}

<强>输出：

Answer 2

使用z-index时，元素必须绝对或相对定位。