advice on sticky nav footer (tel email fblink) layout needed

Question

The navbar height gets too big in a mobile screen size.

link to site

I've seen a few tutorials and demos for nav footers, but most are for either minimal content i.e 1 line of text or lots of content which isn't suitable as I want to keep the footer height low. Options I've seen; use Bootstrap rows x2 x1 row for telephone x1 row for email

but then I'm not sure what to do with the fb link, do I add a Twitter or Instagram link so there's not an empty slot on the right of the nav?

other option is use glyphicons for small screens/mobiles but I worry that it's always best to have the actual tel: number and email text visible.

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:[email protected]">[email protected]</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 -->

I'm asking because, it always takes me ages to get small alterations working. Any advice or links to useful demos/tutorials would be greatly appreciated.

Answer 1

If you don't want your bottom navbar to be more than one line on mobile, glyphicons are the way to go. You could try to make the font really small, but that would defeat your goal of the person being able to read it.

You should look into Bootstrap's Responsive utilities. http://getbootstrap.com/css/

That way you can have the links written on a full size screen, but hide them and show glyphicons instead when the screen is smaller.

Answer 2

So I think I will try the glyphicons, but for now I have used nest rows. It doesn't look great but it's not that bad either.

<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:[email protected]">[email protected]</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