Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • June 22, 2017 at 8:07 am #811364
    csogordaniel

    Hello, how can i add the search bar before the social icon?

    Thanks

    D.

    pic

    June 22, 2017 at 4:57 pm #811673
    Jordan Shannon

    Hey csogordaniel,

    Try the following:

    Add this to the bottom of functions.php

    
function add_custom_script(){
?>
<script>
(function($){
    $(window).load(function() {
    	$(".social_bookmarks").prepend($("#menu-item-search").detach());
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

    and add this to quick css:

    li#menu-item-search a {
    line-height: 32px !important;
    height: auto !important;
margin-left:-50px!important;
}

    Best regards,
    Jordan Shannon

    June 23, 2017 at 9:06 am #812007
    csogordaniel

    Hello Jordan,

    Thanks, but its dont work correctly. Now its is the good place, but when i reload a page i see how its “jumping” to there.

    Best regards,

    Daniel

    • This reply was modified 7 years, 6 months ago by csogordaniel.
    June 23, 2017 at 5:26 pm #812189
    Victoria

    Hi Daniel,

    If the JavaScript solutions is not working for you, you could edit helper-main-menu.php file and render it in the correct location from the server.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    June 26, 2017 at 8:14 am #812912
    csogordaniel

    Hello Victora,

    Tha JS solution is “good”, but is there any solution for the “moving” problem?

    Thanks,

    Daniel

    June 26, 2017 at 1:24 pm #813043
    Victoria

    Hi Daniel,

    The code that moves the search executes when the page is ready, you could hide the search initially and just show it when it is in the correct location already.

    
#menu-item-search {
    display: none;
}

    
function add_custom_script(){
?>
<script>
(function($){
    $(window).load(function() {
    	$(".social_bookmarks").prepend($("#menu-item-search").css("display", "block").detach());
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

    Best regards,
    Victoria

    June 26, 2017 at 4:31 pm #813131
    Guenni007

    try this solution i answered you in the other thread: https://kriesi.at/support/topic/search-in-top-header-2/#post-813057

    for very small screens i will have a look now what can be done.

    June 26, 2017 at 4:35 pm #813134
    Jordan Shannon

    Hi,


    @Guenni007    , thanks for the suggestions.

    Best regards,
    Jordan Shannon

    June 26, 2017 at 5:20 pm #813144
    Guenni007

    so here is my solution – you have to have header with extra-element second-navigation !!!
    in this case the second-navigation is empty – but it is declared on Menu as secondary-menu !

    This to functions.php of child-theme:

    add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1);
add_filter( 'avia_meta_header', 'avia_append_search_nav_mod');
function avia_append_search_nav_mod()
{
	        global $avia_config;
	        ob_start();
	        get_search_form();
	        $form =  htmlspecialchars(ob_get_clean()) ;

	        $items .= '<div id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special">
							<a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'><span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span></a>
	        		   </div>';

    echo $items;
}

    this to quick.css:

    #top #header_meta #menu-item-search {
    list-style: outside none none;
padding-left: 20px
}

#top #header_meta .avia-search-tooltip {
    margin-left: -60px;
    top: 18px !important;
}

#top #header_meta .avia-search-tooltip .avia-arrow-wrap {
    right: 80px;
}

@media only screen and (max-width: 768px){

.responsive #header_meta .sub_menu {
    float: right;
    right: 45%;
    position: relative;
    top: 10px;
    width: auto;
}

.responsive #header .social_bookmarks {
    float: right;
    position: relative;
    right: 40%;
    width: auto;
}

.av_icon_active_right .social_bookmarks {
    padding-left: 0;
}

#top #header_meta .avia-search-tooltip {
    margin-left: 30px;
    top: 18px !important;
}

#top #header_meta .avia-search-tooltip .avia-arrow-wrap {
    right: 170px;
}
}

    look here on top: https://webers-testseite.de/
    go and pull the browser window smaller to see how the behavior is on that.

    by the way ismael – isn’t possible to add the list point into the sub-menu ?

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