• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Navigation customization

besto

New member
#1
Hi,

I'm trying to completely customize the navigation bar.
From looking at the code it looks like the nav bar is part of the header.
When trying to bring the nav bar away from header container, it would break everything.

What I'm trying to do: I want to have different color/style for each tab.
I had a few ideas on how it could be done. But has anyone here done this before?


Any help would be greatly appreciated!

Thanks
 

Chris D

XenForo developer
Staff member
#2
Each tab has its own class, so you can easily style each tab using CSS.

Now I'm not great with styling stuff but this is some basic CSS to get you on your way.

There is a special template called EXTRA.css and you can put these changes in there:

Code:
.home
{
	background-color: #26CF2D;
}

.forums
{
	background-color: #FA19E8;
}

.members
{
	background-color: #FA4A4A;
}


Yeah , it looks crap, but with CSS at your disposal you can easily produce something great looking.
 

Jake Bunce

XenForo moderator
Staff member
#3
You may want to be slightly more specific in your CSS selectors to avoid accidentally affecting other areas:

Code:
.navTabs .home
{
	background-color: #26CF2D;
}

.navTabs .forums
{
	background-color: #FA19E8;
}

.navTabs .members
{
	background-color: #FA4A4A;
}