2つのナビゲーションバー、1つの画像がブートストラップ付きです。出来ますか？

2つのbootsrapナビゲーションバーで1つの画像を使いたいです。私の問題は、navbarsが分割された画像を持っていることです。 2つのナビゲーションバー、1つの画像がブートストラップ付きです。出来ますか？

このように分割されていないナビゲーションバーには、この図が全体的に表示されます。私のコードの一部：

<nav class = "navbar navbar-fixed-top"> 
<nav calss = "navbar navbar-default"> 
    <div class="container-fluid"> 
    <ul class = "nav navbar-nav navbar-top navbar-right"> 
     <li><a class = "links" data-page = "us_hu" href = "#index_hu">Rólunk</a></li> 
     <li><a class = "links" data-page = "services_hu" href = "#services_hu">Szolgáltatások</a></li> 
     <li><a class = "links" data-page = "actual_offers_hu" href = "#actual_offers">Aktuális ajánlatok</a></li> 
     <li><a href="./">EN</a></li> 
    </ul> 
    </div> 
</nav>

 <body id = "page-top" data-spy = "scroll" data-target = ".navbar-fixed-top" data-offset="40"> 
<nav class = "navbar navbar-fixed-top" style = "top:35px;"> 
<nav class = "navbar navbar-default"> 
    <div class = "container-fluid"> 
    <div class = "navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#matomNavbar"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      <a class="navbar-brand" href="#matomPage">M.aTom</a> 
    </div> 
     <div class="collapse navbar-collapse" id="matomNavbar"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#our-task">Alapelvünk</a></li> 
     <li><a href="#gallery">Galéria</a></li> 
     <li><a href="#about">Rólunk</a></li> 
     <li><a href="#team">Csapat</a></li> 
     <li><a href="#contact">Kapcsolat</a></li> 
    </ul> 
    </div> 
    </div> 
</nav> 
</nav>

CSS：

.navbar { 
    font-family: 'Overpass', sans-serif; 
    margin-bottom: 0; 
    /*background-color: #4c4c4c; */ 
    background-image: url('../images/ten.png'); 
    border: 0; 
    font-size: 12px !important; 
    line-height: 1.42857143 !important; 
    letter-spacing: 1px; 
    border-radius: 0px; 
    min-height: 0px; 
}

出典

2017-02-01 JustMatthew

DIVで両方のナビゲーションバーを折り返して、そのDIVにバックグラウンドを適用できますか？ – ZimSystem

彼らは別のファイルにあります：S – JustMatthew

私は試しましたが、働いていませんでした:( – JustMatthew

が

<div class="wrapper" style="background-image:url('to your image')"> 
<div class="first_nav"> 
<div> 
<div class="scnd_nav"> 
</div> 
<div> 
<script> 
$("#first_nav").load("file path to fist_nav file"); 
</script> 
<script> 
$("#scnd_nav").load("file path to scnd_nav"); 

</script>

今ラッパーのdivの背景画像を使用する---これを試してみてください。以下で

EDIT

あなたは、背景画像が分割されていない見ることができますスニペット。ラッパーdivに適切なheight CSSプロパティを与えます。

<!doctype html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    </head> 
 
<div style='background-image: url("https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg"); height:70px;'> 
 
<nav class = "navbar navbar-fixed-top"> 
 
    <ul class = "nav navbar-nav navbar-top navbar-right"> 
 
     <li><a class = "links" data-page = "us_hu" href = "#index_hu">Rólunk</a></li> 
 
     <li><a class = "links" data-page = "services_hu" href = "#services_hu">Szolgáltatások</a></li> 
 
     <li><a class = "links" data-page = "actual_offers_hu" href = "#actual_offers">Aktuális ajánlatok</a></li> 
 
     <li><a href="./">EN</a></li> 
 
    </ul> 
 

 
    </nav> 
 
    <nav class = "navbar navbar-fixed-top" style = "top:35px;"> 
 

 
    
 
    <div class = "navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#matomNavbar"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
      <a class="navbar-brand" href="#matomPage">M.aTom</a> 
 
    </div> 
 
     <div class="collapse navbar-collapse" id="matomNavbar"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li class="active"><a href="#our-task">Alapelvünk</a></li> 
 
     <li><a href="#gallery">Galéria</a></li> 
 
     <li><a href="#about">Rólunk</a></li> 
 
     <li><a href="#team">Csapat</a></li> 
 
     <li><a href="#contact">Kapcsolat</a></li> 
 
    </ul> 
 
    </div> 
 
    
 
</nav> 
 

 
    </div> 
 
    </html>

NOTE

画面サイズに応じて適切heightプロパティを追加してください。私は@mediaプロパティを使用することを意味します。上記のスニペットはフルスクリーンで動作するように表示されます。

は、今の場合には、あなたはナビゲーションバーがレイアウトから外れてしまうclass="navbar-fixed-top"を使用している場合は、これは

happening--である理由を知りたいです。結果として、特定のcssをレンダリングページに追加する必要があります。お手伝い願います！

出典

2017-02-01 16:31:08 neophyte

どちらもうまくいきました：S – JustMatthew

あなたのCSSを変更してください.navbarクラスに背景画像のプロパティを追加しないでください – neophyte

@JustMatthew：私はそれを見て答えを変更しました。 – neophyte

2つのナビゲーションバー、1つの画像がブートストラップ付きです。出来ますか？

答えて

関連する問題