I've been working on a project where I decided to customize the Bootstrap navbar by breaking it up into flexboxes in order to align everything according to the specifications. However, I've encountered an issue while trying to place a logo in the far left corner of the navbar, similar to where the navbar-brand is usually positioned. Despite my attempts, all I can manage to display is an image placeholder icon rather than the actual logo. Please refer to the attached image of the current state of the navbar: https://i.stack.imgur.com/pczxi.gif Below is the HTML code for the navbar:
<div class="container first-container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container navcell flex-navbar">
<div class="navbar-brand">
<!--<a class="navbar-brand" href="#">-->
<img src="images/SST.jpg" class=" navbar-brand sst-image"></img>
<!--</a>-->
</div>
<button class="navitem navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navitem navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navcell navbar-nav">
<li class="active"><a href="#"><span class="navitem glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="navitem glyphicon glyphicon-edit"></span> Services & Rates</a></li>
<li><a href="#"><span class="navitem glyphicon glyphicon-book"></span> Portfolio</a></li>
<li><a href="contactForm.html"><span class="navitem glyphicon glyphicon-user"></span> About/Contact John</a></li>
<li><a href="#"><span class="navitem glyphicon glyphicon-log-in"></span> Log In</a></li>
</ul>
<form class="navcell navbar-form">
<input type="text" class="form-control" placeholder="Search" id="searchinput">
<button type="navbtm submit" class="btn btn-default">
<span class="navitem glyphicon glyphicon-search"></span>
</button>
</input>
</form>
</div><!-- Nav-collapse -->
</div><!-- Container -->
</nav>
</div><!--Container-->
In addition, here is the relevant .css code:
body {
margin-top:50px;
background: url('../images/marble.jpg') no-repeat center top scroll;
}
.container{
width: 100%;
}
.navbar-brand {
background-image: url('../images/SST.jpg') no-repeat;
position: relative;
}
.banner {
font-family: 'atlas_of_the_magiregular', cursive;
font-size: 1.7em;
line-height: 1.3em;
padding: 10px 8px;
margin: 10px 0px;
background-image: url('../images/Sic Semper Scroll.png') no-repeat;
background-position: 50% 50%;
position: relative;
}
I included the banner section in the .css to show how I've implemented the scroll image below the navbar. I have tried multiple methods to display the brand logo as an image in the HTML or CSS background, but nothing seems to work. Although I'm able to add text to the navbar-brand and change its color, the logo image still won't appear. What would you recommend I try next?