Responsive items of same height inside navbar in Bootstrap 3.1.1

Question

I read information about navbar-nav but I don't use it because it make a list from my li elements instead of row.

Img without navbar-nav

If I want to reach it I should add this css

@media screen and (min-width: 768px) {
.navbar-nav {
    width: 100%;
}
}

But this piece of css doesn't resolve my problem with IE8

IE8

HTML code

<nav class="status-navbar navbar navbar-default" role="navigation">
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div
        class="collapse navbar-collapse container-fluid container-lg-height container-md-height"
        id="bs-navbar-collapse-1">
        <div class="row row-lg-height row-md-height" style="margin: 0;">
            <div
                class="col-lg-4 col-md-4 search-panel col-lg-height col-md-height col-middle">
                <form class="navbar-form navbar-left search-form" role="search">
                    <div class="form-group col-lg-10 col-md-10">
                        <input type="text" class="search-input form-control input-lg"
                            placeholder="Twitter Quick Search">
                    </div>
                    <div class="col-lg-2 col-md-2">
                        <button type="button" class="btn btn-lg btn-primary">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </form>
            </div>
            <div class="col-lg-7 col-md-7 col-lg-height col-md-height col-middle">
                <ul class="nav navbar-nav">
                    <li class="col-lg-2 col-md-2 metricItem underline"><span class="metricsLabel">FOLLOWING</span>
                        <span id="followingTweetIds" class="metricsValue">0</span></li>
                    <li class="col-lg-3 col-md-3 metricItem"><span class="metricsLabel">SAVED
                            SEARCHES</span> <span class="metricsValue">0</span></li>
                    <li class="col-lg-2 col-md-2 metricItem">
                        <span class="metricsLabel">TWEETS RETRIEVED</span>
                        <span id="tweetsRetrieved" class="metricsValue">0</span>
                        <div class="limitPane">
                            <span class="metricsLabel">( LIMIT</span>
                            <span id="limitRequests" class="limitRequests"></span>
                            <span class="metricsLabel">)</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="col-lg-1 col-md-1 col-lg-height col-md-height col-middle">
                <ul class="nav navbar-nav">
                    <li><a href="#" id="notificationBtn" class="notificationBtn" style="font-size: 17px;"> 
                            <span class="glyphicon glyphicon-bell">Notifications</span>
                        </a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Please, help me to understand for what I should use navbar-nav and how to make it cross-browser solution in my example.

Link to JSFiddle

Even interesting, I changed position this fragment from head under bootstrap.min.css to the bottom of <body> element.

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

Now in IE 8 it looks like new navbar img in IE8

It was my mistake with location for including resond js. Because I use jquery layout framework. I've understood that I have a problem with display: table-row. I use it because I want to create columns inside row that have equals heights Bootstrap 3 responsive columns of same height

Reference the Respond.js script after all of your Css

.UPDATE 2

I changed my navbar to default Bootply. But it still looks different from result that I want to achieve. I lost possibility to align my Notification link and form element inside navbar addind navbar-btn doesn't help. I can't do responsive width for input field. Bootstrap 3 - How to maximize input width inside navbar. This solution works well just for input-group. Please, help me to understand how create

Responsive items of same height inside navbar
Stretch width form (using input-group not form-group) such a way that when I resize page button go down on the next line

Have you tried including `html5shiv.js` and `respond.js` at the top of your page? — Simple Sandman, Sep 08 '14 at 17:26
what do you mean you make your navbar by list instead of row? navbar elements are in a list. http://getbootstrap.com/components/#navbar that is the correct way of doing it — Jordan.J.D, Sep 10 '14 at 18:58
http://www.bootply.com/jvB9PqNswZ you **really** need to fix up your code. Not only is this not even close to how to make a navbar in bootstrap, you included pictures that won't be loaded as well as empty divs and other code that do nothing. So I highly recommend reading documentation. — Jordan.J.D, Sep 10 '14 at 19:39
@JordanD I don't have an empty image but I think it doesn't influence on navbar that's why I didn't upload it. I changed default structure of navbar because bootstrap doesn't have out-pf-box support responsive columns of same height. — Ray, Sep 11 '14 at 08:46
@JordanD Please, can you give explanation for this point "navbar elements are in a list.". What I did wrong? — Ray, Sep 15 '14 at 09:39

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

This example is in Bootstrap 3.2 which has bug fixes for their components, but that's -- probably -- not the issue here. Your css is very messy and it's hard to determine what doesn't work in IE8.

I would build my own component and not use Navbar, which is not intended for use as you have. Over-writing so much is really not a good idea without intimate familiarity with source CSS.

Avoid margins, like you have, on elements with box-sizing:border-box especially if they are trying to fit inside a fluid container. You have margins on col-- classes, this will mess stuff up.

Screen Shot IE 8:

enter image description here

Demo: http://jsbin.com/zaxiwo/1/

Edit: http://jsbin.com/zaxiwo/1/edit

Tips:

Keep media queries to a minimum, that is use fewer if possible.
Every time you make a change, even minor, check in IE8, then you know what happened.
Comment your html

HTML: (requires respond.js correctly installed in the head as per their instructions, before CSS AND locally hosted CSS linked via RELATIVE path.)

Notes: the html and the CSS is not complete, the small viewport styles have not been done. You put the common, shared among all viewport sizes BEFORE the min-width media query. If it's common to all it goes outside the media queries, but if there is a slight difference you can remove that style, so if there is padding on small viewports but no padding on larger, remove the padding on the larger, but if there is a total difference in appearance, then put the smallviewport styles ONLY in a max-width, which is 1px less than the min-width.

 <div class="control-bar container-fluid">
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".control-collapse">
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     </button>  
     <div class="collapse control-collapse">
        <div class="row">
           <div class="col-sm-3">
              <div class="input-group">
                 <input type="text" class="form-control">
                 <span class="input-group-btn">
                 <button class="btn btn-primary" type="button">Go!</button>
                 </span>
              </div>
              <!-- /input-group -->
           </div>
           <!--/.col-*-3 -->
           <div class="col-sm-5">
              <div class="row">
                 <div class="col-sm-4 indicator active">
                    <span class="title">Word</span>
                    <span class="number">1</span>
                 </div>
                 <!--/.col-*-4.indicator :: nested -->
                 <div class="col-sm-4 indicator">
                    <span class="title">Word</span>
                    <span class="number">2</span>
                 </div>
                 <!--/.col-*-4.indicator :: nested -->
                 <!--/.col-*-4 :: nested -->
                 <div class="col-sm-4 indicator">
                    <span class="title">Word</span>
                    <span class="number">3</span>
                    <span class="notice">word</span>
                 </div>
                 <!--/.col-*-4.indicator :: nested -->
              </div>
              <!--/.row (nested) -->
           </div>
           <!--/.col-*-7 -->
           <div class="col-sm-3 col-sm-offset-1 icon-link">
              <a href="#"><i class="glyphicon glyphicon-home"></i> icon link goes here</a>
           </div>
           <!--/.col-*-3 -->
        </div>
        <!--/.row -->
     </div>
     <!--/.nav-collapse -->
  </div>
  <!--/control-bar.container-fluid -->

CSS

.control-bar {
    background: #333;
    color: #fff;
    clear: both;
}

.control-bar a {color:#fff}

.control-bar .control-collapse {
    clear: both;
    width: 100%;
    padding: 0 15px 20px;
}
.control-bar .icon-bar {
    background: #fff;
}

.indicator:hover,
.indicator.active {
    border-bottom-color: orange
}
.indicator {
    padding: 10px 15px;
    border-bottom: 5px solid transparent;
}
.icon-link a {
    padding: 10px 0;
    display: block;
}
/* how it looks on larger viewports*/
@media (min-width:768px) {  
    .control-bar .control-collapse {
        display: inline!important;
        padding: 0;
    }
    .indicator {
        height: 100px;
        padding: 5px 0 0 0;
        display: table;
    }
    .indicator span {
        display: table-row;
        text-align: center;
        font-size: 14px;
        border: 1px solid red;
        vertical-align: middle;
    }
    .indicator .title {
        font-size: 15px;
        text-transform: uppercase;
    }
    .indicator .number {
        font-size: 20px;
        color: orange;
    }
    .indicator .notice {
        font-size: 12px
    }
    /* height of parent minus by height of element divided by 2 */
    .control-bar .input-group {
        margin-top: 33px
    }
    .icon-link {
        text-align: right;
        padding-top: 28px;
    }
}

score 0 · Answer 2 · answered Sep 12 '14 at 19:11

0

Internet Explorer is not able to read CSS Media Queries, so you need to add this meta tag on your HTML head:

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

And include a JS file in order to IE read and execute these media queries:

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

answered Sep 12 '14 at 19:11

Bruno Monteiro

712
6
22

I have this meta tag. And I have in the bottom of body respond.js and html5smth.js after all included css files. Now it doesn't look well even in Chrome. Please, check Bootly link and my last 2 questions. – Ray Sep 14 '14 at 05:51

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

Before you Work in Bootstrap Version 3.1.1

You have to be aware of Browser compatibility and CSS3 Support for Windows Explorer 8!

Please read: http://getbootstrap.com/getting-started/#support

In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.

See also: https://github.com/scottjehl/Respond

For this reason the basic template contains these lines in the head section:

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->

Responsive items of same height inside navbar in Bootstrap 3.1.1

4 Answers4

Screen Shot IE 8:

Demo: http://jsbin.com/zaxiwo/1/

Edit: http://jsbin.com/zaxiwo/1/edit

Tips:

Related Useful Links