徽標圖像溢出菜單欄

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不同的值打調整的標誌。