右側のメニューと半透明のナビゲーションバーの左側のロゴ

背景画像上に半透明のナビゲーションバーが必要です。右側のメニューと半透明のナビゲーションバーの左側のロゴ

も同様のようitems.Somethingリストの間で間隔を置いて配置する必要があり、右側に左側メニューのロゴ -

https://getbootstrap.com/examples/cover/

http://bootsnipp.com/snippets/featured/full-screen-background-cover-page

私はメニューリストの私の<ul>要素にfloat:rightを与えてみました、それは右の極端に行く。

HTML

<body> 
    <nav> 
    <ul style="float:right;"> 
     <li style="display:inline;"><a href= "#">item1</a></li> 
     <li style="display:inline;"><a href= "#">item2</a></li> 
     <li style="display:inline;"><a href= "#">item3</a></li> 
     <li style="display:inline;"><a href= "#">item4</a></li> 
    </ul> 
</nav> 
</body>

CSS

body { 
background-image:url("giphy.gif"); 
background-repeat: no-repeat; 
background-size: cover; 
overflow-x:hidden; 
} 

nav { 
    height:60px; 
    width:100%; 
    overflow-y:hidden; 
    overflow-x:hidden; 
    z-index:1; 
    background-color: transparent; 
}

出典

2016-05-14 kaarthick raman

ロゴをbody要素に置くのではなくbgイメージで作ってください。そうすれば、cssでその要素をページの周りに移動させる方が簡単になります。 – fauverism

http://jsbin.com/ruwopuyavu/edit?html,css,output – fauverism

ブートストラップCSSを使って、あなたはこのことができます

<body> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="#">Your LOGO here.</a> 
     </div> 
     <ul class="nav navbar-nav" style="float:right"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Page 1</a></li> 
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
     </ul> 
     </div> 
    </nav> 
</body>

希望としてそれを行うことができます！

出典

2016-05-14 03:50:16

右側のメニューと半透明のナビゲーションバーの左側のロゴ

答えて

関連する問題