Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #1110785

    Hey guys,

    this question is often asked here in the forum but all the solutions dont work for me – maybe because they are some years old?
    Do you have a solution for me which is compatible with the current version? I need a solution for a search box next to my menu like this:
    navigation

    Thank you!

    #1110899

    Hey coolicious,

    Thanks for the screenshot, could you post a link to your actual site as well so that we can have a closer look please?

    Best regards,
    Rikard

    #1110944

    Hey Rikard,

    that is not possible because I work with a local stage version :/ Maybe it helps if I say you that I use the following Demo Template as the base – the problem with the search box should be the same:
    https://i.ibb.co/nsFQYNg/Bildschirmfoto-2019-06-17-um-08-29-53.png

    Thank you
    Sandro

    • This reply was modified 5 months ago by  coolicious.
    #1111093

    Hi,

    What solution do you need exactly – could you please explain us?
    It might be a little bit difficult as it would require CSS and as we cant see we cant help.

    Best regards,
    Basilis

    #1111115

    Sure!

    If you see the screenshot at my first post? This screenshot is my design mockup which shows you that I want to have a opened search box right to my main menu. I can do the CSS for the styling but I need information how I can change the current search box solution into a search box with is always open at the right side of my main menu.

    Do you know now what I mean?

    Best regards
    Sandro

    #1111185

    And: You dont need to see my demo website, which is impossible also, you only give me a solution for this demo-template which I use:

    #1111379

    Hi coolicious,

    Please refer to this thread for a possible solution.

    Best regards,
    Victoria

    • This reply was modified 4 months, 4 weeks ago by  Victoria.
    #1111427

    With the solution on this thread which is linked in your linked thread:
    https://kriesi.at/support/topic/adding-search-bar-to-header-cant-find-enfoldincludes-folder/#post-476685

    It looks like this on my stage version:

    Two wrong things with this solution, maybe you have fixes for me?
    #1 It doesnt replace the current “pop up-searchbox” (look at the magnifying glass at the right side of the main menu)
    #2 The added search box isnt in the main menu div – it was integrated right after the “header_main”-div which you can see in the screenshot. I need it at the right side of my main menu which shows you the screenshot in my first post.

    Can you help me?

    #1111959

    So guys, I published my local stage version on an online stage version.
    You can see my problem now on this website (look at the private infos)

    I hope you can help me now :)

    #1112001

    Hi coolicious,

    Screen Shot 2019-06-20 at 18.23.33.jpg

    There is really no room for the form near the menu on screens below 1900px.
    You can try using this code:

    
    @media only screen and (min-width: 1900px) {
      .custom-form {
        position: absolute;
        right: 300px;
        top: 290px;
     }
    }
    
    

    Best regards,
    Victoria

    #1112030

    Thank you Vic,

    but do you have a responsive solution for me and for the following problems?

    Two wrong things with this solution, maybe you have fixes for me?
    #1 It doesnt replace the current “pop up-searchbox” (look at the magnifying glass at the right side of the main menu)
    #2 The added search box isnt in the main menu div – it was integrated right after the “header_main”-div. I need it at the right side of my main menu which shows you the screenshot in my first post.

    Thank you!

    • This reply was modified 4 months, 3 weeks ago by  coolicious.
    #1112414

    Hi coolicious,

    You need to uncheck the option to add search to the menu in the theme options. Yes, the widget will not be in the same container as the menu.

    Best regards,
    Victoria

    #1112702

    Hey Victoria,

    thank you for your support but this solution isnt enough for me because this is not responsive anymore. I will search a solution myself. Can you just say to me in which file I can find this line of code? This would help me:

    <li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special">
    							<a href="?s=" rel="nofollow" data-avia-search-tooltip="
    
    <form action=&quot;https://stage-200619.bathely.de/&quot; id=&quot;searchform&quot; method=&quot;get&quot; class=&quot;&quot;>
    	<div>
    		<input type=&quot;submit&quot; value=&quot;&quot; id=&quot;searchsubmit&quot; class=&quot;button avia-font-entypo-fontello&quot; />
    		<input type=&quot;text&quot; id=&quot;s&quot; name=&quot;s&quot; value=&quot;&quot; placeholder='Suche' />
    			</div>
    </form>" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"><span class="avia_hidden_link_text">Suche</span></a>
    	        		   </li>

    Thank you!
    Sandro

    #1112728

    Hi,
    Perhaps this solution will work for you, this function adds the search bar to the menu and the css hides the ajax search icon.
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    add_filter( 'wp_nav_menu_items', 'avia_append_search_side_nav', 10, 2 );
    function avia_append_search_side_nav( $items, $args )
    {
    	if (is_object($args) && $args->theme_location == 'avia')
    	{
    		global $avia_config;
    		ob_start();
    		get_search_form();
    		$form = ob_get_clean();
    
    		$items .= '<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown">'.$form.' </li>';
    	}
    	return $items;
    }

    then add this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top .menu-item #searchform {
        top: 26px;
        position: relative;
    }
    
    #top #searchform > div {
        opacity: 1 !important;
        display: block !important;
    }
    #menu-item-search.menu-item-avia-special {
    display: none !important;
    }

    This is the result I got on my localhost:
    2019-06-23-125816
    To answer your question, the code above can be found at line 134 in functions-enfold.php

    Best regards,
    Mike

    #1112729

    Mike, THANK YOU!

    That is what I want :))) Nice :)

    #1112743

    Hi,
    Glad to hear, I assume we can close this now, but I like to ask first. Shall we close this then?

    Best regards,
    Mike

    #1112760

    Yes you can close it :)

    #1112761

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

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

The topic ‘Need search box right of the main menu – how?’ is closed to new replies.