• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Centering Bootstrap Navbar

New Here ,
Feb 06, 2018 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

Views

3.4K

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
community guidelines

correct answers 1 Correct answer

Community Expert , Feb 06, 2018 Feb 06, 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-BVYiiSIFeK1d

...

Votes

Translate

Translate
Community Expert ,
Feb 06, 2018 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
New Here ,
Feb 07, 2018 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)?

Votes

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
community guidelines
Community Expert ,
Feb 07, 2018 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
New Here ,
Feb 07, 2018 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

Votes

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
community guidelines
New Here ,
Feb 11, 2018 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?

Votes

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
community guidelines
LEGEND ,
May 30, 2018 May 30, 2018

Copy link to clipboard

Copied

LATEST

This helped me today when trying to get a BootStrap NAV component centered into an editable Template. Nice community work!

Votes

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
community guidelines