We moved to new unified forum!

Please post all new support queries in our New Forum.

T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
Subscribe via RSS  Subscribe via email
Recent
Categories
Tags
Users
Badges
View Replies (12)

Resolved How to hide the Menu Title and show only font awesome icons?

0
Votes
Undo
  1. Guest
    Guest
  2. Motivator Hole-in-One Smile Seeker
    Love Fool Vanity Monster Sherlock Holmes The Voice Bookworm Peacemaker Attention! Firestarter Notable Answerer Well-Known Questionnaire
  3. General Discussion
  4. Wednesday, 19 March 2014
  5.  Subscribe via email
Hi there,
my problem is the following:
i want to use font awesome icons to show facebook, youtube etc. social links in my main menu.
i have set in the joomla menu, advanced options: Add Menu Title = no.
in the megamenu i put the classes like fa-facebook.
it will show the icon, but also the word "facebook" - because i chose this as the menu title.

if i use the option to upload an image in the advanced options section, the image will appear and the word facebook (the menu title) is gone, just like the settings are supposed work.

so why does the "Add Menu Title = no" does work with an actual image, but not with an font awesome icon?
i have tried to inspect the code, but i have found no clue on where to start.

i also changed where i placed the "fa fa-facebook" tag. i tried "fa" and "fa fa-facebook" as Link CSS Style, it will show an icon. I put fa in the class and fa-facebook in the icon section of mega menu manager, and it will also show an icon. but always the "facebook" text from the title will apear ..

i am thankful for you advice!
  1. Font Awesome
  2. menu-items
Comment
There are no comments made yet.
Responses (12)
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

It means there is some change in markup, let me check. Anyway, you find out and get it worked, nice try man.

Regards.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Michael
Michael
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Arnim,

1. Open megamenu configuration panel, add icon class and an extra class for menu Home (check attached image)
2. Open custom.css file, add style for extra class and the icon as well.

.navbar-default .home > a {

    height: 50px;

    overflow: hidden;

    width: 46px;

}



.navbar-default .home > a > i {

    margin-bottom: 20px;

    margin-right: 0 !important;

}


Gardner.


Hi,

thanks for this solution! Today it stopped working after I had updated to T3 B3 Blank Template 2.2.1 and T3 System Plugin 2.5.1. I had to adjust as follows:

.navbar-default .home > a {

    height: 50px;

    overflow: hidden;

    width: 46px;

}



.navbar-default .home > a > span {

    margin-bottom: 20px;

    margin-right: 0 !important;

}
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
You're welcome, Arnim ;)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
Arnim Pommeranz
Arnim Pommeranz
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Gardner,

thank you very much. It works!

Cheers
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 4
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Arnim,

1. Open megamenu configuration panel, add icon class and an extra class for menu Home (check attached image)
2. Open custom.css file, add style for extra class and the icon as well.

.navbar-default .home > a {

    height: 50px;

    overflow: hidden;

    width: 46px;

}



.navbar-default .home > a > i {

    margin-bottom: 20px;

    margin-right: 0 !important;

}


Gardner.
Attachments (2)
2.png 2.png
1.png 1.png
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 5
Arnim Pommeranz
Arnim Pommeranz
Accepted Answer Pending Moderation
0
Votes
Undo
I try this method, but with no good result. I have the megamenu and try to have a single home button at the start of the navigation bar.
That's the code:

<li class="current active homefocus" data-xicon="fa fa-home" data-class="homefocus" data-level="1" data-id="101">

<a class="" data-target="#" href="/test/">

<i class="fa fa-home"></i>

Home

</a>

</li>


When I try to hide the text with the css-method the text is gone, but also the icon and the size of the button is also the same. Need some help.
Thanks a lot
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 6
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi all,

Thank you, Zdeněk Štěpánek for your answer.

For Dieter's question, Joomla does not support feature to hide menu item, so does T3 Framework. The megamenu setting panel allows you to add icon or style for menu, it has no option to hide menu title. The only way to do that is using CSS and I think Zdeněk Štěpánek's suggestion is a good idea.

Gardner.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 7
Arnim Pommeranz
Arnim Pommeranz
Accepted Answer Pending Moderation
0
Votes
Undo
btw. i chose in joomla the link typ "external url"


Hi Dieter, can you tell me, how does it work? Is only the Icon visible in the menu with this method?

Thanks Arnim
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 8
Zdeněk Štěpánek
Zdeněk Štěpánek
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Ok, you can hide text (with css text indent, with display none, no need to block the css) and it is ok for google as long as it is not misleading / spammy. But if you have a lot more hidden text on a page then visible text then this is not a good quality signal. I have been using text-indent for hiding a text many years, never had a problem. You want to use it for better UX and that is perfectly fine. Google does it too.;)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 9
Guest
Guest
Motivator Hole-in-One Smile Seeker
Love Fool Vanity Monster Sherlock Holmes The Voice Bookworm Peacemaker Attention! Firestarter Notable Answerer Well-Known Questionnaire
Accepted Answer Pending Moderation
0
Votes
Undo
that could fix the issue, but than it is not longer visible - but still there. i want it to disappear fully, google doesnt like it, when you hide text like that.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 10
Zdeněk Štěpánek
Zdeněk Štěpánek
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi, maybe you could use css declaration text-indent:-9999px; for those <li class="item-xxx(xxx=item number)"
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 11
Guest
Guest
Motivator Hole-in-One Smile Seeker
Love Fool Vanity Monster Sherlock Holmes The Voice Bookworm Peacemaker Attention! Firestarter Notable Answerer Well-Known Questionnaire
Accepted Answer Pending Moderation
0
Votes
Undo
btw. i chose in joomla the link typ "external url"
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 12
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.