Highlighted

Center Brand inline with drop down menus.

New Here ,
Feb 12, 2018

Copy link to clipboard

Copied

Screen Shot 2018-02-12 at 09.36.24.png

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;

}

Views

195

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Center Brand inline with drop down menus.

New Here ,
Feb 12, 2018

Copy link to clipboard

Copied

Screen Shot 2018-02-12 at 09.36.24.png

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;

}

Views

196

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 12, 2018 0
Adobe Community Professional ,
Feb 12, 2018

Copy link to clipboard

Copied

Moved to the Dreamweaver forum where it will get more viewers.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 12, 2018 0