CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
ko_ma
ko_ma

Reputation: 1021

How can I center bootstrap navbar menus in mobile web?

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.navhome {
  padding-right: 50px;
}

.navbar {
    text-align: center;

}

.container-fluid {
    display: inline-block;
}
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <ul class="nav navbar-nav">
          <li class="active navhome"><a href="#">Home</a></li>
          <li><a href="#">Menu1</a></li>
          <li><a href="#">Menu2</a></li>
          <li><a href="#">Menu3</a></li>
        </ul>
    </div>
  </nav>

I'm having trouble centering bootstrap navbar. it succeed in desktop browser, but the navigation bar appears vertically in mobile browser. and home button is also strange in mobile. I hope to align it horizontally in mobile web. Any help would be appreciated! mobile page

Upvotes: 1

Views: 1915

Answers (1)

Rithwik
Rithwik

Reputation: 1198

This is what is causing issues with alignment - .navhome { padding-right: 50px; }

If you want to keep the padding for big screens only you can add a media query. So this will ensure that the padding is added only for screens sizes bigger than 768px.

@media (min-width:768px){
  .navhome {
    padding-right: 50px;
  }
}

Working example: 

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

@media (min-width:768px) {
  .navhome {
    padding-right: 50px;
  }
}

.navbar {
  text-align: center;
}

.container-fluid {
  display: inline-block;
}
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active navhome"><a href="#">Home</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu2</a></li>
      <li><a href="#">Menu3</a></li>
    </ul>
  </div>
</nav>

Upvotes: 1

Related Questions