Add a search button in Dara theme header

• 

  lindacassidylewis · Member · Apr 9, 2017 at 5:22 pm

  • Copy link
  • Add topic to favorites

  Could someone give me the CSS to add a search button to the header area of the Dara theme? I’d like the round one with a magnifying glass rather than a search box.

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

• 

  thesacredpath · Member · Apr 11, 2017 at 2:23 am

  • Copy link

  Hi there, what we will have to do is to move a search widget up from the footer widget area. Add a search widget to one of the footer widget areas and then go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  @media screen and (min-width: 768px) {
  #page {
  	position: relative;
  }
  #tertiary .widget_search {
  	position: absolute;
  	top: 120px;
  	right: 0;
  	margin-right: 50px;
  }
  }

  The above was worked out off of my test site, and my header area is not the same as yours, so there will likely need to be some adjustments. Once you have the widget in the footer and have added the CSS, you can adjust the 120px top value to move the search box up or down. I’ve limited this change to 768px and wider screens since on screens narrower than that, the search starts to interfere with the title and the social icons.

• 

  lindacassidylewis · Member · Apr 11, 2017 at 2:51 am

  • Copy link

  Thank you. I added a search widget to the footer, but that creates a rectangular box with the word search. Is there a way to create a round button with a magnify glass, like in the header on this page: https://unboundedchurch.com/ ?

• 

  thesacredpath · Member · Apr 11, 2017 at 7:26 am

  • Copy link

  Hi, that is not something we can do with CSS, it would require javascript, which is not allowed here at WordPress.com. Moving the widget up into the header area is our only solution on Dara.

  There are a number of themes that have search features hidden behind an icon you have to click, so you may want to look through out other themes to see if there is one of those that would work for you.

• 

  lindacassidylewis · Member · Apr 11, 2017 at 3:25 pm

  • Copy link

  I see. Well, thank you again.

• 

  thesacredpath · Member · Apr 12, 2017 at 2:35 am

  • Copy link

  You are welcome.