• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Add an image to individual navigation tabs

Add an image to individual navigation tabs

Each tab can have a different image applied.

Brogan

XenForo moderator
Staff member
#1
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
#2
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.
 
#5
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!