Updated 06-25-2020
All the features of Ning 2.0 with Ning 3.0 responsiveness.. ;) This code has been updated. It'll work on any layout but it works the best with the (A) layouts ( layout A1 - A4)
Tested and working in all newer browsers IE 9, 10, 11 - Firefox - Google Chrome - Safari. for cell phones, Laptops, PCs, Macintosh and yes TVs....
The fullwidth portion of this code also works in IE 7, 8. for Laptops, PCs and TVs...
It's compatible with all operating systems...
Compatible hardware - cell phones, Laptops, PCs, Macintosh and yes TVs....
Most pages will fit on the smallest of cell phones but I recommend a screen resolution of 480 pixels and wider. But like I said most of the network will fit on screen resolutions of 250 pixels and greater.
With this code your N2 will pass Google developers, mobile friendly test, without using Nings mobile app.
click here to see it live on "The Constitutional Conservatives".
If anyone would like help setting this up I'll be more than happy to give you a hand.
GEOCOMs Ning 2.0 Responsive Fullwidth Network v5 part 1
Part 1 goes in your (ad-box above the header) Make sure you press the HTML button before inserting the code.
<meta name="viewport" content="width=device-width, initial-scale=1" ></meta><link rel="stylesheet" type="text/css" href="https://storage.ning.com/topology/rest/1.0/file/get/14338574?profile=original" id="N2_R_F_W_N_v5_P1" ></link>
Part 2 goes in your (custom code box)
The video enhancements come with my "profile text box video mod". To turn the mod on change the ID name in the video enhancement script from this id " id='gframe' " to this id id='MOD_FN' ..
<!-- Start GEOCOMs Ning 2.0 responsive fullwidth network v6 part 2 -->
<script src="https://storage.ning.com/topology/rest/1.0/file/get/6335680082?profile=original" type="text/javascript"></script>
<!-- START Ning 2.0 Video enhancements -->
<script src="https://storage.ning.com/topology/rest/1.0/file/get/6359602678?profile=original" type="text/javascript" id='gframe' class="gf_helper" ></script>
Part 3 goes in your (design studio CSS session)
@media screen and (max-width:1144px) {
DIV#xg.account.external-auth DIV#xg_body,
DIV#xg.account.external-auth .xg_lightborder{
width: 92%!important;
min-width: 100px!important;
max-width: 500px!important;
left:0px!important;
right:0px!important;
margin-left:auto!important;
margin-right:auto!important; } }
@media screen and (max-device-width:1144px) {
DIV#xg.account.external-auth DIV#xg_body,
DIV#xg.account.external-auth .xg_lightborder{
font-size: 34px!important;
line-height: 35px!important; } }
@media screen and (max-width: 760px) {
table.categories p, table.categories ul {
padding-left: 0px!important;
padding: 3px!important;
margin-top: 0px!important;}
TD.xg_lightborder H3{
margin-top: 70px!important;
margin-left: 0px!important;
padding-left: 0px!important; }
BODY TD.xg_lightborder {
padding-right: 0px !important;
padding: 2px !important;
width:45%!important;}
BODY .xg_theme TD.xg_lightborder,
BODY .xg_theme th.xg_lightborder{
width:45%!important;
min-width:45%!important;
max-width:45%!important;}
BODY .body_events_main ul.clist div.tb {
margin-left: 10px;
margin-top: 110px;}
BODY .body_events_main ul.clist li a span.image {
margin-right: 16px !important; } }
/* End Ning 2.0 responsive fullwidth network Part 3 */
Replies
Thanks! Yes, max-device-width will be helpful in some cases.
Well I'm finally getting around to installing this update (yeah, I'm a slug) and of course nothing goes right for me. I need to figure out how to get rid of that 'hidenav' altogether - I need my navigation showing. Then it's taken the member box and moved it up to navigation.
Probably have a code conflicting or something. Why can't things go smoothly for me? Yes, I'm whining. Have been very sick lately so little things feel enormous to me.
I'm sorry you're having trouble Kos. Send me a link to one of the webpages and I'll write a code for you. :-) Just some simple CSS will change those back. :-)
Ok Kos, i sent you the new codes in a message.. Don't forget to remove the old widen your network to 1024px code!!
Hi George!
I need the code for the same changes. Can you please send it to me?
Thanks
Hello Hami, I believe this will do the trick for you. :-)
this code goes in the add box below the header
<meta name="viewport" content="width=device-width, initial-scale=1" ></meta><link rel="stylesheet" type="text/css" href="https://bit.ly/2zhQNbX" id="N2_R_F_W_N_v5_P1" ></link>
This code goes in your NC custom code box.
<!-- Start GEOCOMs Ning 2.0 responsive fullwidth network v5 part 2 -->
<script src="https://storage.ning.com/topology/rest/1.0/file/get/11525127?profile=original" type="text/javascript"></script>
<!-- START Ning 2.0 Video enhancements -->
<script src="https://bit.ly/2zrD86v" type="text/javascript" id='gframe' class="gf_helper" ></script>
Thanks... It worked for me.
Is it possible to create a sticky navigation on scroll just link here on CREATORS NETWORK?
Hi there!
This code will make the menu stick to the top of the browser's window on a scroll, however, there are could be some issues if you have more then one line of the buttons in the navigation menu, also the menu itself isn't screen-wide, but all this could be corrected depends on the needs of the network with the css. Anyway here is the code that should be placed in the custom code section:
<script>
var initialPos = x$('#xg_navigation').offset();
x$(window).on('scroll', function () {
var scrollTop = x$(window).scrollTop(),
elementOffset = x$('#xg_navigation').offset(),
distance = (elementOffset.top - scrollTop),
backScroll = (initialPos.top - scrollTop);
if (distance <=0) {x$('#xg_navigation').attr('style','position:fixed; z-index:9999; top:0px;')};
if (backScroll>0) {x$('#xg_navigation').attr('style','position:relative;')}
});
</script>
Best regards,
Ning team.
Thank you, Kyryl.
I've been wondering if you guys were going to add that as a feature for Ning 3.0 networks. Thank you again for the code. :-)
Hi George!
Would you help me with this problem?
https://creators.ning.com/forum/topics/add-line-break-br-before-dis...
I am trying to give my website a look of ning 3.0 just like this network.
before disuccion / blog title in Activity Feed