How To Align Center Twitter Bootstrap Nav Bar Menu. Bootstrap Navbar Center
This is very big problem to center a nav menu of twitter bootstrap. I have created a complete centered aligned navbar so you can copy its code and paste where you want Bootstrap Navbar Center.
Just follow these simple steps
Css Style of center align nav bar
Css Style of center align nav bar
#main_menu{ text-transform: uppercase; margin: 0px; } #main_menu.navbar-default .navbar-brand { color: rgba(119, 119, 119, 1); } #main_menu.navbar-default { font-size: 17px; background-color: rgba(0, 0, 0, 1); border-width: 0px; border-radius: 0px; } #main_menu.navbar-default .navbar-nav{ float:none; margin: 0 auto; display: table; table-layout: fixed; } #main_menu.navbar-default .navbar-nav > li{ color: red; } #main_menu.navbar-default .navbar-nav>li>a { font-stretch: expanded; font-size: 18px; font-family: "Lighter-Font"; color: rgba(255, 255, 255, 1); background-color: rgba(248, 248, 248, 0); line-height: 35px; border-radius: 0px 0px 5px 5px; } #main_menu.navbar-default .navbar-nav>li>a:hover, #main_menu.navbar-default .navbar-nav>li>a:focus { color: rgba(255, 255, 255, 1); background-color: rgba(94, 180, 255, 1); } #main_menu.navbar-default .navbar-nav>.active>a, #main_menu.navbar-default .navbar-nav>.active>a:hover, #main_menu.navbar-default .navbar-nav>.active>a:focus { color: rgba(255, 255, 255, 1); background-color: rgba(94, 180, 255, 1); border-radius: 0px 0px 5px 5px; } #main_menu.navbar-default .navbar-toggle { border-color: #5eb4ff; } #main_menu.navbar-default .navbar-toggle:hover, #main_menu.navbar-default .navbar-toggle:focus { background-color: #5eb4ff; } #main_menu.navbar-default .navbar-toggle .icon-bar { background-color: #5eb4ff; } #main_menu.navbar-default .navbar-toggle:hover .icon-bar, #main_menu.navbar-default .navbar-toggle:focus .icon-bar { background-color: #000000; }HTML for bootstrap center aligned menu
How To Align Center Twitter Bootstrap Nav Bar Menu. Bootstrap Navbar Center
Reviewed by Awais
on
01:21
Rating: