conseils sur la mise en page de bas de page de navigation (tel email fblink) nécessaire

Question

La hauteur de la barre de navigation devient trop grande dans une taille d'écran mobile.

link to site

Je l'ai vu quelques tutoriels et des démos pour les pieds de page nav, mais la plupart sont soit pour le contenu minimal soit 1 ligne de texte ou beaucoup de contenu qui ne convient pas que je veux garder le pied de page hauteur basse. Options que j'ai vues utiliser des lignes Bootstrap x2 ligne x1 pour téléphone ligne x1 pour le courrier électronique

mais je ne suis pas sûr de ce qu'il faut faire avec le lien fb, puis-je ajouter un lien Twitter ou Instagram il n'y a donc pas un emplacement vide sur la droit de la nav?

l'autre option est l'utilisation de glyphicons pour les petits écrans/mobiles mais je m'inquiète qu'il est toujours préférable d'avoir le numéro de téléphone et le numéro de courrier électronique visibles.

HTML

<div class="container"> 

       <ul> 
       <li><a href="tel:+33-627-385-646">+33 (0) 6 27 38 56 46</a></li> 
       <li><a href="mailto:massage@progressionski.com">massage@progressionski.com</a></li> 
       </ul> 

        <div class="fblink"><a href="https://www.facebook.com/ProgressionPhysiotherapyMassageFirstAid/" target="_blank" class="fa fa-facebook-square fa-3x pull-right"></a> <!-- nav foot right items FB #x2 --> 
        </div> 

    </div><!-- close container --> 

Je demande parce que, il me faut toujours les âges pour obtenir de petites modifications de travail. Tout conseil ou lien vers des démos/tutoriels utiles serait grandement apprécié.

Answer 1

Si vous ne voulez pas que votre barre de navigation inférieure ait plus d'une ligne sur mobile, les glyphons sont la solution. Vous pourriez essayer de rendre la police vraiment petite, mais cela irait à l'encontre de votre objectif de la personne capable de le lire.

Vous devriez regarder dans les utilitaires réactifs de Bootstrap. De cette façon, vous pouvez faire en sorte que les liens soient écrits sur un écran en taille réelle, mais cachez-les et affichez des glyphons à la place lorsque l'écran est plus petit.

Answer 2

Donc je pense que je vais essayer les glyphicons, mais pour l'instant j'ai utilisé des rangées de nidification. Ça n'a pas l'air génial mais ce n'est pas si mal non plus.

<nav class="navbar navbar-default navbar-fixed-bottom"> 

    <div class="container"> 

      <div class="footerrow row"><!-- 1st/main row --> 
       <div class="footerleftcontainer col-xs-10"><!-- open left col --> 
        <div class="row"> 
         <div class="footerleft col-xs-12"> 
          <a href="tel:+33-627-385-646">+33 (0) 6 27 38 56 46</a> 
         </div> 
        </div> 
        <div class="footerrow row"> 
         <div class="footerleft col-xs-12"> 
          <a href="mailto:massage@progressionski.com">massage@progressionski.com</a> 
         </div> 
        </div> 
       </div><!-- close left col --> 
       <div class="col-xs-2"><!-- open right col --> 
        <div class="fblink"><a href="https://www.facebook.com/ProgressionPhysiotherapyMassageFirstAid/" target="_blank" class="fa fa-facebook-square fa-3x"></a></div> 
       </div><!-- close right col --> 
      </div><!-- colse 1st/main row --> 

    </div><!-- close container --> 

.footerrow { 
    padding: 0px; 
    border: 0px; 
    margin: 0px; 
} 

.footerleftcontainer { 
    padding-top: 5px; 
    border: 0px; 
    margin: 0px; 
} 

.fblink { 

    float: right; 
} 

.fblink a { 
    padding-top: 5px; 
} 

.fblink a:active { 
    position: relative; 
    bottom: 2px; 
} 

Result