VatsalSura VatsalSura - 1 year ago 107
CSS Question

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

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

is collapsed and the button is pressed, the
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:

<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="CSS/stylesheet.css">
My Personal Portfolio
<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>
<a class="navbar-brand" href="#"><strong>Vatsal Sura</strong></a>
<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>

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

And here is another image when the browser is minimized and the navigation bar is collapsed:
With Collapsed nav-bar

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.
Left-aligned nav-bar

P.S.: Here I want the
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.

Answer Source

you can try adding the following CSS: 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 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: ul{
  text-align: center;
  vertical-align: middle;
.nav-pills>li {
  float: none;
  display: inline-block;