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

Dan Hennings replied to Dan Hennings's discussion
How do I find CSS?
"Thanks JFarrow for your extensive support of the Ning community. I am trying to learn how to find t…"
2 hours ago
⚡JFarrow⌁ replied to Dan Hennings's discussion
How do I find CSS?
"What exactly are you hoping to change?
If you look back through my discussions, you'll find a lot o…"
6 hours ago
Manuel A J replied to Victoria_NING's discussion
Happy St. Valentines Day!
""
yesterday
Manuel A J replied to Victoria_NING's discussion
Happy St. Valentines Day!
""
yesterday
Ning via Facebook

Good news for business gurus: Ning Business Club is building up! This group is a great place for…

Alida I.Gómez replied to Victoria_NING's discussion
Happy St. Valentines Day!
"Yo a mis años complacida con la vida y mi entorno ..entiendo que tenemos lo que Buscamos .
.por mi…"
yesterday
Matthew Aukai Wright commented on Rosas † Negras's blog post Bar Skysa into 3.0
"Hi there Rosas. I trired out that skysa bar and it works for me. Did you go to your >social site ma…"
Friday
Ning via Facebook

A new story from our Creator! This time, we want to share with you a story about LIS links…

More…

Meanwhile, you can check our social media channels