[null, null, {"document_url": "https://codedump.io/share/h0od4tiHfC8D/1/center-align-the-navbar-after-screen-size-is-reduced-and-on-button-pressed", "unformatted_src": "http://i.stack.imgur.com/xxzyA.png", "src": "http://i.stack.imgur.com/xxzyA.png", "formatted_filename": "xxzyA", "alt_text": "Webpage on large screen"}, null, {"document_url": "https://codedump.io/share/h0od4tiHfC8D/1/center-align-the-navbar-after-screen-size-is-reduced-and-on-button-pressed", "unformatted_src": "http://i.stack.imgur.com/LwWw8.png", "src": "http://i.stack.imgur.com/LwWw8.png", "formatted_filename": "LwWw", "alt_text": "With Collapsed nav-bar"}, null, {"document_url": "https://codedump.io/share/h0od4tiHfC8D/1/center-align-the-navbar-after-screen-size-is-reduced-and-on-button-pressed", "unformatted_src": "http://i.stack.imgur.com/0k6uk.png", "src": "http://i.stack.imgur.com/0k6uk.png", "formatted_filename": "k uk", "alt_text": "Left-aligned nav-bar"}, null, null]
VatsalSura - 2 years ago 208
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:

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
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. 
you can try adding the following CSS:

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

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:

Email codedump link for Center Align the navbar after screen size is reduced and on button pressed

