Cannot get my site logo to appear on the same line as the hamburger icon
My site is built with bootstrap 3. The mobile version collapsed nicely. It displayed the small version of my site logo then the hamburger icon in the right corner on the first line. Some pages caused the hamburger to be way off to the right so I left justified it so it appeared strait after the logo. But that looks odd. So I moved the hamburger to the left corner. But, now the logo appears on the next line which also looks naff. I've moved the image around in the code and had a look at the css (which is a big weak point for me) but I just can't crack it. So I'm looking for ideas please.
<div class="container" id="main">
<div class="navbar navbar-custom navbar-fixed-top" role = "navigation">
<div class="container" id="reduce_padding">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <!-- Recommended to allow use of screen readers -->
<span class="icon-bar"></span> <!-- These three lines create the bars in the drop down box in the top right corner that appears when the screen is shrunk for use of mobile phones -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- End div navbar-header -->
<!-- NAVBAR LINKS -->
<div class="navbar-collapse collapse navbar-inner">
<ul class="nav navbar-nav nav-center">
<li><a href="../index.php">Home</a></li>
<li><a href="../bs3/programme.html">Programme</a></li>
<li><a href="../bs3/galleries/member_galleries.php">Galleries</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Competitions <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="../bs3/competitions/current/comp_bill_jenkins_shield.php">Bill Jenkins Shield</a></li>
<li><a href="../bs3/competitions/current/comp_colour_print.php">Colour Print</a></li>
<li><a href="../bs3/competitions/current/comp_creative_digital.php">Creative Digital</a></li>
<li><a href="../bs3/competitions/current/comp_digital_portfolio.php">Digital Portfolio</a></li>
<li><a href="../bs3/competitions/current/comp_monochrome_print.php">Monochrome Print</a></li>
<li><a href="../bs3/competitions/current/comp_panorama_and_letterbox.php">Panorama and Letterbox</a></li>
<li><a href="../bs3/competitions/current/comp_print_challenge.php">Print Challenge</a></li>
</ul>
</li>
<!-- end of dropdown-menu - competitions -->
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us <b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="../bs3/about_us/more_on_the_club.html">More on the Club</a></li>
<li> <a href="../bs3/about_us/contact_us.php">Contact Us</a></li>
<li> <a href="../bs3/about_us/where_we_meet.html">Where We Meet</a></li>
</ul>
</li>
<!-- end of dropdown-menu - about us -->
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Members <b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="../bs3/members/rules_submissions.html">Submission Info</a></li>
<li> <a href="../bs3/members/rules_categories.html">Categories Info</a></li>
<li> <a href="../bs3/members/comp_hand_in_dates.html">Comp. Hand in Dates</a></li>
<li><a href="../bs3/members/comp_judges.html">Competition Judges</a></li>
<li><a href="../bs3/members/photographer_of_the_year.html">Photographer of the Year</a></li>
<li><a href="../bs3/members/roll_of_honour.html">Roll of Honour</a></li>
</ul>
</li>
<!-- end of dropdown-menu - members -->
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Resources <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="../bs3/resources/goshoot.html">Upcoming Shooting Events</a></li>
<li><a href="../bs3/resources/links.html">Useful Links</a></li>
<li><a href="../bs3/resources/how_to_photo_edit.html">Introduction to Photo Editing</a></li>
<li><a href="../bs3/resources/historical_documents.html">Club Archive</a></li>
</ul>
</li>
<!-- end of dropdown-menu - resources -->
</ul>
</div> <!-- End div class="container" id="reduce_padding" -->
<!-- Show the small logo only on mobile devices -->
<a class="navbar-brand visible-xs" href="#"><img src="../bs3/images/gifs/logo_small.gif" alt="Logo"></a>
</div> <!-- End div class="navbar navbar-custom navbar-fixed-top" -->
</div> <!-- End div class="container" id="main" -->
If I'm understanding you rightly, that you would like your hamburger positioned to the left of the .navbar-brand and otherwise like it is by default, I think that this should help you.
<style type="text/css">
.navbar-toggle {
float: left;
margin-right: 0;
margin-left: 15px;
}
</style>
The float: left overrides the default float: right. The margin-right: 0 and margin-left: 15px switch the 15 pixels of margin to the right side of the button instead of the left side where it is by default.
Ensure that your hamburgur icon is placed in the .navbar-header before the .navbar-brand element to preserve the ordering you want since the .navbar-brand is also floated left.
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <!-- Recommended to allow use of screen readers -->
<span class="icon-bar"></span> <!-- These three lines create the bars in the drop down box in the top right corner that appears when the screen is shrunk for use of mobile phones -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="#"><img src="../bs3/images/gifs/logo_small.gif" alt="Logo"></a>
</div>