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