Add an image to individual navigation tabs

Add an image to individual navigation tabs

Brogan

XenForo moderator
Staff member
Brogan submitted a new resource:

Add an image to individual navigation tabs (version 1.0) - Each tab can have a different image applied.

Another simple bit of CSS which will add an image to the navigation bar for each tab, in front of the tab text/name.

You need to know the class name for each tab.
The default ones are: home, forums, members, help.
If you are using the Nodes As Tabs add-on, each tab will have a class name such as nodetab38.

You can use one of the browser inspection tools to identify the tab classes.

For each tab, you will need to add CSS similar to the following to...
Read more about this resource...
 

CyberAP

Well-known member
Won't it be simple to use just background-image? Just a bit of padding on navTab + a background-image.
Pseudo-elements are not a cross-browser feature, I think it is better to use css2 properties.
 
I feel dumb.. how do I find out what node_tab # is what?

For instance:

Code:
.navTab.nodetab38:before {
How do I know if my tabs are 1-4 or 100-130?
 

it_

Member
Brogan or anyone else.
I really would appreciate the code for just showing the icon without tab text, therefore the icon be linkable.
Best regards!
 

Brogan

XenForo moderator
Staff member
You can do that just by editing the phrase.
Phrases support HTML so just use IMG code.
 

Shelley

Well-known member
Appearances >> Phrase and search for instances of that specific tab it won't be difficult to locate.
 

Brogan

XenForo moderator
Staff member
You didn't say it was a link forum using the nodes as tabs add-on.

There is no phrase for that.
 

oO5 Dynasty

Well-known member
How can i add the images but take the words away. Like repleace Home/forum/members etc. with small icons?
 
Top