Flexbox and Bootstrap How to Put Image in Navbar Brand Area


Tags: html,css,twitter-bootstrap,css3

Problem :

I have a project where I have used a bootstrap navbar but broken it up into flexboxes in order to align the various parts per specification. I want to put a logo in the far left corner of the navbar, where navbar-brand is usually given, but I'm having no luck getting an image to show. The best I can do is get an image placeholder icon to show. Attached is an image of the navbar as it stands now. project navbar The following is the HTML 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-->

The pertinent .css is

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've tried setting the brand logo to be an image in the HTML, a background image in the CSS, nothing. I can put text into the navbar-brand and set it's color, but I'm having no luck with my logo image. What can I try next?



Solution :

The problem seems to be with the relative path you are using for the image.

If you use an image with an absolute URL it works fine. Try this to see what I mean:

<div class="navbar-brand">
    <!--<a class="navbar-brand" href="#">-->
    <img src="http://i.imgur.com/60PVLis.png" alt="" class="navbar-brand sst-image">
    <!--</a>-->
</div>

If you want to use a relative path, you need to make sure it's leading to the folder that contains the image. In your CSS the path is ../images/SST.jpg, but in your HTML the path is images/SST.jpg. You need to find the right path.

As a side note, keep in mind that <img> is a void element. No closing tag is required. You can remove the </img>.


    CSS Howto..

    How to only make the opacity lower for the background and not the text in it?

    How to modify CSS when requirements change?

    How quora put that image on their home page? [closed]

    How to use inline css styling (style=“vertical-alignment:middle;”) in html5 or