在导航栏之前提供指向图标的链接

时间:2016-04-26 04:39:34

标签: javascript jquery html css twitter-bootstrap

对不起,如果我的标题错了,我无法想到这个问题的好标题。 我想在导航栏之前放一个小图标,以便访问者可以通过单击该图标进入另一个站点。所以,我尝试在导航栏的课前提供该图标。这样做我发现,在课前没有链接。

那么,有没有办法从js或通过改变一些样式来做,如果它可以是非常有用的。

you can view what i meant from this link

      <nav class="navbar navbar-blend navbar-default">
        <div class="navbar-header pull-left">

                    <a class="navbar-brand" href="http://upper.dev/suisse-japon-final/suissejapon110216/" rel="home" title=" Schweizerisch-Japanische Gesellschaft – www.swiss-japan.ch">
                    <img src="http://2d6t692n0eb7333453op21it.wpengine.netdna-cdn.com/cym/wp-content/themes/30web/assets/img/logo.png" class="img-responsive showinbetween"></a>
                   </div>
                    <div class="navbar-header pull-right">
                      <ul class="nav pull-left">
                       <li class="dropdown pull-right">
                         <div id="lang_sel"><ul><li><a href="#" class="lang_sel_sel icl-de">DE</a> <ul><li class="icl-en"><a href="http://upper.dev/suisse-japon-final/suissejapon110216?lang=en">EN</a></li></ul></li></ul><span class="sj-down-arrow">▾</span></div>                            </li>
                      </ul>
                        <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><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-right" id="bs-example-navbar-collapse-1">
                     <ul id="menu-menu-1" class="nav navbar-nav">
         <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-12 current_page_item menu-item-20"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/">Home</a></li>
              <li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-155">
         <a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=140">About Us</a>
           <ul class="sub-menu">
            <li id="menu-item-175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-175"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=156">Activities</a>

        </li>
              <li id="menu-item-527" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-527"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=234">Activities</a>

         </li>
            <li id="menu-item-231" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-231"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=51">Membership</a>

            </li>
             <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=41">Various</a></li>
             <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=31">Links</a></li>
              <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://upper.dev/suisse-japon-final/suissejapon110216/?page_id=25">Contact</a></li>
                   </ul>             
                            </div>

            </nav>

对不起它的徽标和图标仅用于演示。Its like it in full width Its in mobile view

你可以看到导航栏和导航栏品牌形象之间的小图标,我想把链接放到那个小图标上。

1 个答案:

答案 0 :(得分:1)

为什么在之前使用伪元素而不是元素?

{{1}}