Hi all,
I am trying to get the Brand section (MML logo and Home button) to centre and appear inline with the other drop downs.
Thanks in advance.
I have the following code:
<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 class="navbar-brand" href="index.html">Home</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" title="About Us" target="_self" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown">About Us<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="message_md.html" title="Message From The Managing Director" target="_self">Message From Tha Managing Director </a></li>
<li><a href="about_mml.html" title="About MML" target="_self">About MML</a></li>
<li><a href="mml_the_team.html" title="MML's Team" target="_self">The Team</a></li>
<li><a href="experience.html" title="MML's Experience" target="_self">MML's Experience</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" title="Services" target="_self" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="food-preparation.html" title="Food Preparation" target="_self">Food Preparation</a></li>
<li><a href="camp_management.html" title="General Camp Management" target="_self">General Camp Management</a></li>
<li><a href="laundry.html" title="Laundry" target="_self">Laundry</a></li>
<li><a href="housekeeping.html" title="Housekeeping" target="_self">Housekeeping</a></li>
<li><a href="janitorial_services.html" title="Janitorial Services" target="_self">Janitorial Services</a></li>
<li><a href="gardening.html" title="Gardening" target="_self">Gardening</a></li>
<li><a href="camp_maintenance.html" title="Camp Maintenance" 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" title="Social and Economic Contributions" target="_self">Social and Economic Contributions</a></li>
<li><a href="preference_for_tanzanian_provider.html" title="Preference For Tanzanian and Local Providers" target="_self">Preference For Tanzanian and Local Providers</a></li>
<li><a href="sustainable_development.html" title="Sustainable Development" target="_self">Sustainable Development</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" title="Client Assurance" target="_self" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown">Client Assurance<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="statement_of_policy.html" title="Statement Of Policy" target="_self">Statement Of Policy</a></li>
<li><a href="food_safety_quality.html" title="Food Safety and Quality Assurance Policy" target="_self">Food Safety and Quality Assurance Policy</a></li>
<li><a href="health_and_safety.html" title="Health, Safety and Environment Policy" target="_self">Health, Safety and Environment Policy</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
CSS:
.navbar-brand {
background-repeat: no-repeat;
background-image: url(../images/mml_logo.svg);
padding-left: 210px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
}
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav>li {
display: inline-block;
float:none;
}
1
Reply
AdChoices