Skip to main content
D
DBSilk
Known Participant
February 6, 2018
Answered

Centering Bootstrap Navbar

  • February 6, 2018
  • 1 reply
  • 3948 views

I followed Jim Maivald's book in setting up my Bootstrap Navbar. I got most of it to work, but have not succeeded in centering the navbar. (I couldn't get it to wok in the tutorial either--perhaps there is a mistake there.) Can anyone help?

The page is the home page ("index") of Dominiquebello.com

This topic has been closed for replies.
Correct answer Nancy OShea

If you want a dark background, use navbar-inverse instead of navbar-default. 

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap Centered Navbar</title>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

body {

    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

    background-color: #000;

    color: #FFF;

}

h1 {font-weight: 500}

/**CSS for centered navigation**/

@media (min-width: 768px) {

.navbar-nav { float: none; }

.nav.navbar-nav {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

}

}

</style>

</head>

<body>

<div class="container">

<header class="row">

<div class="col-xs-12">

<h1 class="text-center">Dominique Bello   <em>Silk Art</em></h1>

</div>

</header>

<div class="row">

<!--begin top nav bar-->

<nav class="navbar navbar-inverse" role="navigation">

<div class="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>

</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav">

<li class="active"><a href="#">HOME</a></li>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Galleries<span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="abayas.html">Abayas</a></li>

<li><a href="coats.html">Coats</a></li>

<li><a href="jackets.html">Jackets</a></li>

<li><a href="kimonos.html">Kimonos</a></li>

<li><a href="forthesakeofart.html">For the Sake of Art</a></li>

</ul>

</li>

<li ><a href="contact.html">Contact</a></li>

</ul>

</div>

</div>

</nav>

</div>

</div>

<!--Latest compiled & minified jQuery 3 JS-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Latest compiled & minifed Bootstrap JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
February 6, 2018

If you want a dark background, use navbar-inverse instead of navbar-default. 

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap Centered Navbar</title>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

body {

    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

    background-color: #000;

    color: #FFF;

}

h1 {font-weight: 500}

/**CSS for centered navigation**/

@media (min-width: 768px) {

.navbar-nav { float: none; }

.nav.navbar-nav {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

}

}

</style>

</head>

<body>

<div class="container">

<header class="row">

<div class="col-xs-12">

<h1 class="text-center">Dominique Bello   <em>Silk Art</em></h1>

</div>

</header>

<div class="row">

<!--begin top nav bar-->

<nav class="navbar navbar-inverse" role="navigation">

<div class="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>

</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav">

<li class="active"><a href="#">HOME</a></li>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Galleries<span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="abayas.html">Abayas</a></li>

<li><a href="coats.html">Coats</a></li>

<li><a href="jackets.html">Jackets</a></li>

<li><a href="kimonos.html">Kimonos</a></li>

<li><a href="forthesakeofart.html">For the Sake of Art</a></li>

</ul>

</li>

<li ><a href="contact.html">Contact</a></li>

</ul>

</div>

</div>

</nav>

</div>

</div>

<!--Latest compiled & minified jQuery 3 JS-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Latest compiled & minifed Bootstrap JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea— Product User & Community Expert
D
DBSilkAuthor
Known Participant
February 7, 2018

Thanks, Nancy. I've made most of the changes, as I understood them, and they mainly work: that is, at normal computer widths the navbar is centered. I still have two problems

1.For narrower screens, it isn't centered

2. And for very narrow screens the colors of the menu items are lost (perhaps reverting to the bootstrap default)?

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
February 7, 2018

Centering  is a desktop design thing.  It rarely if ever works well  when real estate is limited.

I intentionally put centering in a media query for devices over 768px wide.   If you really think  you want centered links on mobiles, remove the media query. 

Evidently, you styled your navbar using the default class. 

Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices