Bootstrap navbar toggle icon bar sliding underneath logo in header when resized

Question

I have a bootstrap navbar fixed top that is using the navbar toggle icon bar. When I resize the browser the icon bar is pushed below the logo which makes the nav bar taller, I need it to force the logo to resize because it's using the img-responsive class and keep the navbar 50px tall. I tried setting the wrapper Div to overflow:auto which someone on here suggested in another question but that didnt work.

HTML

 <div style="overflow:auto;">
    <nav class="navbar navbar-default navbar-fixed-top navbar-header-full">

        <div class="header-full-title img-responsive">
            <img src="/Content/img/MTC_logo_header.png" class="img-responsive" />
        </div>
        <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>
        </div>
        <div id="navbar" class="navbar-collapse collapse">


            <ul class=" nav navbar-nav navbar-right">
                <li><a href="#" class="navStyle">OUR STORY</a></li>
                <li><a href="#" class="navStyle">VISIT</a></li>
                <li><a href="#" class="navStyle">DIRECTORY</a></li>
                <li><a href="#" class="navStyle">CONDOS</a></li>
                <li><a href="#" class="navStyle">APARTMENTS</a></li>
                <li class="dropdown">
                    <a href="#" class="navStyle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">EVENTS</a>
                    <ul class="dropdown-menu dropDownMTC pull-right">
                        <li><a href="#">YOGA ROCKS THE PARK</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">MONDAY NIGHT MOVIES</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">HORSES OF HONOR</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">THURSDAY IN THE PARK</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">EVENT SHUTTLE</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">HOLIDAY LIGHTS FESTIVAL</a></li>
                    </ul>
                </li>
                <li><a href="#" class="navStyle">NEWS</a></li>
            </ul>
        </div>
    </nav>
 </div>

I dont want to use the brand class, I need to make it work with the design I have currently. — Sam Cromer
but why? you can also try pull-left class and see if that makes any changes — Rain Man

Ryan Ryan · Accepted Answer · 2018-02-28T16:30:02

Now, if you are talking in terms of the wrapping. Remember that there are often scenarios where things may not look the way you want them to at certain sizes, but the goal is to focus on common screen dimensions as there is a good chance nobody may ever see the issue. You can use Chrome's built-in emulator to test different device dimensions, or a number of web-based utilities.

Secondy, if the header image is intended to be a logo or brand-image, you can always leverage Bootstrap's built-in class

.navbar-brand

Which, in your case would look something like this.

<a href="#" class="navbar-brand">
  <div class="header-full-title">
    <img src="http://via.placeholder.com/100x50" />
  </div>
</a>

Bootstrap navbar toggle icon bar sliding underneath logo in header when resized

HTML

1 Answers