We're in the process of crafting a fresh new website, and our designer has put together a navigation bar with a unique curve that has left us scratching our heads!
Here's a look at our current header setup:
This is the current HTML code for our header, along with the new CSS class for the brand to center it on 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><a href="#">PRODUCTS</a></li>
<li><a href="#">FLAVOUR LAB</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">OUR STORY</a></li>
<li><a href="#">VISIT US ON LIFE INVADER</a></li>
</ul>
</div>
</div>
</nav>
Below is the CSS styling for the navbar brand:
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
After updating the CSS with a background image, here's how the output looks like with the logo appearing to the left:
Updated CSS with background image:
.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;
}
If anyone wants to take a crack at solving this design challenge, feel free to take a look at the test image provided. Any solutions or advice would be greatly appreciated!