Bootstrap de effondrés navbar une mise en page organisée

Question

J'ai actuellement une barre de navigation d'amorçage avec des images, le problème est que lorsque cela s'effondre, il devient un gâchis dû à une marge de mesure et les images en cours d'exécution sur mon texte.

Y at-il un moyen de spécifier un nouveau style ou une mise en page pour quand ma barre de navigation est réduite? Je préférerais tout à la mise en page comme

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

A la place, tout se chevauche. Je veux également supprimer l'effet de survol pendant un état replié.

JSFiddle Demo

(psy vue pour la barre affaissée à apparaître, lorsque vous l'ouvrez, vous verrez comment tout est en désordre et en cours d'exécution sur l'autre dans le vew affaissé)

Voici la barre de navigation 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> 

Et voici mon CSS pour elle

.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; 
} 

cherché à utiliser @media et tel, mais rien ne semble affecter le CSS. :/

Answer 1

Voici quelques changements simples pour l'obtenir à la recherche un peu respectable:

1) Ajouter un peu de marge à vos <li> éléments dans votre navigation.

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

2) Enveloppez votre vol stationnaire dans une requête de médias qui ne lui permet de fonctionner à 768px et plus, donc il ne sera pas appliquée lorsque le menu est réduit.

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

Update JSFiddle

EDIT:

Vous avez un morceau de style en ligne qui est de garder votre menu réduit de tomber sous le bouton de menu.

Ce:

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

a besoin d'être ceci: mais tout ce que je conclurai dans les médias ne semble pas à la matière

<div class="navbar-header"> 

New JSFiddle

Answer 2

Vous pouvez créer votre propre CSS pour remplacer Bootstraps CSS et utiliser les requêtes des médias que Bootstrap utilise aussi qui sont:

/* 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) { ... } 

modifié pour CSS normal:

/* 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) { ... } 

Extrait de: http://getbootstrap.com/css/#grid-media-queries

Votre jsFiddle est abit désordonné avec des images qui ne sont pas chargées et telles par ailleurs.