William Grimsley William Grimsley - 1 month ago 5
CSS Question

Center Bootstrap Menu Bar

I've been trying to tackle this for hours, but I can't understand how to get my menu bar to center, I've tried applying different margins and paddings but obviously that won't center on all devices.

Here is the page showing the menu bar: http://newton-poppleford-weather.co.uk/index.htm

I don't want to paste in the scripts as they are huge, but please could someone give me a hint as to where I should be looking and if I should remove any margins I've set?

Thanks,

William

Answer

Okay, I hope this works for you.

Add this to your custom styles:

.navbar-nav {
  float: none;
 }

.navbar-toggle { 
  position: absolute; 
  float: none;
  right: 15px;
  margin-right: auto;
}    

@media screen and (min-width: 768px){
  .navbar-nav > li {
    display: inline-block; 
    float: none;
  }
}

Then amend your HTML by doing the following:

  • add hidden-sm hidden-md hidden-lg to navbar-header
  • add <li class="hidden-xs"><a href="index.htm">Newton&nbsp;Poppleford&nbsp;Weather</a></li> within navbar-collapse

so your HTML should look like this:

<div class="navbar-header hidden-sm hidden-md hidden-lg">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle&nbsp;navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="index.htm">Newton&nbsp;Poppleford&nbsp;Weather</a>
</div>
<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav" id="main-nav">
    <li class=""><a href="index.htm">Newton&nbsp;Poppleford&nbsp;Weather</a></li>
    <li class="active"><a href="index.htm" data-toggle="tab" data-tab-url="index.htm">Now</a></li>
       <li><a id="click-today" href="today.htm" data-toggle="tab" data-tab-url="today.htm">Today</a></li>
    <li><a id="click-yesterday" href="yesterday.htm" data-toggle="tab" data-tab-url="yesterday.htm">Yesterday</a></li>
    <li><a id="click-thismonth" href="thismonth.htm" data-toggle="tab" data-tab-url="thismonth.htm">This&nbsp;Month</a></li>
    <li><a id="click-thisyear" href="thisyear.htm" data-toggle="tab" data-tab-url="thisyear.htm">This&nbsp;Year</a></li>
    <li><a id="click-records" href="records.htm" data-toggle="tab" data-tab-url="records.htm">Records</a></li>
    <li><a id="click-trends" href="trends.htm" data-toggle="tab" data-tab-url="trends.htm">Trends</a></li>
  </ul>
</div><!--/.nav-collapse -->
Comments