Hide/Show text in link tag but not the font icon in responsive mode

Question

I've got icons set as my navigation bar which is placed horizontally. But I have added after those icons some text that explains what action is associated with the icon.

For example, the 'home' icon from fa fa-home (FontAwesome), the text behind this icon 'Home'. The text should only be visible if the browser size is less than 767 pixels in width (twitter bootstrap responsive).

I tried a few ways, but none of them worked, like $('.navbarText').text().hide();, $('a.navbarText').text().hide();, $('a text').text().hide();. I don't recall all my tries though, but tried some pure CSS ways too.

I want to avoid adding a span or div around it.

Any ideas?

[EDIT] some extra info. This is the rendered html:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a class="dismissLbl" data-animation="true" data-delay="200" data-placement="bottom" data-title="Go to home page" data-trigger="hover" href="/" rel="tooltip"><i class="fa fa-home fa-lg"></i>Home</a></li>
     <li>
        <a class="dismissLbl" data-animation="true" data-container="body" data-delay="200" data-placement="bottom" data-title="Go to my service(s)" data-trigger="manual hover" href="#" rel="tooltip"><i class="fa fa-list fa-lg"></i>About</a>
    </li>
    <li>
        <a class="dismissLbl" data-animation="true" data-container="body" data-delay="200" data-placement="bottom" data-title="Go to my deals" data-trigger="manual hover" href="#" rel="tooltip"><i class="fa fa-thumbs-o-up fa-lg"></i>Contact</a>
    </li>

</ul>
</div>

@Hashem Qolami and Brian, when you resize the browser to a smaller size, the horizontally aligned menu will become a button that's placed on the right of the navbar which you can press and the menu opens that looks like an accordion. See the following screenshots for the visual explanation.

normal size, meant for desktop view small size, meant for phones, tablets

As for why I don't want to add a span or div around it, is because I'm using @Html.ActionLink("linktext", "actionName") to render the link, which would require some jquery to surround the link tags every time the browser loads or user navigates. Not to mention the checks that have to be done too for every link tag to check whether they are already surrounded or not at every page load or user navigation.

Unnecessary performance loss, if you're asking me.

`"The text should only be visible if the browser size is less than 767 pixels in width"` do you mean the opposite? — Brian Dillingham, Sep 04 '14 at 22:10
@Brian I guess so, I'm confused by that statement, why should the text be visible on smaller screens rather than the large ones? — Hashem Qolami, Sep 04 '14 at 22:18
Just use Url.Action to provide you more control over the dom structure http://stackoverflow.com/a/1975020/1342440 very common — Brian Dillingham, Sep 05 '14 at 17:36

Hashem Qolami · Accepted Answer · 2014-09-05T19:12:44.070

3

Considering the following stucture:

<a class="dismissLbl" href="#">
    <i class="fa fa-home fa-lg"></i> Home
</a>

Without adding extra elements, you could achieve that by giving a font-size of 0 to anchor tags and then overriding the value on the font icons (nested <i> elements):

a.dismissLbl { font-size: 0; }
a.dismissLbl .fa { font-size: 22px; }

/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
    a.dismissLbl,
    a.dismissLbl .fa {
        font-size: 16px; /* or whatever you want */
    }
}

Finally by using @media queries, you could reset the font-size to make the text visible on extra small devices.

edited Sep 05 '14 at 19:12

answered Sep 04 '14 at 21:51

Hashem Qolami

97,268
26
150
164

This answer is under this assumption that you want to display the text on larger screens and hide that on smaller ones. If you want the opposite, well, you have the logic! – Hashem Qolami Sep 04 '14 at 22:20
See my edit in the question, have you named there explicitly about the larger and smaller screen size/browser size. – Quoter Sep 05 '14 at 17:37
@Quoter Fair enough, just one more question, Are you using the font icons by adding `` elements as you've done in your posted snippet? – Hashem Qolami Sep 05 '14 at 17:43
@Quoter I've implemented the navbar as you've shown in the question, check this **[Updated Demo](http://jsbin.com/tacugu/1/edit)**. – Hashem Qolami Sep 05 '14 at 18:07
that worked perfectly awesome. If you update your questio with this demo, I'll mark it as answered. – Quoter Sep 05 '14 at 19:09
to answer your previous question in a comment, I'm using a 3rd party lib that supports chaining in the `View` with `Razor`. This line will produce a link with FontAwesome icon: `@Html.Bootstrap().ActionLink(Resources.Menu.Home, "Index", "Home").Class("dismissLbl").PrependIcon("fa fa-list fa-lg")`. – Quoter Sep 05 '14 at 20:43

score 2 · Answer 2 · answered Sep 04 '14 at 21:42

2

Why not use media queries in your CSS?

.text{ display: none; }
@media only screen and (max-width: 767px){ 
  .text{ display: block; }
}

answered Sep 04 '14 at 21:42

AJFarkas

2,929
1
17
15

I agree with @AJFarkas, the best way to target that text without using jquery or javascript of any kind its by using media queries (css). If you need and example on how to do this, please post a jsfiddle with your actual code, then I will be able to work from there and give you a working demo. – Allan Sep 04 '14 at 21:50
FYI, Browser support from media queries summarized here: [link](http://caniuse.com/#feat=css-mediaqueries) – John Hascall Sep 05 '14 at 00:13
@AJFarkas, that was my first choice, just couldn't get it to work that way, and I still can't. – Quoter Sep 05 '14 at 17:20
Can I see your CSS? It's hard to help when I'm flying blind. Maybe put the whole thing up on a [Fiddle](http://jsfiddle.net/) and we'll be able to tweak the code. – AJFarkas Sep 05 '14 at 20:49

score 2 · Answer 3 · answered Sep 04 '14 at 22:06

2

You can easily do this with a CSS Media Query and psuedo selectors:

View the example in Plunker

  // Common style for all button icons
  button { color:#000; font-size:24px; paddng:1em; border:none; background:none; cursor:pointer; }
  button:hover { color:#0088CC; }
  button span:after { padding-left:.5em; }

  // Text to display after each icon
  #menu span:after { content:"Menu"; }
  #home span:after { content:"Home"; }
  #mail span:after { content:"Mail"; }
  #account span:after { content:"Account"; }

  // Media Query to hide the text when viewport is less than 767px
  @media (max-width: 767px) {
    button span:after {
      content: ""!important;
    }
  }

answered Sep 04 '14 at 22:06

J.C

80
6

You have a nice answer, place the CSS regarding the use of content here. – Brian Dillingham Sep 04 '14 at 22:07
I added the CSS to this answer...however, it is also available (along with the HTML markup) in the Plunker. – J.C Sep 04 '14 at 22:10
I would switch `button` to `a` so the questioner can more quickly adapt it to their markup – Brian Dillingham Sep 04 '14 at 22:14
@Brian Not sure about `Good practice` as the search engines won't index generated contents. Also using generated contents to display link/navigation text is not flexible; This is the duty of HTML not CSS. – Hashem Qolami Sep 04 '14 at 22:14
"good practice" to put your code on your answer :) see previous comments, and please stop targeting me.. this isn't my answer lol – Brian Dillingham Sep 04 '14 at 22:17
I know the feeling :) – Brian Dillingham Sep 04 '14 at 22:22
@J.C, looks nice, but my menu's are localized. Can't hard code them. – Quoter Sep 05 '14 at 17:30

iammikerodriguez · Answer 4 · 2014-09-04T21:44:01.477

1

Use the empty() function.

$('.navbarText i').empty();

edited Sep 04 '14 at 21:44

answered Sep 04 '14 at 21:26

iammikerodriguez

379
1
5
16

See my reply to genocide_hoax – Quoter Sep 04 '14 at 21:29
Use media queries instead to hide the text. You will probably have to wrap the text in a span though. Bootstrap should also have CSS helper classes to achieve this. – iammikerodriguez Sep 04 '14 at 21:33
The problem is, is that the a-tag is generated by the `@Html.ActionLink()` method in `asp.net-mvc`. I can't influence the output. – Quoter Sep 04 '14 at 21:36
What if you add the anchor text inside the fontawesome element and then use the jQuery empty() function on that? Not sure how asp.net-mvc works when outputting links. – iammikerodriguez Sep 04 '14 at 21:43
simply because once the browser gets resized to a bigger width, there is no text to show. It's a "how to hide/show the text" question. – Quoter Sep 05 '14 at 17:22

Genocide_Hoax · Answer 5 · 2014-09-04T21:46:03.953

1

In case the text is wrapped in a dom element assign a class to it and do the following.

 $(window).resize(function() {
   doc_width = $(window).width();
    if(doc_width < 767){
      $(".mytext").hide();
    } else {
      $(".mytext").show();
    }

}

I used it in .resize just make it a function .. call it on .ready and .resize.

Bootstrap Way:

<div class="row">
 <div class="col-xs-12 col-sm-3">
   <img src="#" alt="icon">
  </div>
  <div class="hidden-xs col-sm-9">
    TEXT
  </div>
</div>

Modify it according to your grid system.

edited Sep 04 '14 at 21:46

answered Sep 04 '14 at 21:26

Genocide_Hoax

843
2
18
42

1

Won't that hide the icons in stead of the text? The text should be visible again if the browser size is bigger than 767 px. – Quoter Sep 04 '14 at 21:29
Oh you want to hide the text. Sorry misread it. If you are using bootstrap you can make use of the .hidden-xs or .hidden-sm class. – Genocide_Hoax Sep 04 '14 at 21:31
Why using JQuery if this can be done with simple CSS? – Allan Sep 04 '14 at 21:51
Yup indeed. Bootstrap version also posted. jQuery cause I just love it :P – Genocide_Hoax Sep 04 '14 at 21:56

Hide/Show text in link tag but not the font icon in responsive mode

5 Answers5