Question

我正在尝试切换导航栏，但它不是Bootstrap3默认导航栏所以通常

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

无效。当检测到小屏幕时，是否可以将此导航栏更改为按钮，当选择项目时，它将返回为按钮。我是webdevelopment的新手，但我有一些编码背景，所以快速修复将非常感激。谢谢！

<body class="home page page-id-2 page-template-default desktop">
    <div style="position:absolute; left:-3364px; top:-3571px;"></div>
    <div id="container" class="sidebar-open">
        <header id="header" role="banner">

            <div class="logo-main-wrap">
                <div>
                    <div id="logo">
                        <a href="index.html" rel="nofollow"><span></span></a>

                    </div>
                    <nav role="navigation">
                        <ul id="menu-main" class="nav top-nav clearfix">

                            <li id="menu-item-703" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-703">
                                <a href="index.html"><span>Anasayfa</span></a>
                            </li>
                            <li id="menu-item-704" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-704">
                                <a href="urunler.html"><span>Ürünler</span></a>
                                <ul class="sub-menu">
                                    <li id="menu-item-3946" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3946">
                                        <a href="about/leadership.html"><span>Sızdırmaz Kaportalar</span></a>
                                    </li>
                                    <li id="menu-item-3945" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3945">
                                        <a href="about/staff.html"><span>Askeri Projeler</span></a>
                                    </li>
                                    <li id="menu-item-4245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4245">
                                        <a href="careers.html"><span>DİĞER GEMİ ÜRÜNLERİ</span></a>
                                    </li>
                                </ul>
                            </li>
                            <li id="menu-item-3696" class="leadership menu-item menu-item-type-post_type menu-item-object-page menu-item-3696">
                                <a href="about/leadership.html"><span>Leadership</span></a>
                            </li>
                            <li id="menu-item-3944" class="staff menu-item menu-item-type-post_type menu-item-object-page menu-item-3944">
                                <a href="about/staff.html"><span>Staff</span></a>
                            </li>
                            <li id="menu-item-702" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-702">
                                <a href="kurumsal.html"><span>Kurumsal</span></a>
                            </li>
                            <li id="menu-item-701" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-701">
                                <a href="sertifikalar.html"><span>Sertİfİkalar</span></a>
                            </li>
                            <li id="menu-item-705" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-705">
                                <a href="referanslar.html"><span>Referanslar</span></a>
                            </li>
                            <li id="menu-item-700" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-700">
                                <a href="#iletisim"><span>İletİşİm</span></a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>

Answer 1

我假设您需要 DEMO

<nav class="navbar navbar-inverse " role="navigation">
   <div class ="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-collapse" id="btn">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
       <a class="navbar-brand" href="#"><img src="/05/logo2.png" class="img-responsive" alt=""/></a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav" id="men">
           <li id="menu-item-723" class="menu-item "><a href="#">Philosophy</a></li>
<li id="menu-item-724" class="menu-item"><a href="#">Team</a></li>
<li id="menu-item-539" class="menu-item"><a href="#">Blog</a></li>
          <li id="menu-item-540" class="menu-item "><a href="#">Contact</a></li>
      </ul>
   </div>

</nav>

如何切换自定义导航栏？

1 个答案: