Logo and text boot navigator

Question

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

When it switches to XS, I need the logo and text to remain on the same line. Thus, I made the logo image transparent PNG with full width (to hold the column in place) and tried to add text to the right of the logo (still above the transparent part), but I can’t figure it out.

Any help would be great. Here is the code:

<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 collected you a violin. I included the logo and name inside the navigator. The key was adding the pull-left class to 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; }