Tagged: 

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • August 3, 2021 at 2:06 am #1314030
    coolicious

    I want to move the search icon in the header from left to right of the social media icons. In the attached image you can see the actually positions.

    • This topic was modified 3 years, 1 month ago by coolicious.
    August 4, 2021 at 9:53 am #1314317
    Rikard

    Hey coolicious,

    Thanks for the screenshot. Could you post a link to where we can see the actual elements as well please?

    Best regards,
    Rikard

    August 5, 2021 at 12:34 am #1314503
    coolicious
    This reply has been marked as private.
    August 6, 2021 at 12:34 pm #1314839
    Rikard

    Hi,

    Thanks for the login details. Does your site have a URL as well?

    Best regards,
    Rikard

    August 6, 2021 at 1:04 pm #1314848
    coolicious

    Haha – yes, of course :D

    August 8, 2021 at 6:38 am #1315092
    Rikard

    Hi,

    Thanks for that. Please try this in your functions.php file:

    function avia_move_search_icon(){
?>
<script>
	jQuery(document).ready(function($) {
		var search = $('#header_main li#menu-item-search').detach();
		$('#header_main ul.social_bookmarks icon_count_7').append(search);
	});
</script>
<?php
add_action('wp_footer', 'avia_move_search_icon');

    Best regards,
    Rikard

    August 8, 2021 at 1:37 pm #1315116
    coolicious

    Hey Rikard,

    thanks for this code – but when I put it into my child theme functions.php the whole website isnt available anymore because of a critical error.

    August 8, 2021 at 3:40 pm #1315121
    coolicious

    Ok, i fixed your code – there was a “}” missing.
    But with your code the search icon just only disappeared but wasnt move right of the social media icons. Also the search icon appears for milliseconds before it disappear. That looks not so nice. Can we change that?

    August 10, 2021 at 4:34 am #1315920
    Rikard

    Hi,

    Thanks for the update. I’m not sure why it’s not attaching to the social bookmarks to be honest with you. You might be able to add it to a custom widget in the header instead: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

    Best regards,
    Rikard

    August 20, 2021 at 11:53 pm #1317682
    coolicious

    Ok,
    but how can I add a search icon with widgets?

    August 23, 2021 at 5:29 am #1317880
    Rikard

    Hi,

    Please try adding this to your widget:

    <a href="?s=" data-avia-search-tooltip="

<form action="https://kriesi.at/" id="searchform" method="get" class="">
	<div>
		<input type="submit" value="" id="searchsubmit" class="button avia-font-entypo-fontello" />
		<input type="text" id="s" name="s" value="" placeholder='Search' />
			</div>
</form>" aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'><span class="avia_hidden_link_text">Search</span></a>

    Best regards,
    Rikard

    August 27, 2021 at 1:19 am #1318523
    coolicious

    Hey Rikard,

    can it be that your code is broken? Look at your a-tag.

    August 29, 2021 at 6:20 am #1318807
    Rikard

    Hi,

    Please try the code out.

    Best regards,
    Rikard

    August 29, 2021 at 5:10 pm #1318838
    coolicious

    Hey Rikard,
    it doesnt work. Look at the screenshot. I cant save it with the code errors.

    • This reply was modified 3 years ago by coolicious.
    September 1, 2021 at 5:44 am #1319275
    Rikard

    Hi,

    Try this instead:

    <a href="?s=" data-avia-search-tooltip="

<form action="https://kriesi.at/" id="searchform" method="get" class="">
	<div>
		<input type="submit" value="" id="searchsubmit" class="button avia-font-entypo-fontello" />
		<input type="text" id="s" name="s" value="" placeholder='Search' />
			</div>
</form>" aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'><span class="avia_hidden_link_text">Search</span></a>

    Tried, tested and working on a test installation.

    Best regards,
    Rikard

    September 1, 2021 at 8:52 am #1319307
    coolicious

    No, it doesnt work again. Can you try it yourself on my site?

    September 3, 2021 at 5:11 am #1319584
    Rikard

    Hi,

    I’ve added it for you, and it’s working. You can position the widget using this CSS:

    #custom_html-41 {
    position: absolute;
    right: -20px;
    top: -30px;
}

    Best regards,
    Rikard

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