Copy link to clipboard
Copied
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
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-BVYiiSIFeK1d
...Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
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)?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
OK on the centering issue.
On the colors, I removed the centering CSS code, and the colors came back in small media. Then I reinstalled it, and the colors were fine. Perhaps I had somehow made a mistake when I first copied your centering CSS code.
So I guess we are set--thanks very much.
Now I have to get to the galleries, using Fancybox with Bootstrap
Copy link to clipboard
Copied
I realized that I had not changed line 72 to include the correct language (class="active" etc.)
I have now done that, but for some reason I cannot upload the corrected page, so the link doesn't work. Any thoughts on what I might be forgetting about uploading?
Copy link to clipboard
Copied
This helped me today when trying to get a BootStrap NAV component centered into an editable Template. Nice community work!