Tagged: CSS, header, javascript, search, secondary navigation
Hi there
I’m developing a site and have moved the search from the main to the secondary menu using:
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
$(window).load(function() {
$("#menu-item-search").detach().appendTo('#header_meta #avia2-menu');
});
})(jQuery);
</script>
<?php
}
However when the page loads, and reloads the search flickers between the two locations. Firefox seems OK but Chrome and Safari both have the issue.
I’ve used the Widget in the Header option but the search button was different and the client prefers this format.
Any ideas
Thanks
Richard
Hey Richard,
Thank you for the inquiry.
Have you tried setting the initial opacity of the search icon to zero? You can then bring it back to normal after moving it to the secondary menu.
Best regards,
Ismael
Hey Ismael
Of course, simple and elegant:
#avia-menu #menu-item-search {
opacity: 0;
}
#avia2-menu #menu-item-search {
opacity: 1;
}
Excellent support as always, thank you.
Richard
Hi,
Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard
Yes thank you the topic can be closed now.
Hi,
Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.
Best regards,
Rikard