Search Widget in Menu

• 

  lasmailzina · Member · Jul 11, 2014 at 3:07 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I’m hoping someone can help me with the code needed for moving my search widget to the menu, where my ‘home’ , ‘menu’ and ‘about’ sit.

  Many thanks!

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

• 

  designsimply · Member · Jul 14, 2014 at 9:15 pm

  • Copy link

  You can move existing elements on a page using absolute positioning.

  This article has a really good explanation about how it works, and you should check out the example images in it for background:
  http://css-tricks.com/absolute-positioning-inside-relative-positioning/

  Here is some example css to get you started. You can add it to your Appearance > Customize > CSS editor and then adjust the numbers to move the search box around on the page if needed:

  @media screen and (min-width: 600px) {
  	#main {
  		position: relative;
  	}
  	#searchform {
  		position: absolute;
  		top: -62px;
  		right: 0;
  		width: 270px;
  	}
  }

  The @media part at the beginning and the last “}” at the end work to make the rule only apply to large screens so the search box doesn’t overlap the menu on smaller screens such as iPhones or iPads.

  If you would like to learn more about how media queries work, check out this help page:
  http://en.support.wordpress.com/custom-design/custom-css-media-queries/

• 

  lasmailzina · Member · Jul 21, 2014 at 4:53 pm

  • Copy link

  Thanks very much!