Searchbar in main menu

This topic contains 7 replies, has 2 voices, and was last updated by Maximilian Leiding Maximilian Leiding 6 years, 11 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #5865
    Maximilian Leiding
    Maximilian Leiding
    Participant

    Hello there!

    Thank you so much for an amazing plugin.

    I have one problem though, i can not figure out how to put a searchbar in the main menu like on the front-end demo.

    Can not find it in the documentation either.

    Thanks in advance!

    Best regards,

    Maximilian Leiding

    #5869
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    Thank you for the kind words!

    There is unfortunately no documentation on that because it differs for each and every theme on how to do that. Without programming knowledge is almost impossible to append the search into a menu item. WordPress yet does not support putting shortcodes and other stuff to the navigation menu. (navigation menus are very tricky)

    What I did on the demo is I appended the search bar just before the menu container in the theme header.php file. I’m almost definitely sure you will have to edit your themes corresponding header file to achieve the same. There is a short article in the documentation on which shortcode do you need for that.

    Basically you need to find the template part which adds the menu into the header, then locate the menu element, and try appending the search php shortcode just before it. There is a good chance it’s still going to look weird, because most menus have very fragile styling.

    In your case I can see there is already a search bar there, and the HTML code is something like this:

    <div class="container et_search_form_container et_pb_search_visible et_pb_no_animation" style="height: 84px; max-width: 838px;">
    		<form role="search" method="get" class="et-search-form" action="studynet.se">
    		<input type="search" class="et-search-field" placeholder="Sök …" value="" name="s" title="Sök efter:" style="font-size: 12px;">					</form>
    		<span class="et_close_search_field"></span>
    </div>

    I would try to locate this piece of code and replace the form element with the correspoding search shortcode, like so:

    <div class="container et_search_form_container et_pb_search_visible et_pb_no_animation" style="height: 84px; max-width: 838px;">
    		<?php echo do_shortcode("[wpdreams_ajaxsearchpro id=1]"); ?>
    		<span class="et_close_search_field"></span>
    </div>
    • This reply was modified 6 years, 11 months ago by Ernest Marcinko Ernest Marcinko. Reason: formatting fix
    Best,
    Ernest Marcinko

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


    #5901
    Maximilian Leiding
    Maximilian Leiding
    Participant

    Thank you for a very good answer. I have almost solved the issue.

    There is one thing left, the search results is layered behind the header. See attached printscreen or try it yourself at http://www.studynet.se.

    How can I fix this?

    Attachments:
    You must be logged in to view attached files.
    #5913
    Maximilian Leiding
    Maximilian Leiding
    Participant

    I also got a big problem in mobile mode. Since I put the search bar in the header the padding is really weird and as ju scroll down the site in your mobile, the bottom padding of the header gets bigger and bigger and eventually the whole page is just greyed out from the header.

    Any ideas?

    #5914
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    The first one is a simple z-index issue, seemingly the menu bar overlaps the results list. The solution is very simple. Try this custom CSS to increase the results z-index values:

    
    div.ajaxsearchpro[id*="ajaxsearchprores4_"] {
        z-index: 99999999 !important;
    }
    

    The second is much harder to track. It’s definitely caused by a 3rd party javascript, that tries to modify the height of the container. I suppose it was built for the original search only.
    What I found is that if you remove one of the CSS classes from the container element, it looks like the handler is detached. So, try modifying the container code to:

    <div class="container et_pb_search_visible et_pb_no_animation" style="height: 50px; max-width: 838px;">
            <?php echo do_shortcode("[wpdreams_ajaxsearchpro id=1]"); ?>
            <span class="et_close_search_field"></span>
    </div>

    Notice that the “et_search_form_container” class had been removed. Then again I’m only guessing here. You might have to find the corresponding javascript file and remove the height modification script. The theme author might know which one is to change.

    Best,
    Ernest Marcinko

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


    #5922
    Maximilian Leiding
    Maximilian Leiding
    Participant

    Thought the first problem was solved after I tried the custom CSS you provided. But this make the dropdowns from the menu to appear behind the search bar, hmm.. Any ideas?

    I have contaced the support of the theme regarding issue number two.

    Thank you so much for the assistance, much appreciated!

    #5923
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    It’s caused by the site stlye.css files, there is a rule adding z-index: 999 to the search container. Probably because of the removed class I suggested.

    Try to override that with this:

    .container.et_pb_search_visible {
        z-index: 0 !important;
    }
    Best,
    Ernest Marcinko

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


    #5955
    Maximilian Leiding
    Maximilian Leiding
    Participant

    Everything is soved now, thank you so much for great support!

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

You must be logged in to reply to this topic.