how do I vertically align the logo.png and the text

Question

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="container">
       <a class="navbar-brand wrapText" href="#stage"><span><img src="img/icon.png" width="24px"/>&nbsp;SCOTTIESCOTSMAN</span></a>
            <button class="navbar-toggle" data-toggle ="collapse" data-target = "mainNavBar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
       <div class="collapse navbar-collapse" id="mainNavBar">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item">
                    <a class="nav-link" href="#about">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#service">SERVICES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#project">PROJECTS</a>
                </li>              
                <li class="nav-item">
                    <a class="nav-link" href="#blog">BLOG</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

how do I vertically align the logo.png and the text ...and my icon bars don't work as in no menu appears on click. ... sorry newbie :)

Answer 1

If you want your image to be the background for your text you can just set the image to be the background for the .navbar-brand and then set the size in your css like so:

.navbar-brand{
  background:url('http://placehold.it/25x25');
  background-position:center;
  background-repeat:no-repeat;
  background-size: 24px 24px;
}

Here is a fiddle to show you this in action Fiddle Demo

If you want your text and image to appear like they are on the same line like your image is bigger than the text add a line height to the image like so:

.navbar-brand img{
  width:24px;
  line-height:50px;
  display:inline-block;
}

Here is a fiddle for that Fiddle Demo

Also your missing a div in your navbar you should have the navbar-brand and the the responsive button wrapped in a div called navbar-header. Then to get your menu to open your data-target in your button should read #mainNavbar your missing the #. Your navbar should look like the following:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="container">
     <div class="navbar-header">
       <a class="navbar-brand" href="#stage">SCOTTIESCOTSMAN</a>
            <button class="navbar-toggle" data-toggle ="collapse" data-target = "#mainNavBar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
       </div>
       <div class="collapse navbar-collapse" id="mainNavBar">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item">
                    <a class="nav-link" href="#about">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#service">SERVICES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#project">PROJECTS</a>
                </li>              
                <li class="nav-item">
                    <a class="nav-link" href="#blog">BLOG</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
</nav>