Bootstrap navbar with logo and text

Question

I'm trying to create a boostrap navbar with a small square logo on the left, text (company name) to the right, and then navbar on far right. Here's code so far, I just can't figure out how to add the text.

When it goes down to XS, I need the logo and text to remain on the same line. So, I made the logo image a full width transparent PNG (to hold the column in place) and tried to add text to the right of the logo (still over the transparent part) but I can't figure this out.

Any help would be great. Here's code so far:

    <div class="header">
        <div class="container">
            <div class="row">

                <div class="col-md-5 col-sm-5">
                
                                <div class="logo"><div style="height:50px; width:150px; position:absolute; border:solid 1px red;"></div><a href="<?php echo 		site_url(); ?>/"><img src="<?php echo get_template_directory_uri(); ?>/images/logo_small.png"
                                class="img-responsive"></a></div>
                                
                </div>
                <div class="col-md-7 col-sm-7 hidden-xs">

                    <!-- Navbar Start Here -->
                    <div role="navigation" class="navba-r navbar-default">
                        <div class="navbar navbar-default" role="navigation">
                            <div class="navbar-header">
                                <a class="navbar-brand" href="#"></a>
                            </div>
                            <nav role="navigation" class="collapse navbar-collapse navbar-left">
                                <ul class="navbar-nav nav aa">
                                    <li><a href="javascript:bookmarkscroll.scrollTo('company')">COMPANY</a></li>
                                    <li><a href="javascript:bookmarkscroll.scrollTo('people')">PEOPLE</a></li>
                                    <li><a href="javascript:bookmarkscroll.scrollTo('patient')">PATIENTS</a></li>
                                    <li><a href="javascript:bookmarkscroll.scrollTo('contact')">CONTACT</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <!-- Navbar End Here -->
                </div>
            </div>
        </div>
    </div>

Answer 1

I put together a fiddle for you. I included the logo and title inside the nav. The key was adding the class pull-left to the href around the image.

https://jsfiddle.net/msm6jozL/7/

<div class="container">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="logo pull-left" href="#"><img src="https://placehold.it/150x30"></a>
        <span class="name pull-left">COMPANY NAME</span>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">COMPANY</a></li>
          <li><a href="#">PEOPLE</a></li>
          <li><a href="#">PATIENTS</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>


.logo {
  padding: 10px 10px 0 10px;
}

.name {
  font-size: 14px;
  color: #333;
  padding-top: 15px;
}