html - Logo 图像溢出菜单栏

Question

我很难让 Logo 图像(红色)溢出菜单栏，目前菜单栏在添加 Logo 后会扩展(参见图像)。

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;}

有人可以帮助我如何让 Logo 溢出菜单。提前致谢!

Answer 1

试试这个

.pix_nav_logo { 
  position: absolute;
}

您可以通过为 .pix_nav_logo 使用不同的 css 属性 left 和 right 值来调整 Logo 。