Tip: How to make horizontal subtabs instead of vertical ?

[Bernard Lama]

This question was asked a few weeks back with no satisfactory answer so I'm going to show you  how to make horizontal subtabs.

Simply copy and paste the following code into Advanced css box. 

 

/*SUBTABS Tweaks*/
div.xg_subtab ul, div.xg_subtab li {
float: left!important;
}
#xg_navigation ul div.xg_subtab {
width: auto;
}
/*SUBTABS Tweaks*/

Just use the following code If you want to change the background and font color of your preference. 

#xg_navigation ul div.xg_subtab ul li a {
color:white;
background: red;
}

Live Preview: http://www.ksnonline.org/

Preview:

You may want to contact me via my mail id [e-mail] if you want more than this tip.

Best Wishes

Bernard

[SweetPotato]

Hey Bernard,

Nice tip, although in Firefox it looks like this:

Cheers

SP

[George H. Compton IV]

Hello Bernard and sweetpotato

this will fix that problem in Firefox

#xg_navigation ul div.xg_subtab ul li a span {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

[Bernard Lama]

Well, I did not check it in firefox before posting this tip. BTW, thank you SP and George.

[George H. Compton IV]

you're welcome Bernard :) you have a great day

[jackie spence]

Hi Brian,

Thanks for the explanation on creating the horizontal subTabs.  Now I have two questions.  I'm building my Ning Website.  This is my website.  www.womenEntrepreneursExchange.com.  

1.  I want my page/tab navigation 2-horizontal to look like  this website.  http://mybbwo.com/.  This website uses an (image slider plugin, similar to yours, and a WordPress Plug-in) to for the "Featured Ad".    I can modify the font color/style.  I just need to know what the code is and where do I put it in Ning?

2.  What image scroller plugin are you using?  Would you mind sharing the code.

[Alex Stern]

I'm also interested in question 1. Looks really cool!

Please share the code if its possible! 

[Mr John]

thank Bernard Lama

www.fusarshinlay.net

[George H. Compton IV]

hello Debbie :)

this should do the trick :-) I know it's not horizontal its vertical but it's the best I could do LOL :-) you have a great day Debbie

#xg_navigation ul div.xg_subtab ul li a span {
    border-right: 4px solid black!important;
    margin-right:-9px!important;}
#xg_navigation ul div.xg_subtab a{
    background-color: transparent!important;}

[⚡JFarrow⌁]

nice tip B~