右侧的菜单和左侧的半透明导航栏上的Logo

我需要一个在背景图像上半透明的导航栏。右侧的菜单和左侧的半透明导航栏上的Logo

标志在左侧菜单右侧应列表items.Something之间等距像 -

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

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

我试着给float:right到我的菜单列表的<ul>元它走向了极端。

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

使徽标成为一个带有bg图像的元素，而不是将其放在body元素上，这样可以更轻松地使用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

右侧的菜单和左侧的半透明导航栏上的Logo

回答

相关问题