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 (4)

Resolved Customize menu to show a large icon above menu text

0
Votes
Undo
  1. Malan du Toit
    Malan du Toit
  2. General Discussion
  3. Friday, 03 October 2014
  4.  Subscribe via email
Hi

Can someone please advise me on how to create a menu that has the icon displaying above the menu text. The icon should also be larger than the default font awesome icons.
Please see the attachment as an example
Attachments (1)
icons.png icons.png
Comment
There are no comments made yet.
Accepted Answer
Eugen
Eugen
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

should be very easy...

1. you can set the icon size (for example font awesome) with: fa-2x or fa-3x or fa-4x.... (http://fortawesome.github.io/Font-Awesome/examples/ at point 'Large icons')
2. t3 is based on bootstrap, so just use the helper css class 'clearfix' with responsive visibility 'visible-lg visible-md visible-sm' (http://getbootstrap.com/css/#helper-classes-clearfix) to bring the text on the next line

Ok now to the praxis... Just go to the configuration of mega menu (picture 1) and add an icon with 'fa fa-home fa-4x clearfix visible-lg visible-md visible-sm' (picture 2) to your menu and enjoy the result (picture 3).

Of course you can modify (styles) this how you want.

Regadrs,
Eugen
Attachments (3)
template_config.png template_config.png
megamenu.png megamenu.png
result.png result.png
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # Permalink
Responses (4)
Malan du Toit
Malan du Toit
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks Eugene. It worked like a charm!!!!
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Malan du Toit
Malan du Toit
Accepted Answer Pending Moderation
0
Votes
Undo
Eugen

I have another question for you. I have tried to Center the icon and text using fa-align-center. This does not work for me. How would i go about doing this? If I would like to do the same sort of styling as the image I posted. The icon and text with the blue block around it should I do this in in the megamenu.less file or how do I achieve this?
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Eugen
Eugen
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

sorry for late reply...

1. fa-align-center is an icon! and not a style to center the icon

Ok, to center an icon we have really many solutions... We want just simple and clear one...

The problem in the example above is the 'clearfix' class. Default it makes the icon to 'display-block' and we can't center it without some hacks. So just remove it! (visible-lg visible-md visible-sm will 'break' the text on the next line too)

Now we need to center everything inside the menu (li). Just use 'text-center'. That's all...

Just add this style to your template.less

.nav li {
text-align: center;
}

and remove the 'clearfix' class from menu configuration.

Regards,
Eugen
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
  • Page :
  • 1


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