Issue designing bootstrap nav bar - html

Question

We are designing a new website, and the designer has created the nav bar as follows, you can see the curve (this is what I'm trying to crack!)
Below is how my current header is
This is my current HTML, I also had to create a new CSS class for the brand so it would appear in the middle of the screen
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href='#Url.Action("Index", "Home")'>LOGO HERE</a>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>PRODUCTS</li>
<li>FLAVOUR LAB</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li>VISIT US ON LIFE INVADER</li>
</ul>
</div>
</div>
</nav>
And the css is as follows
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
When I create a test image and try to apply the style i.e back ground image I get the following output, as you can see the logo with the curve half shows and appears to the left hand side of the screen.
The updated CSS
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
background-image: url('/Content/Images/TempLogoExample.png');
background-repeat: no-repeat;
z-index: 9999;
}
I've attached a test Image for anyone that feels they want to have a go at it, any solution/advice would be highly appreciated.

Answer 1

It appears on the left corner because you have set Left:0. try changing that using percentage mark. Eg:- left: 45%;will work in your case. if not try changing the percentage value.

Answer 2

I Recommend to go with a different markup approach to achieve this. Why can't you use columns grid in the main section and then bring your designs internally. Below markup will help you to acheive this.
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<div class="col-xs-4">
<ul class="nav navbar-nav navbar-left">
<li>PRODUCTS</li>
<li>FLAVOUR LAB</li>
</ul>
</div>
<div class="col-xs-4">
<a class="navbar-brand" href='#Url.Action("Index", "Home")'>LOGO HERE</a>
</div>
<div class="col-xs-4">
<ul class="nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li>VISIT US ON LIFE INVADER</li>
</ul>
</div>
</div>