Search Bar CSS Help

• 

  carolinafiltersinc · Member · Apr 12, 2017 at 1:41 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I am trying to get the search bar display: none; when the site is being viewed in tablet and phone view. Right now I have:

  /* Hide Search Button */
  a#header-search-button {
  display: none;
  }

  but the search box is still visible 33×4

  Can you please help me code the CSS so the box completely disappears?

  Thanks in advance!

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

• 

  dcoleonline · Staff · Apr 17, 2017 at 7:14 pm

  • Copy link

  Hi there,

  You can replace the code you have with the following:

  /* Hide Search Button */
  
  a#header-search-button,
  #page #masthead .header-search-container {
      display: none;
  }

  It keeps your existing code while also targeting the mobile/tablet view of the search bar to hide it there.

• 

  carolinafiltersinc · Member · Apr 17, 2017 at 7:38 pm

  • Copy link

  Awesome! Thank you so much! That worked exactly like I needed!!!

• 

  dcoleonline · Staff · Apr 17, 2017 at 8:28 pm

  • Copy link

  Great! If you need help with any other items, just start a new thread, and we’ll be happy to assist you.