Give Bootstrap's collapsed navbar an organized layout

Question

I currently have a bootstrap navigation bar with images, the problem is that when this collapses it becomes a mess due to some custom margin's and the images running over my text.

Is there any way to specify a new style or layout for when my navbar is collapsed? I would prefer everything to layout like

ImageOfHome
Home (text)
ImageOfUsers
Users (text)
ect...

Instead it all runs over each other. I also want to remove the hover affect during a collapsed state.

JSFiddle Demo

(shrink view for collapsed bar to appear, when you open it you will see how everything is all messy and running over each other in the collapsed vew)

Here is the navbar code

<div class="navbar navbar-inverse navbar-fixed-top" style="margin-top:25px">
    <div class="container" style="height:5px">
        <div class="navbar-header" style="margin-bottom:-80px; padding-bottom:-80px">
            <span class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </span>
            <a href="@Url.Action("Index", "LakerLegends")" style="margin-right:-30px" onclick="return false">
                <img src="/Content/img/LogoConstruction.png" alt="Logo" width="275" height="100" style="margin-top:-25px" />
            </a>
        </div>
        <div class="navbar-collapse collapse pull-right">

            <ul class="nav navbar-nav" style="text-align:center">
                <li class="rolloverNav">

                    <a href="@Url.Action("Index", "LakerLegends")" id="navbar">
                        <img src="~/Content/navbar/homeNew.png" class="urlImage"/>
                        <br />
                        Home
                    </a>
                </li>
                <li>

                    <a href="@Url.Action("Index", "Users")" id="navbar">
                        <img src="~/Content/navbar/usersNew.png" class="urlImage" />
                        <br />
                        Users
                    </a>
                </li>
                <li>

                    <a href="@Url.Action("Index", "Events")" id="navbar">
                        <img src="~/Content/navbar/eventsNew.png" class="urlImage" />
                        <br />
                        Events
                    </a>
                </li>
                <li>

                    <a href="@Url.Action("Index", "Competitive")" id="navbar">
                        <img src="~/Content/navbar/competitiveNew.png" class="urlImage"  />
                        <br />
                        Teams
                    </a>
                </li>
                <li>

                    <a href="@Url.Action("Index", "Streams")" id="navbar">
                        <img src="~/Content/navbar/streamsNew.png" class="urlImage" />
                        <br />
                        Streams
                    </a>
                </li>
                <li>

                    <a href="@Url.Action("Index", "Staff")" id="navbar">
                        <img src="~/Content/navbar/staff.png" class="urlImage"/>
                        <br />
                        Staff
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

And here is my CSS for it

.rolloverNav {
    padding-bottom:0px;
}

a#navbar:hover {
    color:#f1fe51;
    margin-top:-10px;
    opacity: 1;
}


a#navbar {
    opacity:1;
    padding-top:0px;
    padding-bottom:0px;
    font-weight:bold;
    font-family: 'Fjalla One', sans-serif;
    font-size:14px
}

.urlImage {
    height:40px;
    width:40px;
    margin-top: -5px;
    padding-bottom: 0px;
}

Been looking at using @media and such, but nothing seems to be affecting the CSS. :/

Answer 1

Here are a few simple changes to get it looking somewhat respectable:

1) Add a bit of margin to your <li> elements in your nav.

.nav li {
    margin: 10px 0px;
}

2) Wrap your hover in a media query that only allows it to run at 768px and higher, so it will not be applied when your menu is collapsed.

@media (min-width: 768px) {
    a#navbar:hover {
        color:#f1fe51;
        margin-top:-10px;
        opacity: 1;
    }
}

Update JSFiddle

EDIT:

You have a piece of inline styling that is keeping your collapsed menu from dropping below the menu button.

This:

<div class="navbar-header" style="margin-bottom:-80px; padding-bottom:-80px">

Needs to be this:

<div class="navbar-header">

New JSFiddle

Answer 2

You can create your own CSS to override Bootstraps CSS and use the media queries that Bootstrap also uses which are:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

modified for normal CSS:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @1200px) { ... }

Taken from: http://getbootstrap.com/css/#grid-media-queries

Your jsFiddle is abit messy with images that aren't loaded and such by the way.