Motif: search box?

• 

  margaretrosestringer · Member · Jan 11, 2014 at 10:06 pm

  • Copy link
  • Add topic to favorites

  I’d really like to have one – in the nav bar? Anywhere?
  Is this possible, please?

  The blog I need help with is: (visible only to logged in users)

• 

  raincoaster · Member · Jan 11, 2014 at 10:48 pm

  • Copy link

  Use the search widget.

• 

  margaretrosestringer · Member · Jan 11, 2014 at 10:56 pm

  • Copy link

  It certainly does what it says: but I would much rather have a search box as part of the nav bar, or near it.
  I’d like to see if anyone has a CSS suggestion before admitting defeat.
  But thank you!

• 

  justpi · Member · Jan 12, 2014 at 12:10 am

  • Copy link

  @media screen and (min-width: 880px) {
  .site {
  position: relative;
  }
  #search-2 {
  position: absolute;
  top: 379px;
  right: 2.98245614%;
  padding: 0;
  margin-right: 25px;
  }
  #search-2 .widget-title {
  display: none;
  }
  }
  @media screen and (min-width: 1011px) {
  #search-2 {
  top: 380px;
  right: 0;
  }
  }
  @media screen and (min-width: 1200px) {
  #search-2 {
  top: 415px;
  margin-right: 36px;
  }
  }

  A couple of numbers might need tweaking.

• 

  margaretrosestringer · Member · Jan 12, 2014 at 12:36 am

  • Copy link

  @media screen and (min-width: 880px) {
  	.site {
  	position: relative;
  }
  
  #search-2 {
  	position: absolute;
  	top: 379px;
  	right: 2.98245614%;
  	padding: 0;
  	margin-right: 25px;
  }
  
  #search-2 .widget-title {
  	display: none;
  }
  
  @media screen and (min-width: 1011px) {
  	#search-2 {
  	top: 380px;
  }
  
  @media screen and (min-width: 880px) {
  	.site {
  	position: relative;
  }
  
  #search-2 {
  	position: absolute;
  	top: 379px;
  	right: 2.98245614%;
  	padding: 0;
  	margin-right: 25px;
  }
  
  #search-2 .widget-title {
  	display: none;
  }
  
  @media screen and (min-width: 1011px) {
  	#search-2 {
  	top: 380px;
  	right: 0;
  }
  
  @media screen and (min-width: 1200px) {
  	#search-2 {
  	top: 415px;
  	margin-right: 36px;
  	right: 0;
  }
  
  @media screen and (min-width: 1200px) {

  and nothing I can do will enable the rest of the coding that follows the 1200px to remain. It keeps disappearing …

• 

  justpi · Member · Jan 12, 2014 at 4:53 am

  • Copy link

  Delete all this mess and copypaste the code I wrote.

• 

  margaretrosestringer · Member · Jan 12, 2014 at 5:00 am

  • Copy link

  I did that. I just did it again.
  You can see the result.

• 

  justpi · Member · Jan 12, 2014 at 5:14 am

  • Copy link

  There’s no result because you removed the widget.

• 

  margaretrosestringer · Member · Jan 12, 2014 at 5:18 am

  • Copy link

  I was supposed to leave it in?
  I am a mindreader?

• 

  margaretrosestringer · Member · Jan 12, 2014 at 5:20 am

  • Copy link

  Thank you: that works perfectly.

• 

  justpi · Member · Jan 12, 2014 at 5:41 am

  • Copy link

  No, when the theme becomes narrower the searchbox isn’t centered, so turn the 379 and the 380 to 388.
  As for mindreading, sorry I wasn’t clear enough: my reply was a continuation of raincoaster’s correct reply. And I assumed you have read the support docs on CSS; CSS has to do with appearance, not functionality: it cannot create an element such as a widget, it can only restyle it (including repositioning).

• 

  margaretrosestringer · Member · Jan 12, 2014 at 5:47 am

  • Copy link

  I have made those two alterations.
  I have ventured into reading up on CSS: I appear to be unable to hold it in my head, and the only things I retain are those I repeat frequently.