Center Align the navbar after screen size is reduced and on button pressed

Question

I an new to HTML/CSS and I am creating a webpage with a responsive navigation bar on the top. The problem I am facing is that when the navbar is collapsed and the button is pressed, the navbar-items are aligning on the left side of the opened navigation menu. I want the items to be aligned to center on the menu. I searched so much on SO and W3schools, but I couldn't get a solution to my problem.

Here is my HTML code I am using:

<html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="CSS/stylesheet.css">
  <title>
    My Personal Portfolio
  </title>
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><strong>Vatsal Sura</strong></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav nav-pills navbar-nav navbar-right">
          <li class="nav-item active"><a class="nav-link" href="#">ABOUT</a></li>
          <li class="nav-item "><a class="nav-link" href="#">MY PORTFOLIO</a></li>
          <li class="nav-item"><a class="nav-link" href="#">CONTACT ME</a></li>
        </ul>
      </div>
    </div>
  </nav>
</body>
</html>

Here is an image of the webpage when it is first loaded on large screen:

And here is another image when the browser is minimized and the navigation bar is collapsed:

And when the button is clicked, the navbar is opened below the original one and the items are aligned to the left-side, but I want them to be aligned to center of the navigation bar.

P.S.: Here I want the nav-items to be right aligned at first when it is not collapsed, but I want them to be center aligned when they are collapsed. Any help would be appreciated. Thank you.

From your code I see all you need is to text-align: center; in the media query. What doesn't work? — Madalina Taina, Aug 07 '16 at 12:43
Check what class gets applied to the collapsed items and set `text-align : center;` for the additional class that gets applied — Vandesh, Aug 07 '16 at 12:45
@MadalinaTaina How can I achieve that? I am really new to that, so I don't know what to do. Can you show me how to do that? — VatsalSura, Aug 07 '16 at 12:48
@VatsalSura https://css-tricks.com/centering-css-complete-guide/ — Madalina Taina, Aug 07 '16 at 12:52

ankitjain11 · Accepted Answer · 2016-08-07T13:22:56.627

4

you can try adding the following CSS:

.navbar-collapse.collapse.in ul{ 
  text-align: center;
}

The .in class is added by bootstrap, when un-collapsing the navigation. Also, please make sure, that li are displayed inline or inline-block.

EDIT 1: I guess, its because, of the navbar-right class in ul

.navbar-collapse.collapse.in ul.nav{ 
  text-align: center !important; // Try to remove the important part.
}

Can you also, check developer tools to check if the classes are correct and the style is being overiden or not?

Edit 2:

Add this to your CSS:

.navbar-collapse.collapse.in ul{
  text-align: center;
  vertical-align: middle;
}
.nav-pills>li {
  float: none;
  display: inline-block;
}

edited Aug 07 '16 at 13:22

answered Aug 07 '16 at 12:49

ankitjain11

253
2
16

can you do a fiddle? – ankitjain11 Aug 07 '16 at 12:58
Yeah, thank you. But is it possible that the transition doesn't happen when we click on the button. As it is showing first on left side then coming to the center. – VatsalSura Aug 07 '16 at 13:29
I figured that out and updated your answer. Thank you. – VatsalSura Aug 07 '16 at 13:39

score 3 · Answer 2 · edited May 23 '17 at 12:14

If you want to make your website completely responsive, then you should write different css rules for different screen sizes...

/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */

@media only screen and (min-width : 321px) {
/* Styles */
}


/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* Desktops and laptops ----------- */

@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

Refer to this question for more information : CSS media queries for screen sizes

Center Align the navbar after screen size is reduced and on button pressed

2 Answers2