navigation - FORUM - Ning Creators Social Network2024-03-29T09:38:18Zhttps://creators.ning.com/forum/topics/feed/tag/navigationA Simple Way to Move Navigation Up Into Account Barhttps://creators.ning.com/forum/topics/a-simple-way-to-move-navigation-up-into-account-bar2023-02-28T19:58:20.000Z2023-02-28T19:58:20.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>I've been cleaning <a href="https://landsurveyorsunited.com/" target="_blank">my Ning Network up for our 16th Birthday celebration</a> as a community and I came across a great trick for moving your primary navigation up into the account bar.</p><p><a href="https://landsurveyorsunited.com/" target="_blank"><img class="align-full" src="{{#staticFileLink}}10977937482,RESIZE_710x{{/staticFileLink}}" alt="Move Ning Navigation" /></a></p><p><br />Simply add the following to your custom code bottom section near the top of other codes..</p><p><script><br />// movenav to before ningbar<br />x$(document).ready(function() {<br />x$('nav.header-nav.navbar').insertAfter('div.dashboardBarWrap');<br />});<br /></script></p><p> </p><p>I am searching today for a way to make this script load faster so there isn't a 1 second lag but there you have it. Perhaps Bizz will know a way..</p><p>Let me know if you have any questions or need help with your ning community.</p></div>Hide Desktop Navigation Menu on Mobile Version so Just Hamburger Menu Showshttps://creators.ning.com/forum/topics/hide-desktop-navigation-menu-on-mobile-version-so-just-hamburger-2021-04-26T22:57:33.000Z2021-04-26T22:57:33.000ZScott Bishophttps://creators.ning.com/members/ScottBishop<div><p>Can anyone help me hide my desktop version of my main navigation menu from showing up when viewing on a mobile device? The hamburger menu is already visable so I don't need two Nav menu's. </p><p>Ning helped me customise my Nav menu (thank you, thank you) when converting over from N2 to N3 but forgot to have it hidden in the mobile view. Ning has emailed me asking if everything is okay but they haven't gotten back to me after replying about this. </p><p>You can see what I mean by going to <a href="https://surfershot2.ning.com">https://surfershot2.ning.com</a> and press the F12 key. (Note: this site has not been redirected yet)</p><p><a href="{{#staticFileLink}}8838454484,RESIZE_400x{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}8838454484,RESIZE_400x{{/staticFileLink}}" width="400" alt="8838454484?profile=RESIZE_400x" /></a></p></div>Tip: Side Nav Menu Hide and Show ver1https://creators.ning.com/forum/topics/tip-side-nav-menu-hide-and-show-ver12020-05-09T21:51:17.000Z2020-05-09T21:51:17.000ZBizzhttps://creators.ning.com/members/Bizz208<div><p>I was asked to share how I did this so here is the code for this version. You can see this working on my site except I have added some extras of how my site behaves when the nav is activated and also added my own header. This tip just shows the working slide in and out of view menu.</p><p>This is set up for the sites which have the menu on the left side off their sites.</p><p>Demo Video</p><p><iframe title="vimeo-player" src="https://player.vimeo.com/video/416744797" width="640" height="360" frameborder="0" allowfullscreen=""></iframe></p><p> </p><p>So here is how to set this up</p><p>First have you menu set to the side via the design studio and set it also to scrolling NOT fixed. It's best to do this anyway because if your menu is to long your menbers can't reach the bottom of the menu on some screen sizes, this is just an issue with the Ning setup of the menu as standard.</p><p><a href="{{#staticFileLink}}4883184467,RESIZE_930x{{/staticFileLink}}"><img class="align-full" src="{{#staticFileLink}}4883184467,RESIZE_710x{{/staticFileLink}}" alt="4883184467?profile=RESIZE_710x" width="710" /></a>How to adjust the width of the menu in the code</p><p>In the CSS below there are three lines to change if you want a different width than what I've added. Where you see..</p><p>/** Position of button when open **/ /** Sets width of nav menu **/ and /** width of navOpen must be the same as site-headerFrame value **/</p><p>there is a value of 300px. To make is smaller set these values to what you want ie if you want it a little smaller set these to 200px for example. As a tip if you want the button to site more inside the menu set that value to a little less for the position of button when open. For example if you set the menu to 200px set this button value when open to something like 155px.</p><p><span style="text-decoration:underline;"><strong>Ok so here is the code.</strong></span></p><p> The first part of code is a little custom code which goes in your Social Site Builder > Custom Code > End Of Page Section</p><p> </p><p><script type="text/javascript"><br /> // SIDE BAR MENU<br /> x$(document).ready(function() {<br /> x$('<button type="button" id="navMenu">Menu</button>').insertBefore(".header-nav");<br /> x$("#navMenu").toggle(<br /> function(){<br /> x$('.central-content').addClass('navOpen');<br /> x$('#pageHeader').slideUp();<br /> x$('.central-content.navOpen #navMenu').text('X');<br /> x$('html, body').animate({scrollTop : 0},600);<br /> },<br /> function(){<br /> x$('.central-content').removeClass('navOpen'); <br /> x$('.central-content #navMenu').text('Menu');<br /> }<br /> );<br /> });<br /> </script></p><p> </p><p><span style="text-decoration:underline;"><strong>Next we are going to add the CSS for the menu</strong></span></p><p> This code goes in your Design Studio > Custom CSS > Theme or Global if you have the tick box activated</p><p> </p><p>/***Site Menu **/<br /> @media only screen and (max-width:766px){<br /> #navMenu { display:none<br /> }}<br /> @media only screen and (min-width:767px){<br /> #navMenu {<br /> display:block<br /> }<br /> /** Menu button and style plus position from top **/<br /> #navMenu {<br /> position: fixed;<br /> top:35px;<br /> width: 80px; <br /> z-index: 2000; <br /> height: 40px;<br /> font-weight:bold;<br /> font-size:16px;<br /> left:0;<br /> border-radius: 0px 0px 10px 0px;<br /> transition: 0.7s;<br /> }<br /> /** If admin this moves it down further to accomadate the design bar **/<br /> .isAdmin #navMenu {<br /> top:70px;<br /> }<br /> /** Button On Hover **/<br /> #navMenu:hover{<br /> color:white;background-color:royalblue<br /> }<br /> .central-content .site-headerFrame .site-header {<br /> width:100%<br /> }<br /> /** Button when nav is open **/<br /> .central-content.navOpen #navMenu {<br /> right:0;<br /> left: 255px;/** position of button when open**/<br /> width:45px;<br /> height:45px;<br /> border-radius:50px;<br /> transition: 0.8s;<br /> }<br /> .site-headerFrame{<br /> width: 300px; /*sets width of nav menu**/<br /> left: -300px; /*sets width of nav menu**/<br /> top: 0;<br /> bottom: 0;<br /> position: absolute; <br /> transition: 0.8s;<br /> }<br /> .central-content.navOpen .site-bodyFrame{ padding-left:300px;transition: 0.8s; }/** width of navOpen must be same as site-headerFrame value **/<br /> .central-content.navOpen .site-headerFrame{ left:0;transition: 0.8s; }<br /> .central-content .site-bodyFrame{ padding-left:0px;transition: 0.8s; } <br /> .central-content.navOpen .site-header{ width:100% }<br /> }</p><p>/***Site Menu END **/</p><p> </p></div>How to Change the Navigation Font that is Not Listedhttps://creators.ning.com/forum/topics/how-to-change-the-navigation-font-that-is-not-listed2019-11-15T06:38:10.000Z2019-11-15T06:38:10.000ZScott Bishophttps://creators.ning.com/members/ScottBishop<div><p>Does anyone know how to change the font for the navbar to a font that is not listed for Ning 2.0? </p><p>I would like to have Amaranth font for my Nav selectlon. </p><p>I would like to use it site wide as well if that can be done. </p></div>How To Make Some Design Changes To Your Sub Menu's ie Categories etc And TabContainershttps://creators.ning.com/forum/topics/how-to-make-some-design-changes-to-your-sub-menu-s-ie-categories-2017-01-01T14:35:53.000Z2017-01-01T14:35:53.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>In our design studio we can make just about every change to the menus and links we need all that is except for our sub nav menus. These menus are thing like the categories above a page, group nav menus and also in our email. The other area we can't make changes to are the tabContainers tabs.<br />
<br />
So here is a way to be able to make those changes, once again you can see this working on my site and below are some links to take you to some examples.<br />
<br />
Blog Page: <a href="http://bizzssite.ning.com/blog">http://bizzssite.ning.com/blog</a><br />
<br />
Photo page showing some categories: <a href="http://bizzssite.ning.com/photos">http://bizzssite.ning.com/photos</a>  Note:see the extra tip at the bottom of how to have different menu colours on particular pages as in this example.<br />
<br />
TabContainer Examples: Social Channels Page: <a href="http://bizzssite.ning.com/social-channels-tabs">http://bizzssite.ning.com/social-channels-tabs</a>   Members Page: <a href="http://bizzssite.ning.com/members/JOHNBIZLEY">http://bizzssite.ning.com/members/JOHNBIZLEY</a><br />
<br />
Groups List Menu: <a href="http://bizzssite.ning.com/tips-channels">http://bizzssite.ning.com/tips-channels</a><br />
<br />
In A Group : <a href="http://bizzssite.ning.com/tips-channels/videos-tips">http://bizzssite.ning.com/tips-channels/videos-tips</a><br />
<br />
All we need to be able to design them is some CSS, below I have placed the code into the relevent sections. A key is given so you can see which parts do what so you can make changes to fit your site. And finally at the bottom is some extra information of how to be able to have different looking menus for certain pages.<br />
<br />
<span style="text-decoration: underline;"><strong><span class="font-size-5">KEY</span></strong></span><br />
<br />
<strong><span style="color: #003300;">BACKGROUND COLOUR</span></strong>: This is the colour of the tabs and looks like this; background-color: #00a6eb; you can use hex values as shown or you can just write the colour name like this; background-color: blue<br />
<strong><span style="color: #003300;">TEXT COLOUR</span></strong>: This is shown like this: color: #FFF and again could be wrote like this color:white  Note: note that code tends to use American spelling so it is wrote like this color instead of this colour<br />
<strong><span style="color: #003300;">BORDER-RADIUS</span></strong>: This is the amount of roundness you want on the corners of the tab, the higher the value the more round it becomes<br />
<strong><span style="color: #003300;">TEXT-DECORATION</span></strong>: This is what gives you an underline to links when hovered over so this is removed to keep the tab looking cleaner<br />
<strong><span style="color: #003300;">BORDER-BOTTOM</span></strong>: On some themes the tabs have a border at the bottom of it when hovered over or for the active tab, again this is removed for a cleaner tab<br />
<strong><span style="color: #003300;">THE HOVER COLOURS</span></strong>: In the code you will see wrote in the opening line the word hover, where you see this is for the hover colour setting<br />
<strong><span style="color: #003300;">CURRENT</span></strong>: As in the hover this is the colour for the current active tab<br />
<strong><span style="color: #003300;">MARGIN-RIGHT</span></strong>: This is just a small margin added to the right of each tab so there is a little space between them.<br />
<br />
Here is the css used to be able to add some design changes, this just goes in your custom css section<br />
<br />
/* DEFAULT NAVIGATION MENUS CATEGORIES */<br />
                                                           <br />
/* Categories etc */<br />
.subnav li { margin-right:3px;margin-bottom:5px }<br />
.subnav li a { background-color: #00a6eb; color:white; padding:10px; border-radius:2px;}<br />
<br />
.subnav li a:hover, .subnav li.subnav-current > a {<br />
    background-color: #0EA545; color: #FFF; text-decoration: none;}<br />
<br />
/* Groups Page Categories Menu */<br />
.groupHeader-nav .subnavline > li { margin-right:3px; margin-bottom:5px }<br />
.groupHeader-nav .subnavline > li a{ background-color: #00A6EB; color: #FFF; padding:10px; border-radius:2px;border-bottom:none; }<br />
<br />
.groupHeader-nav .subnavline > li:hover > a, .subnavline > li.current > a { background-color: #0EA545;<br />
    color: #FFF; text-decoration: none;border-bottom:none}<br />
<br />
/* Tab Containers Navigation */<br />
.tabContainerSection-tabs.subnavline > li > span{<br />
 color:white;border:none;background-color:#00a6eb;margin-right:3px;margin-bottom:5px; border-radius:3px }<br />
.tabContainerSection-tabs.subnavline span:hover{color:white; background-color: #0EA545;}<br />
li.tabContainerSection-tab.current > span{ background-color: #0EA545;color:white}<br />
<br />
<br />
SOME EXTRA TIPS<br />
<br />
You can make different coloured menus depending on particular pages if you wanted those different to the default code we have added above. You simply need to add the page name before the lines of code you want to change. For example I have added the code above as the default for the site but I want to have my photos page categories a different colour so I would simply add the page name before the code like this<br />
<br />
.page-photos .subnav li a { background-color: black; color:white; padding:10px; border-radius:2px;}<br />
.page-photos .subnav li a:hover, .page-photos .subnav li.subnav-current > a {<br />
    background-color: seashell; color: black; text-decoration: none;}<br />
<br />
So in the above code I have changed the colour of the tabs to black and the text color is white. For the hover and current I changed the tab colour to seashell and the text black.<br />
<br /></p>
</div>How To Move the 'More' categories link back into the navigation menuhttps://creators.ning.com/forum/topics/how-to-move-the-more-categories-link-back-into-the-navigation-men2016-12-22T22:32:16.000Z2016-12-22T22:32:16.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>Small tip here to help those who have a lot of categories which will make the 'More' link show up. When it does it tends to sit right out to the right hand side away from the main categories menu. This line of code will bring it back into the categories menu rather than all the way out to the right.</p>
<p>/* STOP MORE TAB MOVING OUT TO THE RIGHT*/<br />
.subnav-more{ float:none; position:static!important }<br /></p>
</div>Font Tip: Add Effects To Your Imported Google Fontshttps://creators.ning.com/forum/topics/font-tip-add-effects-to-your-imported-google-fonts2013-11-06T00:18:23.000Z2013-11-06T00:18:23.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>If you have been looking for a simple way to add typographic effects to your headings, titles, etc. here is a tip for you. NOTE: This tip is for NCs who have imported Google Custom Fonts into their networks.</p>
<h3>Add Style and Depth to your Type, Easily</h3>
<p><a href="https://developers.google.com/fonts/docs/getting_started#Effects" target="_blank">Google Fonts</a> has silently released a Beta feature for adding Font Effects to your imported fonts.<br> <a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/556512?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/556512?profile=original" alt="Google Font Effects" width="449"></a></p>
<p>Normally, the types of effects that I am about to show you must be achieved using <a href="http://creators.ning.com/forum/topic/search?user=1m2dr5qvmy2ve&q=CSS3" target="_self">CSS3 styling</a>, but Google has made this easier for you.</p>
<p>To use this new beta feature, simply add effect= to your Google Fonts API request and add the corresponding class name to the HTML element(s) that you want to affect. In our example above, we used the shadow-multiple font effect, so the request would look like:</p>
<div style="padding: 5px; border: 1px solid black; background-color: #eaeae4;">
<br>
<a rel="nofollow" href="http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple">http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple</a>
</div>
<p><br> To use the effect, add the corresponding class name to your HTML element(s). The corresponding class name is always the effect name prefixed with font-effect-, so the class name for shadow-multiple would be font-effect-shadow-multiple:</p>
<div style="padding: 5px; border: 1px solid black; background-color: #eaeae4;">
<div class="font-effect-shadow-multiple">
This is a font effect!
<div>
</div>
<br> You can request multiple effects by separating the effect names with a pipe character (|).
<div style="padding: 5px; border: 1px solid black; background-color: #eaeae4;">
<br>
<a rel="nofollow" href="http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple">http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple</a>|3d-float
</div>
<br> Here is a complete listing of all the font effects offered by Google (
<a rel="nofollow" href="https://developers.google.com/fonts/docs/getting_started#Effects" target="_blank">go here to get effect codes</a>)
<br>
<a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/556568?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/556568?profile=original" width="417"></a>
</div>
</div>
<p>If you ever find that you need help with your Network redesign or simply adding some interaction to your network, <a href="http://creators.ning.com/profile/ElSurveyor" target="_self">send me a message on my profile</a> or give me a call. I'm happy to help and look forward to seeing what you have done!</p></div>Sticky TIP: Make Your Navigation Sticky (Fixed to Top of Site on Scroll)https://creators.ning.com/forum/topics/sticky-tip-make-your-navigation-sticky-fixed-to-top-of-site-on2013-10-22T21:47:07.000Z2013-10-22T21:47:07.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>Ok, so I am working on a method to display latest activity module as sticky module to the top right of my site (<em>open to suggestions</em>). But for now, I have a tip for you on how to make your navigation stick to the top of site on scroll.</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/556366?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/556366?profile=original" width="481"></a></p>
<p><span class="font-size-4"><strong>Add this to CSS:</strong></span></p>
<div style="padding: 5px; border: 1px solid black; background-color: #eaeae4;">
<p>.JFsticky {<br> position: fixed;<br> width: 100%;<br> left: 0;<br> top: 0;<br> z-index: 100;<br> border-top: 0;<br> }<br></p>
</div>
<p><span class="font-size-4"><strong>Add This to Custom Code (bottom):</strong></span></p>
<div style="padding: 5px; border: 1px solid black; background-color: #eaeae4;">
<p><script type="text/javascript"></p>
<p>x$(document).ready(function() {<br> var stickyNavTop = x$('.navbar').offset().top;<br> <br> var stickyNav = function(){<br> var scrollTop = x$(window).scrollTop();<br> <br> if (scrollTop > stickyNavTop) {<br> x$('.navbar').addClass('JFsticky');<br> } else {<br> x$('.navbar').removeClass('JFsticky');<br> }<br> };<br> <br> stickyNav();<br> <br> x$(window).scroll(function() {<br> stickyNav();<br> });<br> });<br> </script></p>
</div></div>"tip" apple navigation tabs, light and dark versions with animation fx'shttps://creators.ning.com/forum/topics/tip-apple-navigation-tabs-light-and-dark-versions-with-simple2012-11-10T18:46:11.000Z2012-11-10T18:46:11.000ZGeorge H. Compton IVhttps://creators.ning.com/members/GeorgeHComptonIV<div><p>Thanks <span class="sender_name"><a href="http://creators.ning.com/profile/daveh">dave</a></span> for the idea and the snippets of codes and you're welcome for the tabs :-)</p>
<p>You can change the color Of the text by changing the colors black and white in the code below. White is the the color of the mouse over affect.</p>
<p>you can change the width of the main tabs by Lowering the numbers in this line of code <strong><span style="color: #0000ff;">min-width:165.4px!important;</span></strong> its the very last line</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/553226?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/553226?profile=RESIZE_1024x1024" width="650"></a></p>
<p>Right click on the images and open it in a new tab to get a better view</p>
<p></p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/553317?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/553317?profile=RESIZE_1024x1024" width="650"></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/553347?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/553347?profile=RESIZE_1024x1024" width="650"></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><strong><span style="color: #0000ff;" class="font-size-5">Dark tabs</span></strong></p>
<p><span class="font-size-4" style="color: #0000ff;">this code goes in your NC custom code box<br></span></p>
<p><link rel="stylesheet" type="text/css" href="http://storage.ning.com/topology/rest/1.0/file/get/11387727?profile=original" /></p>
<p><style><br> DIV#xg_navigation .xg_subtab SPAN{color:black!important;<br> transition:all 1s ease-out;<br> -webkit-transition:all 1s ease-out;<br> -moz-transition:all 1s ease-out;}<br> DIV#xg_navigation .xg_subtab SPAN:hover{color:white!important;<br> transition:all 1s ease-out;<br> -webkit-transition:all 1s ease-out;<br> -moz-transition:all 1s ease-out;}<br> DIV#xg_navigation A{opacity: 0.86!important;<br> max-width:165.4px!important;<br> min-width:165.4px!important;}<br> </style></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/553353?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/553353?profile=RESIZE_1024x1024" width="650"></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/553356?profile=original"><img class="align-left" src="http://storage.ning.com/topology/rest/1.0/file/get/553356?profile=RESIZE_1024x1024" width="650"></a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><strong><span style="color: #0000ff;" class="font-size-5">light tabs</span></strong></p>
<p><span class="font-size-4" style="color: #0000ff;">this code goes in your NC custom code box</span></p>
<p><link rel="stylesheet" type="text/css" href="http://storage.ning.com/topology/rest/1.0/file/get/11387737?profile=original" /><br> <br> <style><br> DIV#xg_navigation .xg_subtab SPAN{color:black!important;<br> transition:all 1s ease-out;<br> -webkit-transition:all 1s ease-out;<br> -moz-transition:all 1s ease-out;}<br> DIV#xg_navigation .xg_subtab SPAN:hover{color:white!important;<br> transition:all 1s ease-out;<br> -webkit-transition:all 1s ease-out;<br> -moz-transition:all 1s ease-out;}<br> DIV#xg_navigation A{opacity: 0.86!important;<br> max-width:165.4px!important;<br> min-width:165.4px!important;}<br> </style></p>
<p></p>
<p></p></div>Simple yet Elegant Side Menuhttps://creators.ning.com/forum/topics/simple-yet-elegant-side-menu2011-12-06T09:45:47.000Z2011-12-06T09:45:47.000ZGlenhttps://creators.ning.com/members/GlenAce<div><p>This simple yet elegant side menu was inspired when I browse the new youtube theme yesterday. You can view it in action <strong><a rel="nofollow" href="http://ning.creatorsnook.com" target="_blank">here</a></strong>. Hope you enjoy it when using in your network.</p>
<p></p>
<p><a href="http://ning.creatorsnook.com/forum" target="_self"><img width="750" src="http://api.ning.com:80/files/eF2bH7o0J8AhYwjPBpqTAs1u4ffrzg1gebLdCGUUnrGz1kZbdgPTZu93Soa-78jpuXmImmxusjC9RxWecLqQ0-aSDQrwWxqn/sidenavigation.png?width=750" width="750" class="align-center"></a></p>
<p> </p>
<p>Simply copy the code below and paste it in your network's module.</p>
<p></p>
<p>Put the below HTML line in your <span style="text-decoration: underline;"><strong>text box</strong></span>:</p>
<blockquote>
<p><ul class="sidecn"><br> <li><a href="/profiles/blog/new" target="_self">Add a Blog Post</a></li><br> <li><a href="/photo/photo/newWithUploader" target="_self">Add Photos</a></li><br> <li><a href="/video/video/addEmbed" target="_self">Add Videos</a></li><br> <li><a href="/forum/topic/new" target="_self">Add a Discussion</a></li><br> <li><a href="/invite" target="_self">Invite a Friend</a></li><br> </ul></p>
<p> </p>
</blockquote>
<p>Put the below line in your <span style="text-decoration: underline;"><strong>Advance CSS</strong></span>;</p>
<blockquote>
<p>/*SIDE NAVIGATION by GLEN@K*/</p>
<p> </p>
<p>ul.sidecn li{<br> margin-left:0px!important;<br> margin-bottom:1px!important;<br> list-style: none!important;<br> }</p>
<p>ul.sidecn {<br> float: left;<br> width: 155px;<br> margin: 0;<br> padding: 0;<br> list-style: none;<br> background: none no-repeat scroll 0 0 #111111;<br> border-bottom: 0px solid #1B1B1B;<br> border-top: 1px solid #323232;<br> border-right: 5px solid #91be0c;<br> }</p>
<p>ul.sidecn li a{<br> display: block;<br> text-decoration: none;<br> text-transform: none;<br> width: 115px;<br> padding: 5px 5px 5px 35px;<br> background: url(<a rel="nofollow" href="http://creatorsnook.com/cn/img/arrow-right.png">http://creatorsnook.com/cn/img/arrow-right.png</a>) no-repeat scroll 3px 0 #272727;<br> border-top: 0px solid #1B1B1B;<br> border-bottom: 1px solid #323232;<br> }</p>
<p>ul.sidecn li a:hover {<br> background: url(<a rel="nofollow" href="http://creatorsnook.com/cn/img/arrow-right-green.png">http://creatorsnook.com/cn/img/arrow-right-green.png</a>) no-repeat scroll 3px 0 #1C1C1C;<br> border-right: 5px solid #b7e530;<br> }</p>
<p>ul.sidecn li span{<br> display: none;<br> }</p>
<p>ul.sidecn li a:hover span {<br> display: block;<br> font-size: 0.8em;<br> padding: 0;<br> }</p>
<p> </p>
<p style="text-align: center;"><span style="color: #00ff00;"><strong><br></strong></span></p>
<p style="text-align: center;"><span style="color: #00ff00;"><strong>NOTE: Please change the width to fit in your side bar.</strong></span></p>
<p> </p>
</blockquote>
<p> </p>
<p> </p>
<p> </p></div>