Hello Creators. I am looking to put my navigation tabs into my ningbar. I sort of understand kind of what I need to do, by previous codes that I'm trying to learn from. However, I can't figure it out via trial and error.
If you would like to view my site, http://addictapic.com and note the top bar/ning bar (yellow)
I want my nav tabs at the bottom of the yellow bar (on the bar, but last thing) centered and not interrupting what's currently there. (I do understand I'd have to make the ning bar wider.)
Can anyone help me do this?
Thanks everyone! Take Care!
Damien.
Tags: bar, nav, navigation tabs in ningbar, tabs, top
Permalink Reply by Ron Fritzemeier on November 20, 2012 at 12:10pm div#xg_navigation.xj_navigation
{
position: absolute;
top: 0px;
left:50%;
margin-left: -488px;
z-index: 89!important; /*(you already had this)*/
}
#xj_before_content
{
z-index: 88; /*a number lower than the z-index on your nav menu*/
position: absolute;
}
Tweak the "top" style for the nav bar to position it where you want it vertically, I see you've got some graphics under the buttons that might need adjusted to fit them on the top bar.
You can probably adjust the size of the xj_before_content by setting "height" as whatever you want.
Permalink Reply by Damien Hannah on November 20, 2012 at 2:38pm no go
Permalink Reply by George H. Compton IV on November 20, 2012 at 1:50pm This code will do exactly what you want :-)
div#xg_navigation{
position: fixed!important;
top: 0px!important;
left:84px!important;
z-index: 899999999!important;
width:auto!important;
max-width: 1031px!important;
min-width: 531px!important;}
Your width is set to auto you also have a maximum and minimum width. Here's what it looks like on your network the last picture the pixel settings on my computer is set to 800x600 pixels..
800x600 pixels on this picture below. See the width is set to auto lol :)
Permalink Reply by Damien Hannah on November 20, 2012 at 2:00pm I'm going to do this right now!! Thanks George!! :)
Permalink Reply by George H. Compton IV on November 20, 2012 at 2:10pm the reason this will work for your site is because you're using my old styled and animated tabs. so you already have all the codes to make The sub tabs work fixed :-) it really made writing the code for you easy
Permalink Reply by Damien Hannah on November 20, 2012 at 2:14pm Lol, I like to make things easy! :) ha ha, please view my site as it sits now, ASAP, nav is disabled for members ....
the navigation are hiding underneath my ningbar, they didn't go "on" it.
Permalink Reply by George H. Compton IV on November 20, 2012 at 2:08pm this code should not affect your header/masthead at all
Permalink Reply by Damien Hannah on November 20, 2012 at 2:17pm The nav links ARE attached/fixed to the ningbar, but underneath... tried moving the code to the top of my custom code box, thinking maybe it's an order of operations thing.... not the case though...
Permalink Reply by George H. Compton IV on November 20, 2012 at 2:23pm I just went to your site something is overwriting the z index.
you should place the code underneath everything else in your custom code box. And make sure you added the styles tags. And also put a copy of it in your ad box in the footer. Hopefully that will make it so nothing will override the z index
<style>
div#xg_navigation{
position: fixed!important;
top: 0px!important;
left:84px!important;
z-index: 899999999!important;
width:auto!important;
max-width: 1031px!important;
min-width: 531px!important;}
div#xg_navigation UL {
z-index: 899999999 !important;}
</style>
Permalink Reply by Damien Hannah on November 20, 2012 at 2:27pm No go.
The z index, yes that is what it was called.
TJ had issues with this as well, and had to add some code...
I'm going to resend you my custom code, so that you can see what TJ and I had to do last night...I'm no good at explaining what he did. lol
Permalink Reply by George H. Compton IV on November 20, 2012 at 2:34pm Your Ningbar is overwriting it LOL
this will fix it put it at the bottom of your NC custom code box.
<style>
#xn_bar {
z-index: 88;}
</style>
and remove this
div#xg_navigation UL {
z-index: 899999999 !important;}
Permalink Reply by Damien Hannah on November 20, 2012 at 2:41pm Yup, that did it! They aren't centered though, but I can do that with the "left padding" right?
Rowald replied to Monica Diaz's discussion 'How are you using member categories in Ning 3.0?'
caro commented on kid k's group 'Ning French Networks'
caro commented on kid k's group 'Ning French Networks'
caro commented on kid k's group 'Ning French Networks'
Thiago Santos de Moraes replied to Elshara Silverheart's discussion 'More Feature Requests'
Troy Marquis replied to Andrew Sanderson's discussion 'Video chat for ning network'© 2013 Created by Ning.
