search widget placement

• 

  nationwideitservices · Member · Mar 2, 2017 at 3:41 pm

  • Copy link
  • Add topic to favorites

  I need the search widget aligned in the top right hand corner of my page. Apparently, the happiness wordpress help believes that the CSS code is too complicated to handle in the live chat and directed me to post here.

  The magnifying glass icon should be removed as it is redundant and reroutes to another separate page. The user should be able to enter a query into the text box and search while staying on the homepage.

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

• 

  thesacredpath · Member · Mar 3, 2017 at 2:49 am

  • Copy link

  Hi there, in Arcane, the entire search box and its operation at the right end of the menu bar is controlled by Javascript, and we cannot edit or change that here at WordPress.com.

  What we can do though would be to add a search widget to your footer widget area and then I can move it up and into place at the top right and hide the existing search icon at top right.

  If you wish to add the search widget and then let me know when you have, I can give you the code to move it up. It has to be inserted into the widget area before I can get the unique CSS id number so that I can move it.

• 

  nationwideitservices · Member · Mar 6, 2017 at 6:03 pm

  • Copy link

  Hello, thesacredpath. I am told you are a true guru. Please advise me on the code, and let’s see if we can get this moved.

• 

  thesacredpath · Member · Mar 7, 2017 at 12:34 am

  • Copy link

  Hi, can you please add a search widget to your footer widget area, and then I can see about moving it. Each widget has a unique CSS class, and I have to get that in order to move it.

• 

  nationwideitservices · Member · Mar 7, 2017 at 3:21 pm

  • Copy link

  I have added a search widget to footer area 2. I like that it has the text box and the query icon. It just needs to be moved. Thank you!

• 

  thesacredpath · Member · Mar 7, 2017 at 11:29 pm

  • Copy link

  Add the following to your custom CSS to move the search widget to the upper right and hide the existing search in the menu bar.

  #page {
  	position: relative;
  	margin-top: 60px
  }
  .site-footer-widgets, .site-footer, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-4, .col-xl-4 {
  	position: static;
  }
  #search-3 {
  	position: absolute;
  	top: -55px;
  	right: 0;
  }
  .col-search {
  	display: none;
  }

• 

  nationwideitservices · Member · Mar 8, 2017 at 1:31 pm

  • Copy link

  AWESOME! AMAZING! THANK YOU, SACREDPATH!

• 

  nationwideitservices · Member · Mar 8, 2017 at 1:31 pm

  • Copy link

  AWESOME! AMAZING! THANK YOU, SACREDPATH!

• 

  thesacredpath · Member · Mar 9, 2017 at 2:34 am

  • Copy link

  You are welcome.