Не удается отобразить логотип моего сайта в одной строке со значком гамбургера

Question

Мой сайт построен с помощью начальной загрузки 3. Мобильная версия рухнула красиво. Он отображал небольшую версию логотипа моего сайта, а затем значок гамбургера в правом углу в первой строке. Некоторые страницы приводили к тому, что гамбургер находился далеко вправо, поэтому я ушел, выровняв его по правому краю, чтобы он выглядел сразу после логотипа. Но это выглядит странно. Поэтому я перенес гамбургер в левый угол. Но теперь на следующей строке появляется логотип, который также выглядит невнятным. Я переместил изображение в коде и посмотрел на CSS (что является для меня большим недостатком), но я просто не могу его взломать. Поэтому я ищу идеи, пожалуйста.

<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"  -->

Answer 1

Если я правильно вас понимаю, что вы хотели бы, чтобы ваш гамбургер располагался слева от .navbar-brand, а в остальном вроде как по умолчанию, я думаю, что это должно вам помочь.

    <style type="text/css">
      .navbar-toggle {
        float: left;
        margin-right: 0;
        margin-left: 15px;
      }
    </style>

float: left отменяет значение по умолчанию float: right.margin-right: 0 и margin-left: 15px переключают 15 пикселей поля с правой стороны кнопки, а не с левой стороны, где она находится по умолчанию.

Убедитесь, что ваш значок гамбургера находится в .navbar-headerперед элементом .navbar-brand, чтобы сохранить нужный порядок, поскольку .navbar-brand также перемещается влево.

    <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>