徽标图像溢出菜单栏

Question

我很难让徽标图像（红色）溢出菜单栏，一旦添加徽标（请参阅图像），当前菜单栏会扩展。

的HTML代码：

<div id="page" class="page"> 

    <div class="pixfort_normal_1" id="section_header_2_dark"> 
    <div class="header_nav_1 dark pix_builder_bg" style="background-image: none; background-color: rgb(13, 52, 64); padding-top: 0px; padding-bottom: 0px; box-shadow: none; border-color: rgb(255, 255, 255); background-size: auto; background-attachment: scroll; background-repeat: repeat;"> 
     <div class="container">    
      <div class="sixteen columns firas2"> 
       <nav role="navigation" class="navbar navbar-white navbar-embossed navbar-lg pix_nav_1">     
        <div class="containerss"> 
         <div class="navbar-header"> 
          <button data-target="#navbar-collapse-02" data-toggle="collapse" class="navbar-toggle pix_text" type="button"> 
           <span class="sr-only ">Toggle navigation</span> 
          </button> 
          <img src="images/LOGO1.png" class="pix_nav_logo">    
         </div> 

         <div id="navbar-collapse-02" class="collapse navbar-collapse"> 
          <ul class="nav navbar-nav navbar-right"> 
           <li class="active propClone"><a href="#">Home</a></li> 
           <li class="propClone"><a href="#">About</a></li> 
           <li class="propClone"><a href="#">Workshops and Training</a></li> 
           <li class="propClone"><a href="#">Contact</a></li> 
          </ul> 
         </div><!-- /.navbar-collapse --> 

        </div><!-- /.container --> 
       </nav> 
      </div> 
     </div><!-- container --> 
    </div> 
</div> 

CSS代码：

.pix_nav_1 ul li a { 
color: rgba(0, 0, 0, 0.5); 
-webkit-transition: all 0.2s linear; 
-moz-transition: all 0.2s linear; 
-ms-transition: all 0.2s linear; 
-o-transition: all 0.2s linear; 
}; 
.pix_nav_1 ul li a:hover { 
//color: rgba(0,0,0,0.85); 
opacity: 0.6; 
} 
.header_nav_1 { 
padding: 0px !important; 
box-shadow: none; 
} 
.pix_nav_logo { 
background: url(../images/t_logo.png) no-repeat; 
padding-top: 0px; 
overflow: visible; 
} 
.navbar-center {margin-left: auto;margin-right: auto;float: none;position: 
relative;text-align: center; } 
.navbar-center li { text-align: center;float: none;display: inline-block;} 

可能有人请帮助我我怎样才能标志溢出菜单。提前致谢！

Answer 1

position: absolute：该元素相对于其第一个定位的（不是静态的）祖先元素进行定位。菜单的

.pix_nav_logo { 
    background: url(../images/t_logo.png) no-repeat; 
    padding-top: 0px; 
    overflow: visible; 
    width: 100px; // This for your logo size 
    position: absolute; // This is absolute position of logo 
} 

.pix_nav_1 ul li a { 
 
    color: rgba(0, 0, 0, 0.5); 
 
    -webkit-transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
} 
 

 
; 
 
.pix_nav_1 ul li a:hover { 
 
    //color: rgba(0,0,0,0.85); 
 
    opacity: 0.6; 
 
} 
 

 
.header_nav_1 { 
 
    padding: 0px !important; 
 
    box-shadow: none; 
 
} 
 

 
.pix_nav_logo { 
 
    background: url(../images/t_logo.png) no-repeat; 
 
    padding-top: 0px; 
 
    overflow: visible; 
 
    width: 100px; 
 
    position: absolute; 
 
} 
 

 
.navbar-center { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    float: none; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
.navbar-center li { 
 
    text-align: center; 
 
    float: none; 
 
    display: inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 

 

 
<div id="page" class="page"> 
 

 
    <div class="pixfort_normal_1" id="section_header_2_dark"> 
 
    <div class="header_nav_1 dark pix_builder_bg" style="background-image: none; background-color: rgb(13, 52, 64); padding-top: 0px; padding-bottom: 0px; box-shadow: none; border-color: rgb(255, 255, 255); background-size: auto; background-attachment: scroll; background-repeat: repeat;"> 
 
     <div class="container"> 
 
     <div class="sixteen columns firas2"> 
 
      <nav role="navigation" class="navbar navbar-white navbar-embossed navbar-lg pix_nav_1"> 
 
      <div class="containerss"> 
 
       <div class="navbar-header"> 
 
       <button data-target="#navbar-collapse-02" data-toggle="collapse" class="navbar-toggle pix_text" type="button"> 
 
           <span class="sr-only ">Toggle navigation</span> 
 
          </button> 
 
       <img src="http://www.hjmt.com/blog/wp-content/uploads/2012/08/Logo_TV_2015.png" class="pix_nav_logo"> 
 
       </div> 
 

 
       <div id="navbar-collapse-02" class="collapse navbar-collapse"> 
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li class="active propClone"><a href="#">Home</a></li> 
 
        <li class="propClone"><a href="#">About</a></li> 
 
        <li class="propClone"><a href="#">Workshops and Training</a></li> 
 
        <li class="propClone"><a href="#">Contact</a></li> 
 
       </ul> 
 
       </div> 
 
       <!-- /.navbar-collapse --> 
 

 
      </div> 
 
      <!-- /.container --> 
 
      </nav> 
 
     </div> 
 
     </div> 
 
     <!-- container --> 
 
    </div> 
 
    </div>

Answer 2

试试这个

.pix_nav_logo { 
    position: absolute; 
} 

您可以通过与左CSS属性和正确的.pix_nav_logo不同的值打调整的标志。