菜单栏上的徽标图像覆盖在菜单栏的上方和下方伸出

Question

我有一个高度为20px的菜单栏，我的徽标是150x150px。 我想垂直对齐我的徽标，使其在我的菜单栏顶部和下方伸出。因此比我的菜单栏高出65px，低于菜单栏65px。现在我的菜单栏高度相应地调整了我的徽标图像的高度，因此菜单栏完全从20px扩展到150px。是否有可能实现我的目标，因为徽标是菜单栏的一部分，但也不是一种方式？

小提琴Fiddle

HTML：

<div id="nav">
        <div class="navbar navbar-default navbar-static">
            <div class="menu-container">
                <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                <a class="navbar-toggle" data-target=".navbar-collapse"
                data-toggle="collapse"><span class=
                "glyphicon glyphicon-bar"></span> <span class=
                "glyphicon glyphicon-bar"></span> <span class=
                "glyphicon glyphicon-bar"></span></a> <a class="navbar-brand"
                href="#"><img alt="" src=
                "http://placehold.it/150x150&text=Logo"></a>

                <div class="navbar-collapse collapse">

                    </ul>
                </div>
            </div>
        </div><!-- /.navbar -->
    </div>

CSS：

.menu-container {
    background-color:#000000;
}

#nav.affix {
    position:fixed;
    top:0;
    width:100%;
    z-index:10
}

#sidebar.affix-top {
    position:static
}

#sidebar.affix {
    position:fixed;
    top:80px
}

Answer 1

Jsfiddle Link

#nav {
    position:fixed;
    top:65px;
    width:100%;
    z-index:10;
    height:20px;
    background-color:#000000;
 }  

#nav img{
     position:fixed;
     top:0px;
 }

通过你的问题，我可以设计这个jsfiddle。希望这是你想要的。

Answer 2

您必须在徽标div上使用绝对位置，这样才不会影响菜单高度......

Answer 3

#nav{  margin: 65px 0;}
.menu-container{  min-height: 20px;
  position: relative;}
.navbar-brand{  display: inline-block;
  position: absolute;
  top: 50%;
  margin-top: -75px;}

Fiddle for how it works

Answer 4

试试这个

＆＃13;

＆＃13;

.menu-container {
	background-color:#000000;
}

.navbar-brand {position:absolute;margin-top:-60px;}

.navbar-collapse {
    margin-top: 100px;
    margin-left: 120px;
    color: #fff;
}

#nav.affix {
    position:fixed;
    top:0;
    width:100%;
    z-index:10
}

#sidebar.affix-top {
    position:static
}

#sidebar.affix {
    position:fixed;
    top:80px
}

＆＃13;

<div id="nav">
        <div class="navbar navbar-default navbar-static">
            <div class="menu-container">
                <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                <a class="navbar-toggle" data-target=".navbar-collapse"
                data-toggle="collapse"><span class=
                "glyphicon glyphicon-bar"></span> <span class=
                "glyphicon glyphicon-bar"></span> <span class=
                "glyphicon glyphicon-bar"></span></a> <a class="navbar-brand"
                href="#"><img alt="" src=
                "http://placehold.it/150x150&text=Logo"></a>

                <div class="navbar-collapse collapse">
                 <ul>
                     <li>Home</li>
                    </ul>
                </div>
            </div>
        </div><!-- /.navbar -->
    </div>

＆＃13;

＆＃13;

＆＃13;

我在css中添加新类只是检查......

Answer 5

这样的东西？很难准确地说出你想要实现的目标。代码有点草率，但应该这样做。

CSS

html,body{
  margin:0;
  background:#ccc;
}
#cont{
  position:relative;
  width:100%;
  height:150px;
  background:transparent;
}
ul{
  position:relative;
  top:65px;
  width:100%;
  height:20px;
  background:#444;
  margin:0;
  padding:0;
}
li:first-child{
  /*to adjust left spaceing*/
  margin-left:50px;
}
li{
  position:relative;
  display:inline-block;
  top:0;
  width:150px;
  height:20px;
  background:#333;
  line-height:20px;
  text-align:center;
  padding:0;
  margin:0;
}

.elem{
  position:absolute;
  top:0;
  width:100%;
  height:20px;
  background:#333;
}

.logo{
  top:-65px !important;
  height:150px !important;
  line-height:150px;
  overflow:hidden;
}

.elem:hover{
  top:-65px !important;
  height:150px !important;
  line-height:150px;  
}

HTML

<div id="cont">
  <ul id="bar">
     <li>
       <div class="elem logo">
         <img src="http://www.battleoftastings.com/wp-content/uploads/2013/03/seafood-placeholder150x150px.png"/>
       </div>
     </li>
     <li>
       <div class="elem">
         Home
       </div>
     </li>
     <li>
       <div class="elem">
        About
       </div>
     </li>
     <li>
       <div class="elem">
        Contact
       </div>
     </li>
  </ul>
</div>

实施例： CodePen