Search icon in header – The7 Theme

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Search icon in header – The7 Theme

This topic contains 3 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 4 years, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #15683
    everbeta
    everbeta
    Participant

    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

    #15684
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #15737
    everbeta
    everbeta
    Participant

    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

    #15740
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.