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

Navigation customization

Discussion in 'Styling and Customization Questions' started by besto, Nov 15, 2012.

  1. besto

    besto New Member

    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
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    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;
    }
    [​IMG]

    Yeah , it looks crap, but with CSS at your disposal you can easily produce something great looking.
     
    Shelley and Jake Bunce like this.
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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;
    }
    
     
    Shelley and Chris D like this.

Share This Page