Add an image to individual navigation tabs

[Bi0S Emerald Member Posts:12,183 Threads:12,128 Reputation 31]

Compatible XF Versions:

• 1.0
  
• 1.1
  
• 1.2
  
• 1.3
  
• 1.4
  
• 1.5
  

This resource is not affiliated with XenForo Ltd.

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

For each tab, you will need to add CSS similar to the following to EXTRA.css:

This will add an image in front of the Forums tab text.

Code:

.navTabs .publicTabs .navTab.forums:before {
content: url('@imagePath/path/to/image.png');
display: inline;
vertical-align: middle;
float: left;
padding-left: 4px;
padding-top: 4px;
}

This will add an image in front of the Fantasy F1 tab text, which has been added using the Nodes As Tabs add-on.

Code:

.navTabs .navTab.nodetab38:before {
content: url('@imagePath/path/to/image.png');
display: inline;
vertical-align: middle;
float: left;
padding-left: 4px;
padding-top: 4px;
}

 
The text nodetab38 denotes the tab.
Add a new block of code for each tab as required.

The CSS can be adapated to suit, depending on the size of image and desired result.

This is how it looks:


Note that you may need to add additional styling and/or adjust the existing styling of the navigation tabs to get it to display correctly when the tab is selected. This will vary for each style.
For example, this is how it appears unstyled:


With a little bit of styling though, it appears like this:

[simoclick DF Member Posts:16 Threads:1 Reputation 0]

thanks for this very useful guide

[Comcast DF Member Posts:31 Threads:3 Reputation 0]

How do you add a link to a tab?

[Smoulougde DF Member Posts:47 Threads:2 Reputation 0]

Hi, any update for XF 2.0 ?