Bootstrap menu with logo.
Hi,
I have a bootstrap menu with an image, see example here:
mml-tanzania.com/test/
The problem I am having is two-fold:
1) How do I proportionally scale the logo as the browser window reduces past a certain width. (I have both .png and .svg versions of the image)
2) As the browser size reduces past 992 the menu tucks under the image and then it corrects passing 768.
Thanks in advance!
HTML:
<nav class="navbar navbar-default">
<div id="mb-container-fluid-nav" class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>Menu <span class="glyphicon glyphicon-chevron-down"></span>
</button>
<a href="index.html" target="_self" class="navbar-brand">
<img src="images/mml_logo_flag.png" alt="Placeholder image"></a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="message_md.html" target="_self">Message From Tha Managing Director </a></li>
<li><a href="about_mml.html" target="_self">About MML</a></li>
<li><a href="mml_the_team.html" target="_self">The Team</a></li>
<li><a href="experience.html" target="_self">MML's Experience</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="food-preparation.html" target="_self">Food Preparation</a></li>
<li><a href="camp_management.html" target="_self">General Camp Management</a></li>
<li><a href="laundry.html" target="_self">Laundry</a></li>
<li><a href="housekeeping.html" target="_self">Housekeeping</a></li>
<li><a href="janitorial_services.html" target="_self">Janitorial Services</a></li>
<li><a href="gardening.html" target="_self">Gardening</a></li>
<li><a href="camp_maintenance.html" target="_self">Camp Maintenance</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Community<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="social_contributions.html" target="_self">Social and Economic Contributions</a></li>
<li><a href="preference_for_tanzanian_provider.html" target="_self">Preference For Tanzanian and Local Providers</a></li>
<li><a href="sustainable_development.html" target="_self">Sustainable Development </a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Client Assurance<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="statement_of_policy.html" target="_self">Statement Of Policy</a></li>
<li><a href="food_safety_quality.html" target="_self">Food Safety and Quality Assurance Policy</a></li>
<li><a href="health_and_safety.html" target="_self">Health, Safety and Environment Policy</a></li>
</ul>
</li>
</ul>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
CSS:
@charset "UTF-8";
/* Change NavBart colors */
.navbar {
background-color: #FFFFFF;
border-color: #FFFFFF;
padding-left: 15px;
padding-right: 0px;
}
.navbar .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
background-color: #BFBFBF;
}
/* Change Navbar Height */
.navbar {
min-height: 80px;
}
.navbar-brand {
height: 80px;
line-height: 80px;
padding-top: 10px;
padding-left: 0px;
padding-right: 0px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
AdChoices