CODEWITHSUNDEEP
htmlcssangularjsangular-ui-bootstrap
tosh
tosh

Reputation: 337

How do I hide text but keep icons on a small screen?

I want to hide the words, Home/Reservations/myReservations/About/Settings when the screen gets smaller BUT I want the icons to still be visible on a smaller screen. I am currently using:

http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css

http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js

<nav class="navbar navbar-default">
   <div class="container-fluid">
      <div id='test' ng-click="doTheBack()"><a class="navbar-brand"><i class="fa fa-arrow-left"></i>Back</a></div>
         <div class="nav navbar-nav navbar-left">


        </div>
      <div>
  <ul class="nav navbar-nav navbar-right">
    <a class="navbar-brand visible-lg" href="/landingIndex.html"><i class="fa fa-home"></i>Home</a>
    <a class="navbar-brand" href="#"><i class="fa fa-calendar-o"></i> Reservation</a>
    <a class="navbar-brand" href="#myReservation"><i class="fa fa-list"></i> MyReservations</a>
    <a class="navbar-brand" href="#about"><i class="fa fa-shield"></i> About</a>
    <a class="navbar-brand" href="#settings"><i class="fa fa-gear"></i> Settings</a>

  </ul>
</div>

Upvotes: 1

Views: 4647

Answers (3)

Dixit
Dixit

Reputation: 1379

With the use of hidden-sm hidden-xs class of bootstrap you can easily achieve this.

<ul class="nav navbar-nav navbar-right">
<a class="navbar-brand visible-lg" href="/landingIndex.html">
 <i class="fa fa-home"></i>
  <span class="hidden-sm hidden-xs">Home</span>
</a>
<a class="navbar-brand" href="#">
  <i class="fa fa-calendar-o"></i> 
  <span class="hidden-sm hidden-xs">Reservation</span>
</a>
<a class="navbar-brand" href="#myReservation">
   <i class="fa fa-list"></i> 
   <span class="hidden-sm hidden-xs">MyReservations</span>
</a>
<a class="navbar-brand" href="#about">
   <i class="fa fa-shield"></i> 
   <span class="hidden-sm hidden-xs">About</span>
</a>
<a class="navbar-brand" href="#settings">
   <i class="fa fa-gear"></i> 
   <span class="hidden-sm hidden-xs">Settings</span>
</a>
</ul>

Upvotes: 0

Justas
Justas

Reputation: 553

You need to wrap these words in a span and give them a class like so:

<a class="navbar-brand visible-lg" href="/landingIndex.html"><i class="fa fa-home"></i><span class="link-title">Home</span></a>
<a class="navbar-brand" href="#"><i class="fa fa-calendar-o"></i> <span class="link-title">Reservation</span></a>
<a class="navbar-brand" href="#myReservation"><i class="fa fa-list"></i><span class="link-title">My Reservations</span></a>
<a class="navbar-brand" href="#about"><i class="fa fa-shield"></i> <span class="link-title">About</span></a>
<a class="navbar-brand" href="#settings"><i class="fa fa-gear"></i> <span class="link-title">Settings</span></a>

Then, using CSS media queries, hide elements with specified class ("link-title" in this example):

@media all and (max-width: 600px) {
    .link-title {
        display: none;
    }
}

Upvotes: 0

Antonio Smoljan
Antonio Smoljan

Reputation: 2207

Set the a's font-size property to 0 then set the icons font size back to a desired amount

Code:

@media (max-width:550px) {
  a {
      font-size: 0px !important;
  }

   a i {
      font-size: 20px !important;
   }
}

example you need to resize the screen below 550px for the effect to take place.

Upvotes: 5

Related Questions