[Forum] How do you add CSS to navtab links?

[Boofo]

How do you add CSS to navtab links in the Navigation manager, like you do here for the "Purchase" tab font color?

[Matthew Gordon]

This is how it is being done here:

#tab_nzm4_882 a.navtab {
    color: #FBCB3D;
}

Change tab_nzm4_882 to the Identity of the navtab and the color or any other CSS element to what you want it to be.

This goes in the additional.css template, of course.

[Abdulla Ashoor]

Each tab have a unique id. you still can play with navigation by editing the 'navbar_tabs' template

[Boofo]

This is how it is being done here:

#tab_nzm4_882 a.navtab {
    color: #FBCB3D;
}

Change tab_nzm4_882 to the Identity of the navtab and the color or any other CSS element to what you want it to be.

This goes in the additional.css template, of course.

How do you get the black text for the hover color?

- - - Updated - - -

I figured it out, I think, unless there is an easier way.

#tab_nzgw_296 a.navtab {
    color: #FBCB3D;
}
#tab_nzgw_296 a.navtab:hover {
    color: #000000;
}

[Paul M]

Thats the correct way.

[Matthew Gordon]

I believe that is how it should be done. Glad you figured it out.

[Boofo]

Thank you for verifying that, Paul and Matthew, and thanks to Matthew for showing me the new way to do it.

I'm having a blast with the new Navigation Manager.

- - - Updated - - -

I was doing it like this before but things have changed.

.navtabs li a.navtab_donate { color: #FBCB3D; }
.navtabs li a.navtab_donate:hover { color: black; }

[Wayne Luke]

How do you get the black text for the hover color?

Here it uses the standard navbar_tab_select_color stylevar. Doing it in CSS if the hover is unique is the proper way.

[Boofo]

Okay, here is what I have now and it works except when the button is highlighted. Then it shows the text in the orange/brown color. How do I fix that?

/* Donate Navbar Button Color */
#tab_nzgw_296 a.navtab {
    color: #FBCB3D;
}
#tab_nzgw_296 a.navtab:hover {
    color: {vb:stylevar navbar_tab_selected_color};
}

You were close Wayne. You forget the ending ed for style variable (navbar_tab_selected_color)

[Wayne Luke]

You were close Wayne. You forget the ending ed for style variable (navbar_tab_selected_color)

Ahh, sorry about that.

Building on your code this is what I get:

/* Donate Navbar Button Color */
#tab_nzgw_296 a.navtab {
    color: #FBCB3D;
}
#tab_nzgw_296 a.navtab:hover {
    color: {vb:stylevar navbar_tab_selected_color};
}

.navtabs li.selected#tab_nzgw_296 a.navtab {
    color: {vb:stylevar navbar_tab_selected_color};
}

This shows my tab orange and then red (my selected color) on hover and when it is the active tab.

[Boofo]

Thank you, Wayne, That fixed it. Are you using the default style on your site? That red color sounds interesting.

I never would have gotten the third part of the code you posted. I'm really bad at the CSS stuff.

[Wayne Luke]

The site I am playing with does not use a default style. It is dark blues and black backgrounds with white text and bold link colors.

[willy888]

Is there any way to have only menu on tab and not link ?

[Wayne Luke]

Is there any way to have only menu on tab and not link ?

A menu where you click on the tab and it drops down? No... Not at this time. Andreas is working on an Addon that he wants to provide this functionality with. It is on vBulletin.org.

If you mean a menu in the subnav where it shows a link and that drops down like the "Quick Links" menu above, then yes. Just add a new menu to your tab in the Navigation Manager.

[willy888]

I have already a mod Evi Menu tabs that I use , but I thought with this new vb tab function that I wouldn't have to use it anymore.