Bootstrap navigation bar text

Question

I want my head text "PCT Research" on the center.

Here is the code I want to use:

@media (min-width: 768px)
.navbar-header {
     float: none;
}

But it is coming from online bootstrap where online it is: float: right;. I want to override that. How can I do it with online linking of bootstrap?

To see the full view of the nav here is the link: http://codepen.io/Rehman/pen/vOwmNy

Just be sure to call your custom CSS after you've called Bootstrap, then your CSS will override Bootstrap's. — APAD1, Aug 17 '15 at 15:21
@APAD1 i have linked main.css file after the online MDSN Bootstrap does it mean i'm calling it after? if yes then i have done that and its isn't working — Habib Rehman, Aug 17 '15 at 16:21
Thats because your media quey is malformed, you're missing an opening and closing {} — APAD1, Aug 17 '15 at 16:23
@APAD1 if i'm just calling my custom css after then it doesn't work but if i use `!important` it does work. And yea i just removed the media query after important its working fine without that — Habib Rehman, Aug 17 '15 at 16:57
As I mentioned on the other 2 posts, using `!important` is bad practice and should be avoided at all costs and it is certainly not necessary for your issue. The problem, as I mentioned before, is that your media query is malformed. If you fix the media query and load your custom CSS after Bootstrap then it will work just fine. — APAD1, Aug 17 '15 at 16:59
right...i have changed the linking after and it worked as well. THANKS alot — Habib Rehman, Aug 17 '15 at 17:16

Alexis B. · Accepted Answer · 2015-08-17T15:54:12.940

0

To override this kind of bootstrap element, you should use the !important like following:

@media (min-width: 768px){
  .navbar-header {
    float: none !important;
  }
}

It's actually working by doing this in your pen, as far as you also don't forget the { } to your @media declaration.

You can find more information about the !important in the great article from Chris Coyier on CSS Tricks: When Using !important is The Right Choice.

EDIT:

Considering the comment of @APAD1 and in complement to the answer, calling your CSS files in the right order is a better way to fix your issue, in this case at least. So call Bootstrap CSS first, then your own custom CSS.

In the Codepen way, that means loading the Bootstrap CSS with "Add External CSS" in the properties of your CSS window, instead of loading it in the HTML.

edited Aug 17 '15 at 15:54

answered Aug 17 '15 at 15:29

Alexis B.

1,105
8
13

1

Using `!important` should be avoided at all costs, in this case there is no need to use `!important`, you just need to call the custom CSS after the Bootstrap CSS. – APAD1 Aug 17 '15 at 15:37
@APAD1 That's also why I linked this article about that. I agree with the fact that it should be avoided *when possible*, but there is some situations where the overriding with `!important` is necessary, depending on the project and the specs. But you'r right about this case, the loading priority fix the issue. – Alexis B. Aug 17 '15 at 15:57

user3767554 · Answer 2 · 2015-08-17T15:42:43.920

0

you must use '!important' like so:

 .navbar-header {
        float: none !important;
  }

this will override the class. however this is a quick way round it and can get messy going forward. another way is to call custom css after bootstrap css

edited Aug 17 '15 at 15:42

answered Aug 17 '15 at 15:39

user3767554

147
1
12

1

Again, no reason to use `!important` here. – APAD1 Aug 17 '15 at 15:42

Rachel Gallen · Answer 3 · 2015-08-17T15:55:20.670

To center it on all devices you must use a media query with a large max-width like so. Check it out on codepen. You can mess with the max-width

@media only screen and (max-width:1600px) {.navbar-brand {
  float: none!important;
  width: 200px;
  display: table-cell;
  text-align: center;
}

.navbar-header {
  float: none!important;
}
}

Snippet:

.navbar-collapse ul{
    margin-right: 3px;
    text-align: center;
    margin-top: 17px;
}



.navbar-header {

    width: 0%;
    margin: 0 auto;
    display: table;
}
@media only screen and (max-width:1600px) {.navbar-brand {
  float: none!important;
  width: 200px;
  display: table-cell;
  text-align: center;
}

.navbar-header {
  float: none!important;
}
}

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Research Group</title>

    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">

    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/main.css">

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

    <!--[if lt IE 9]>
    <script src="js/vendor/html5-3.6-respond-1.4.2.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div id="menu" class="col-md">
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <!-- The Logo button & menu toggle button-->
                <divc class="row">
                    <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">PCT Research group</a>
                    </div>
                </divc>
                <!--End button & logo -->
                <div class="row">
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a href="index.html" target="_self"><span class="glyphicon glyphicon-home"></span> Home</a>
                                &nbsp;&nbsp;
                            </li>

                            <li>
                                <a href="index.html" target="_self"><span class="glyphicon glyphicon-globe"></span> Research</a>
                                &nbsp;&nbsp;
                            </li>

                            <li>
                                <a href="publications.html" target="_self"><span class="glyphicon glyphicon-list-alt"></span>
                                    Publications</a>&nbsp;&nbsp;&nbsp;
                            </li>

                            <li>
                                <a href="projects.html" target="_self"><span class="glyphicon glyphicon-book"></span> Projects</a>&nbsp;&nbsp;&nbsp;
                            </li>

                            <li>
                                <a href="News.html" target="_self"><span class="glyphicon glyphicon-calendar"></span>Events</a>&nbsp;&nbsp;&nbsp;
                            </li>

                            <li>
                                <a href="Events.html" target="_self"><span class="glyphicon glyphicon-calendar"></span>
                                News</a>&nbsp;&nbsp;&nbsp;
                            </li>

                            <li>
                                <a href="Profiles_View.html" target="_self"><span class="glyphicon glyphicon-user"></span> Knowledge
                                    Power </a>&nbsp;&nbsp;&nbsp;
                            </li>

                            <li>
                                <a href="index.html" target="_self"><span class="glyphicon glyphicon-alt"></span> About
                                    Us</a>
                            </li>
                        </ul>
                    </div>
                    </div>
            </nav>
        </div>
    </div>
    </div>
</body>

thanks for the reply i got it without using import, the calling was just not after the Maxcdn bootstrap. — Habib Rehman, Aug 17 '15 at 17:28

Bootstrap navigation bar text

3 Answers3