Stop list item stacking in bootstrap navbar

css, html, twitter-bootstrap

Solution

So there were 3 issues I needed to solve:

- Display the social media icons horizontally rather than stacked vertically when window width falls below a certain size.

As @fructurj pointed out this can be fixed by adding `display: inline-block` to the `navbar-nav>li` selector in css. However, this would affect all navbars; I only want my footer navbar to behave this way. To do this, simply add a custom class at the same `ul` level as navbar-nav in your footer html:

<ul class="nav navbar-nav navbar-right navbar-custom">
    <li>
        <a href="https://twitter.com/maneevent6" target="_blank" title="@manevent6"><img src="\img\icons\twitter\Twitter_logo_blue.png" class="tw-logo"></a>
    </li>
    ...
</ul>

Then apply `display: inline-block` to only that selector in your css media query:

.navbar-nav>li {             /* <- this affects all navbars */
    float: none;
    text-align: center;
}
.navbar-custom>li {          /* <- this affects just my footer navbar */
    display: inline-block;
}

This will cause the social media icons to align horizontally rather than stack vertically, which is what I'm after. Unfortunately though, the icons will become left-aligned, which brings us to the 2nd issue...

- Re-align social media icons in footer nav-bar

The social media icons lose their horizontal alignment once inline-block has been applied. To set a new horizontal alignment I surrounded the `ul` that houses my social media icons in a new `div` with my own custom class "img-inline":

<div class="img-inline">
    <ul class="nav navbar-nav navbar-right navbar-custom">
        <li>
            <a href="https://twitter.com/maneevent6" target="_blank" title="@manevent6"><img src="\img\icons\twitter\Twitter_logo_blue.png" class="tw-logo"></a>
        </li>
        ...
    </ul>
</div>

And then picked this up in my css media query and applied `text-align: center;` as that was my preferred alignment at this screen width:

.img-inline {
    text-align: center;
}

- Hide the telephone number in the footer when window width falls below a certain size.

Finally, I wanted to hide the telephone number I put in the footer. To do this I added a custom class "navbar-hide" to the `ul` housing the telephone number:

<ul class="nav navbar-nav navbar-left navbar-hide">
    <li>
        <p id="Telephone"><i class="fa fa-phone fa-lg"></i> 01999 999999</p>
    </li> 
</ul>

Then picked this up in my css media query by applying `display: none !important;`:

.navbar-hide {
    display: none !important;
}

Here's the fiddle of the updated code (original is the question): http://jsfiddle.net/0jqssmmb/3/

Problem

I've created a bottom navbar (footer) in Twitter Bootstrap to contain some social media links: There's a break-point at which the unordered list items (`li`) become stacked vertically rather than horizontally: I can see this behaviour is desirable for using the navbar with headings (I'm using it on my top navbar), but since I'm just using this bottom one for icons, I don't want them stacked vertically as there's plenty of width for them to line-up horizontally down to a mobile screen. How can I disable this behaviour on just my bottom navbar? I'd also be interested to know whether the phone number and icon I have in my left-side nav items could disappear when the width of the device is less than the width of the phone number and social media icons. Bootstrap version is 3.3.2. Update: here's a fiddle http://jsfiddle.net/0jqssmmb/

Original source