Logo image to overflow menu bar - html

Question

I am having difficulty getting the logo image (red) to overflow the menu bar, currently the menu bar is extended once the logo is added (see the image).
The HTML Code:
<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">Home</li>
<li class="propClone">About</li>
<li class="propClone">Workshops and Training</li>
<li class="propClone">Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
</div>
</div><!-- container -->
</div>
</div>
The CSS Code:
.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;}
Could someone please assist me to how I can get the logo to overflow the menu. Thanks in advance!

Answer 1

Try this
.pix_nav_logo {
position: absolute;
}
You can adjust the logo by playing with different values for css property left and right for .pix_nav_logo.

Answer 2

position: absolute : The element is positioned relative to its first positioned (not static) ancestor element.
.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">Home</li>
<li class="propClone">About</li>
<li class="propClone">Workshops and Training</li>
<li class="propClone">Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
</div>
<!-- container -->
</div>
</div>