Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #734263

    hi support team

    is it possible to add a search loop an the mobile view (i saw https://kriesi.at/support/topic/mobile-search-bar/, but i would like to have a version without any theme update problems=

    #735244

    Hey Pascal,

    It is just follow the instructions on the link you gave and make sure to use a child theme.

    Best regards,
    Nikko

    #735250

    Hi Nikko

    so i have to copy the Header.php to the child theme?

    All the best,
    Pascal

    #735703

    Hi Pascal,

    Yes, just copy header.php to the child theme and do the modification. This is how it works, wordpress will first look for the header.php file in the child theme if it can’t find any it will look for header.php in the parent theme, so if you have header.php in child theme it will use it instead of the one in the parent theme. Hope this helps.

    Cheers!
    Nikko

    #736373

    Hi Nikko

    I did it on the staging see access info at private but it does not work i got the message under the menu: https://www.dropbox.com/s/2u0ooulvz1kmhwe/Screenshot%202017-01-20%2011.22.37.png?dl=0
    and no search loop on the mobile: https://www.dropbox.com/s/dpnhj86klun5gsc/Screenshot%202017-01-20%2011.26.36.png?dl=0

    Could you pls check what i did wrong?

    All the best,
    Pascal

    #737589

    Hi!

    The login credentials are not working. Please post the whole code of the header.php file on pastebin.com. We would like to check it.

    Best regards,
    Ismael

    #737656

    Hi Ismael

    Thanks for your answer here are the header.php http://pastebin.com/i89eyEdG

    PS: the staging access works put at the first time you have try it 3 times.

    All the best
    Pascal

    #739628

    Hi,

    not sure what you mean, but WP login is not working for me. Please check.

    Make sure you’re not using any caching and if yes, then switch it off, before deactivating any cache plugin. Clear browser cache and hard refresh a few times.

    Best regards,
    Andy

    #740200

    here

    #743111

    Hi,

    Please check this part of the header.php file.

        <?php
    
            if(isset($avia_config['temp_logo_container'])) echo $avia_config['temp_logo_container'];
            do_action('ava_after_main_container');
    
        ?>
    do_action('ava_after_main_menu');
    

    .. it should be:

        <?php
    
            if(isset($avia_config['temp_logo_container'])) echo $avia_config['temp_logo_container'];
            do_action('ava_after_main_container');
            do_action('ava_after_main_menu');
        ?>
    

    Best regards,
    Ismael

    #743251

    Dear Ismael
    Thanks, now i have no error line, but there is also no search loop in the mobile menü.
    All the best,
    Pascal

    #743762

    Hi!

    Please revert the modifications then add this code in the functions.php file:

    add_filter( 'wp_nav_menu_items', 'avf_add_search', 3, 2 );
    function avf_add_search( $items, $args ) {
    	if ($args->theme_location == 'avia')
    	{
    		$search = '<li id="menu-item-search-mobile" class="menu-item" style="display: none;">'.get_search_form(false).'</li>';
    		$items = $search . $items;
    	}
    	return $items;
    }

    And then use this code in the Quick CSS field.

    @media only screen and (max-width: 767px) {
    	#menu-item-search-mobile {
        	     display: block !important;
    	}
    }

    You should see the search form inside the mobile menu.

    Regards,
    Ismael

    #743786

    Dear Ismael

    Thank you, now its 80% correct, but we have a problem with the position. Because of the width of the main menu (many menu points) we switch to 1284px on the mobile menu.( https://www.dropbox.com/s/ld9yudh8asyziyp/Screenshot%202017-02-07%2009.16.55.png?dl=0) And there the search loope is too far down. In the smartphone view, she agrees. (https://www.dropbox.com/s/pmvqudo6flwi538/Screenshot%202017-02-07%2009.17.12.png?dl=0)

    All the best,
    Pascal

    #744578

    Hey!

    Thank you for the update. Please look for this css code then remove it.

    #top #searchform {
        position: absolute;
        top: 90px;
    }

    Best regards,
    Ismael

    #744783

    Hi Ismae

    Hm, im not shure what you mean, if i remove the:

    @media only screen and (max-width: 767px) {
    #menu-item-search-mobile {
    display: block !important;
    }
    }

    no search loop apear.

    and with

    #top #searchform {
    position: absolute;
    top: 90px;
    }

    it apear with the same old problems.

    All the best,
    Pascal

    #744792

    I change it to:

    #top #searchform {
    position: absolute;
    top: -60px;
    }

    http://www.responsinator.com/?url=https://www.staging3.atcarolines.ch

    #745253

    Hi!

    Hm, im not shure what you mean, if i remove the:

    @media only screen and (max-width: 767px) {
    #menu-item-search-mobile {
    display: block !important;
    }
    }

    Please remove the code that we posted above, not that one.

    #top #searchform {
        position: absolute;
        top: 90px;
    }

    Regards,
    Ismael

    #746289

    Hi Ismael
    But with this changes the search loop ist not realy responive, his position is total different.

    All the best,
    Pascal

    #747293

    Hi!

    We modified the css code a bit. The search bar should be center aligned atop the menu items. Please remove browser cache before checking the page.

    Cheers!
    Ismael

    #747427

    Dear Ismael

    Great, but could told me what you chance, becsause the menü break point is 1284px and not 768px and i have to copy the whole changes to the live site.

    All the best,
    Pascal

    #747834

    Hey!

    Alright. We adjusted the css media query to 1248px:

    @media only screen and (max-width: 1248px) {
    	#menu-item-search-mobile {
        	     display: block !important;
    	}
            
            #top #searchform {
                 text-align: center;
    	}
    
           #top #menu-item-search-mobile #searchform > div {
                 display: inline-block;
            }
    }

    Where did you add the following code?

    @media only screen and (min-width: 767px) {
    #top #searchform {
        position: absolute;
        top: 90px;
    }
    }

    Please remove that one.

    Best regards,
    Ismael

Viewing 21 posts - 1 through 21 (of 21 total)
  • You must be logged in to reply to this topic.