Search icon in header – The7 Theme

[everbetaParticipant]

Hello, I am trying to get the search in my website header – I am using “the7” theme. It did not automatically replace the default theme search, so I placed the shortcode into the header area via theme options, which does accomplish getting the search icon into the proper location. However, it is not working the way I want it to – My live development site is here: http://mather.wpengine.com/

I have placed a compact search box in the location I want it via theme settings->top bar & header->layout->microwidgets
(I placed the shortcode via a “microwidget” in spot #3 – near menu)

However, clicking the search icon pushes the menu items over to the left. I would like the search to be presented in a similar way to the icon on the right of the blue header bar here on my staging server, where it pops up a search box over the rest of the menu – http://mather.staging.wpengine.com/

I tried changing the z-index in the search settings and it did not seem to make a difference. I also would like the ajax search to be presented similarly on mobile to the way the default search for my theme works – on a phone, the search icon appears to the right of the logo. Let me know if this is possible.

Thanks,
Colin

[Ernest MarcinkoKeymaster]

Hi Colin,

I tried to log-in with the details, but I’m getting an invalid username error.

I think the solution in this case will be simply switching the search position from the default static to absolute on the compact search box layout panel. An absolute positioned element is removed from the document flow, and does not take up ‘space’, so it will hover over the existing elements.
Also, a fixed width is also very highly recommended with that setting, as well as adjusting the position values: https://i.imgur.com/0YgSLKz.png

To make sure the search is relatively positioned to it’s parent (the widget container), make sure to use this custom CSS code as well:

.navigation .mini-widgets {
    position: relative;
}

If the search is still pushed a bit to the bottom, you can adjust a negative top value as well, to compensate: https://i.imgur.com/V9DJzMm.png

I hope this helps!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[everbetaParticipant]

Hi Ernest,

Thanks so much for your help. It is definitely getting closer to what we are looking for. I have implemented your code here:
http://mather.wpengine.com/

Is there a way to have the search box appear below the icon like it does in the default theme search. This is visible here on our staging area site : http://mather.staging.wpengine.com/
Also we would like to use the same icon (the white magnifying glass) which is used in the staging site link above to trigger the search. Ideally the search would look and feel similar to the standard theme search but perform with your search’s awesome functionality.

Lastly, when the browser window is made narrower, there is an issue with the placement of the search icon. Do you have any suggestions for this?

Thanks!
Colin

[Ernest MarcinkoKeymaster]

Hi Colin,

I have inspected the whole header in more details, and I may have found a few issues there. One is that the mobile search is actually a DOM copy/clone of the desktop search. Basically a script (I guess the widget script?) copies the search bar to the mobile widgets area, which is a big issue. Copying items via javascript is a very bad practice, as it does not copy the event handlers, and without checking the element IDs, it creates an invalid HTML as well.
I guess the theme included search was made with this in mind, so it works that way. Unfortunately making copies of any custom element with event handlers (like the search) does not. That is why it’s the search does not work when switching to mobile view. I may have a possible solution though.

First, to fix the floating position, try this custom CSS

.navigation .mini-widgets {
    position: absolute;
    right: 0px;
}

Fixing the duplication script
Add this custom code to the functions.php in your theme/child theme directory (copy from line 3 only!). Before editing, please make sure to have a full site back-up just in case!

Please note, that these are not direct issues of the plugin, so my suggestions may not work in all cases.

I hope this helps though 🙂

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts