Bootstrap menu not displaying properly in mobile mode

Hello all i have this navigation working on. Everything is OK desktop mode but in mobile the nav breaks. can this propblem be solve if I use the @media css option on the header div.

Please see the following code fo the nav menu: Please also note that i am using bootrap cdn.

             <span class="header-info phone"><i class="fa fa-phone fa-lg"></i> Call Us: 0800 123 456 789</span>      <span class="header-info email"><i class="fa fa-envelope-o fa-lg"></i> mail@yoursite.com</span>  
               </div>
                <div class="navbar-header"><a class="navbar-brand" href="#">TAJ</a> 
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                  </button>
              </div>
              <div class="collapse navbar-collapse navbar-menubuilder">
                  <ul class="nav navbar-nav navbar-right">
                      <li><a href="/">Home</a>
                      </li>
                      <li><a href="/products">Products</a>
                      </li>
                      <li class="dropdown"><a href="/about-us" class="dropdown-toggle" data-toggle="dropdown">About Us <b class="caret"></b></a>
                          <ul class="dropdown-menu" role="menu">
                              <li><a href="#">Test2</a>
                              </li>
                          </ul>
                      </li>
                      <li class="dropdown"><a href="/contact" class="dropdown-toggle" data-toggle="dropdown">Contact Us <b class="caret"></b></a>
                          <ul class="dropdown-menu" role="menu">
                              <li><a href="#">About</a>
                              </li>
                          </ul>
                      </li>
                  </ul>
              </div>
          </div>
      </div>

Please see CSS for the nav menu.

.top_header{
     border-bottom: 1px solid #3bbbbc;


}
.header-info{
    color:999999 !important;
}
.header-info{


            line-height: 50px;
            padding: 0 30px 0 0;
            font-size: 13px;

}

.top_header{

    min-height: 50px;

}

#bst-bootstrap-menu.navbar-default .navbar-brand {
    color: rgba(119, 119, 119, 1);
}
#bst-bootstrap-menu.navbar-default {
    font-size: 14px;
    background-color: rgba(255, 255, 255, 1);
    height: 130px;
    border-color: transparent;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
}
#bst-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: rgba(68, 68, 68, 1);
    background-color: rgba(248, 248, 248, 0);
}
#bst-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#bst-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: rgba(59, 187, 188, 1);
    background-color: transparent;
}
#bst-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#bst-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#bst-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(59, 187, 188, 1);
    background-color: transparent;
}
#bst-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: #3bbbbc;
}
#bst-bootstrap-menu.navbar-default .navbar-toggle:hover,
#bst-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: #3bbbbc;
}
#bst-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background-color: #3bbbbc;
}
#bst-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#bst-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #fff;
}

Please see images

链接地址: http://www.djcxy.com/p/59166.html

上一篇: 多个线程调用相同的功能

下一篇: Bootstrap菜单在移动模式下不能正确显示