Search Bar Location in Store

• 

  dstc3223 · Member · Mar 6, 2015 at 10:01 pm

  • Copy link
  • Add topic to favorites

  Hello!
  I’m currently using the Sela theme on my site: https://distantshorestrading.wordpress.com. I have a store on my site and I am looking to bring the search bar from the store up beside the text that says ‘Store’. It doesn’t actually have to be beside the text, but on that level. ie, ideal scenario, search box on the right hand side, but the same row as ‘Store’ text. I am hoping this will bring the rest of the products up a small amount. Any help will be greatly appreciated. The page specifically I need help with is: https://distantshorestrading.wordpress.com/store/

  Thank you!

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

• 

  thesacredpath · Member · Mar 6, 2015 at 11:39 pm

  • Copy link

  Hi there, we can use the following CSS, which moved the search bar up in line with “Store” and to the right. At about 410px, it starts to overlap on the title, so I’ve used a Media Query to limit this change to 450px and wider screens/devices.

  @media screen and (min-width: 450px) {
  .ecwid-SearchPanel {
      position: absolute;
      width: auto;
      right: 0;
      top: 0;
  }
  }

• 

  dstc3223 · Member · Mar 9, 2015 at 4:48 pm

  • Copy link

  Thank you for the prompt reply! The location of the search bar is perfect and it looks great in different sized windows, thank you! However, it appears to have lost its functionality now. It cannot be clicked / used to search. Any help in resolving this problem is much appreciated.

  Thank you,
  DSTC

• 

  thesacredpath · Member · Mar 9, 2015 at 10:03 pm

  • Copy link

  Hi there, let’s set a z-index of 1. That seems to take care of the issue. Use this CSS instead.

  @media screen and (min-width: 450px) {
  .ecwid-SearchPanel {
      position: absolute;
      width: auto;
      right: 0;
      top: 0;
  	z-index: 1;
  }
  }