Highlighted

Centering Bootstrap Navbar

New Here ,
Feb 06, 2018

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

TOPICS
Create menus in Dreamweaver

Views

2.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Centering Bootstrap Navbar

New Here ,
Feb 06, 2018

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

TOPICS
Create menus in Dreamweaver

Views

2.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 06, 2018 0
Adobe Community Professional ,
Feb 06, 2018

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>

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2018 1
New Here ,
Feb 07, 2018

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)?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 07, 2018 0
Adobe Community Professional ,
Feb 07, 2018

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. 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 07, 2018 1
New Here ,
Feb 07, 2018

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 07, 2018 0
New Here ,
Feb 11, 2018

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 11, 2018 0
LEGEND ,
May 30, 2018

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 30, 2018 0