Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

Ok now we have the new search it is placed in the Ning bar and for me it all is a little to cramped up there, also if someone has a long name it gets a little screwy when on a small device screen.

So I decided to move it up above the other ning links, make it a little longer and also add the word search before it. Now when the screen drops under 481px the word search is removed and when under 300px the width returns to the shorter version. As it now sits above the other links it makes it easier when on mobile to be able to select them.

Two blocks of code needed, one to go in your site&pages custom code to add a class and also move the bar. The next is some css to change the bars width and I also changed the colour of the search button. Demo images are below or for now you can see it on this site

http://scmotorcycling.ning.com/

CUSTOM CODE FOR YOU END OF PAGE SECTION

<script>
x$("#xn_bar_menu_search").closest('li').addClass('liSearchBar');
x$('.liSearchBar').prependTo('.ningbar');
</script>

CSS FOR YOU DESIGN STUDIO CUSTOM CSS SECTION

/** SEARCH BAR **/
.liSearchBar{ text-align:right; margin-top:5px; margin-right:10px; list-style:none }
@media only screen and (min-width:300px){
.globalsearch{ width:260px }
}
.globalsearch-button { background-color: #2628e0; }
.globalsearch-button:hover{ background-color:black }
.globalsearch-button::before{ border: solid 1px white }
.globalsearch-button::after{ background-color:white }
@media only screen and (min-width:481px){
#xn_bar_menu_search::before{content:"Search:"; display:inline-block; color:white }
}

DEMO IMAGES

ON A SMALL SCREEN

John :-)

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

  • Thanks John! i am glad You are back!

  • Is it a way to shrink it while on mobile phone when your login? and how to set it on the right upper corner. 

    • Dan you can adjust the width you want it to be bigger than the standard ning size by adjusting the media query like this

      @media only screen and (min-width:769px){
      .globalsearch{ width:260px }
      }

      So once the screen size is above 769px it will then be bigger,

  • The height is off. the search button is smaller on my site doesn't look like the one showed here. Any idea why? also its on the left side of the page. http://www.brainwavefusion.com

    • Hi there!

      As I see you have also copied "CSS FOR YOU DESIGN STUDIO CUSTOM CSS SECTION" to your custom CSS code field, please remove it or put it in /** **/ to make the comment from it, then the code would be working correctly.

      Regarding the search appearance, I think that the easiest solution would be setting the height of search bar to 20px so the search bar would look normal. Just add this to your custom CSS code

      .globalsearch { height20px;}
      Hope this helps.
      Best regards,
      Ning Team.
      • Thank you for your help. That worked:-)
      • How can I line it up with the signin and signup button?
        • Dan it was done that way so that all those other links did not get bunched up, you see if someone has a long name the standard ning layout then when on a small screen it all get's a little messy. If you prefer to have it inline with the other links you can remove this line from your custom code

          x$('.liSearchBar').prependTo('.ningbar');

          And remove this from your css as there won't be enough room to have the word search

          @media only screen and (min-width:481px){
          #xn_bar_menu_search::before{content:"Search:"; display:inline-block; color:white }
          }

          Then to make the search bar move to the far right you will need to add this to your css

          .liSearchBar{ float:right }

          • Thanks John for your help. It looks great now!!

            • Your welcome Dan :-)

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Marco Westerhof replied to Victoria_NING's discussion
What was done in Q1 and our plans for Q2
"Thank you for your work and the continuous improvements ! I would personally also love to see the R…"
1 hour ago
Kyryl_Ning_Support replied to Gavin Brown's discussion
Text Editor Problems
"Hi there!
There is no issue with adding of the custom plugins, the problem is that the plugins that…"
2 hours ago
Kyryl_Ning_Support replied to Gavin Brown's discussion
Text Editor Problems
"Hi there!
The message that you have left on the forum, would be read by the management as they are…"
2 hours ago
Kyryl_Ning_Support replied to Steve O'Connor's discussion
How do you kill a Ning Network?
"Hi there!
Using privacy settings you can only make the network closed what means that already regis…"
4 hours ago
Kyryl_Ning_Support replied to Hami's discussion
How to select multiple forum categories on NING 2.0
"Hi there!
That seems to be a nice workaround and basically, the only one possible solution in this…"
4 hours ago
Elshara Silverheart replied to Hami's discussion
How to select multiple forum categories on NING 2.0
"No it isn't. However you could swap categories for tags using the language editor. Then use categor…"
12 hours ago
Elshara Silverheart replied to Steve O'Connor's discussion
How do you kill a Ning Network?
"Yes it should be under privacy settings. The network creator will see the option to take the site o…"
12 hours ago
Alliance replied to Kyryl_Ning_Support's discussion
Polls are already available
13 hours ago
Ning via Facebook

Do you know what IoT or Internet of Things is? One of our creators not just knows what it is…

Elshara Silverheart replied to Traddie's discussion
Can you add a slider to a blog on Ning 2?
"Years ago I seen something on Jen Social where this was explained how to do this."
21 hours ago
Gavin Brown replied to Gavin Brown's discussion
Text Editor Problems
"Hi Kyryl,
Thanks again for your efforts and research.
If there is someone at Ning who would be inte…"
21 hours ago
More…

Meanwhile, you can check our social media channels