Coming really soon...

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

Bizz ( John ) replied to Jennifer Peterson's discussion
How to Make Profile Picture Size Bigger on Profile Page
"Hi Jennifer, thanks for posting the message. You might have sent it on my old profile ( the one wit…"
2 hours ago
Ning via Facebook

#Ning #secret #success Do you want to have the secret weapon for growing your online community?…

Ning via Facebook

#Ning #learn #English Learning English or know someone who does? Check out a guide for learning…

Kulvinder Hira is now a member of Ning Creators Social Network
10 hours ago
Kyryl_Ning_Support replied to Ning Support's discussion
Ning Q3 2017 plan!
"Hi there!
Thanks for your willingness to help! 
When all preparations would be made and the trial r…"
13 hours ago
Kyryl_Ning_Support replied to Jennifer Peterson's discussion
How to Make Profile Picture Size Bigger on Profile Page
"Hi Jennifer,
Unfortunately, there is no text box under the logo where you can put your text easily.…"
13 hours ago
Alliance replied to Ning Support's discussion
Ning Q3 2017 plan!
"I am ready to be the first for the migration script"
14 hours ago
Jennifer Peterson replied to Jennifer Peterson's discussion
How to Make Profile Picture Size Bigger on Profile Page
"This is the message I sent you via my inbox here on creators. Not sure why it didn't go through.
Hi…"
19 hours ago
More…