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

Ning via Facebook

Look for new challenges to help all your dreams, plans and projects come true. Do you believe…

George H. Compton IV replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) Nonmembers/visitors redirect scripts
"Hello Petra, the code would go in your "NC custom code box", If you're the network owner you would…"
23 hours ago
Dan Lee replied to Kyryl_Ning_Support's discussion
North Pole, Express delivery - Members Ranking System 3.0
"Right not the player."
23 hours ago
Ning via Facebook

Use crowdfunding as a new efficient way to earn money for your project! How to organize it?…

Petra Haarman replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) Nonmembers/visitors redirect scripts
"Hello, i have a ning 2.0 website. where can i add this redirect script? on which page?"
yesterday
Kyryl_Ning_Support replied to Naveen Jain's discussion
Members cannot login using Linkedin Single-signon
"Hi there!
In such case could you please make some screenshots so I could see the error message that…"
yesterday
Kyryl_Ning_Support replied to Fabricio Giugni's discussion
How to make Rewards look better?
"Hi Gerard,
I can see that you have set up the points for different activities on your network, howe…"
yesterday
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
North Pole, Express delivery - Members Ranking System 3.0
"Hi Dan,
I guess something like this could be done with a bunch of custom code, but I'm not sure abo…"
yesterday
Wilkin, Otoniel , Paul Morrant and 8 more joined Ning Creators Social Network
yesterday
Jennifer Peterson left a comment on
"It is saying that this plug in is not supported and won't me let me download the different digests.…"
yesterday
Naveen Jain replied to Naveen Jain's discussion
Members cannot login using Linkedin Single-signon
"Hi Kyryl,
I am not sure, why you did not encounter the issue. I just tried myself - ( I am the only…"
yesterday
Ning via Facebook

Any digital plans for 2018? Take your time! Here are 100+ digital marketing research 2017…

More…

Meanwhile, you can check our social media channels