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 include display:block in css code that includes pseudo element 'before'

    how to simulate mouse hover on image in css

    How to improve the way I use Textmate for Ruby on Rails, HTML, CSS and Javascript?

    How to display loading.gif at the center of the screen which has a scrollbar

    How do I get IE to display CSS DIV tables properly?

    How to float a word next to animated text

    How to draw heart using HTML/CSS table?

    Why not show class css in email when using mail() php send mail to gmail?

    How to let the user choose a page number?

    How to design a web page with multiple color panes without tables [duplicate]

    How to add style/css to a simple jQuery accordion?

    How to make an element have a 'hover' effect (CSS) while hovering another element using jQuery?

    How to apply :hover on :after to certain div in CSS

    How do I put these on the same line?

    How can I make sure redundant

    tags do not break styling?

    responsive CSS - How to I make padding adjust automatically when visiting my site with an iPhone?

    How to build a completely static multipage website with BEM?

    How to put Facebook and Twitter buttons next to each other?

    CSS how to make a fixed height?

    How to override some CSS class settings

    js Find Class Within Div + toggle CSS/Hide One Show Other

    How to set column width for DataTables

    How to override the width property in css [closed]

    How to make a curved triangle speech bubble with pseudo-elements?

    How does CSS height get applied to input fields?

    How to remove an invisible space between div tags

    Progress Bar in jquery showing reverse animation

    How to set the default font in Google Closure Library rich text editor

    How to make a bootstrap modal fade in from the bottom?

    How to interpret HTML multiple class names in the CSS renderization? What W3C says about it?