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.

Latest Activity

planet replied to J.Ayvar's discussion
New Chat Ning 3.0
"Hi! i just logged again after 7 years away. And the chat boxs seems as simple as in 2010, no actual…"
3 hours ago
Alex_Ning_Support replied to Kyryl_Ning_Support's discussion
Servers maintenance
"Hi Trish,
Apologies for these inconveniences. Could you please describe a bit more your issue? What…"
9 hours ago
Alex_Ning_Support replied to Aubrey Williams's discussion
SSL Solution
"Hi Aubrey,
We do apologize for the long delay and not answering on Monday. But we have contacted yo…"
9 hours ago
Aubrey Williams replied to Aubrey Williams's discussion
SSL Solution
"I was told in support chat that someone would contact me about this on Monday September 18th. Of co…"
14 hours ago
Croatia replied to Kyryl_Ning_Support's discussion
Servers maintenance
"Hi creators, what's going on here? is there any news or activity? it looks like everyone is sleepin…"
yesterday
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
Servers maintenance
"Hello, Trish!
Could you please specify what kind of issue you are experiencing at the moment so we…"
Saturday
Trish Urquhart replied to Kyryl_Ning_Support's discussion
Servers maintenance
"Thanks, we are still having the problem. How long until it's fixed?
Thanks
Trish"
Saturday
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
Servers maintenance
"Hello, Anam!
So far we have resolved all the major issues related to server maintenance.
If you sti…"
Saturday
More…

Meanwhile, you can check our social media channels