Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • August 27, 2016 at 5:49 pm #678444
    Sadegh

    Hi Kriesi Team,

    1- Is there any way I could insert search bar above the menu (like the below image)?
    .

    2- And let me know please, if it could be possible to add a link next to the search bar (like the provided image)? I want to put a link there for another page of this website.

    Kind regards,
    Sadegh

    August 27, 2016 at 6:13 pm #678454
    Josue

    Hey Sadegh,

    Enable the meta header by setting a submenu (can be empty) there and then add this to your theme / child theme functions.php:

    add_action('avia_meta_header', function() {
	get_search_form();
});

    Best regards,
    Josue

    August 27, 2016 at 7:50 pm #678494
    Sadegh

    Hi Josue,

    I did what you asked, but it wasn’t done successfully.
    I think that is happen because I already changed the menu style in Quick Css box (you may kindly take a look at my website)

    Regards,
    Sadegh

    August 27, 2016 at 8:32 pm #678508
    Josue

    Hi,

    Meta header doesn’t seem to be enabled.

    Best regards,
    Josue

    August 27, 2016 at 8:38 pm #678510
    Guenni007

    well – i tested it and if sub-menu is empty it does not work

    So it is not so easy without having other content there.
    If you got social profiles you can do the Yigit trick by shifting the search field to that field:
    But there has to be that little mark on: Append search icon to main menu
    and there has to be at least one social Profile.

    this in child-theme functions.php

    function av_move_search(){
?>
 <script>
jQuery(window).load(function(){
jQuery(".av-main-nav > li#menu-item-search").detach().appendTo('#header .social_bookmarks')
});
 </script>
<?php
}
add_action('wp_footer', 'av_move_search');
    August 27, 2016 at 10:11 pm #678517
    Guenni007

    or best josue – can’t we use like wpml does the do_action(‘avia_meta_header’); on helper-main-menu.php for a header_meta widget and put in a search field than?

    • This reply was modified 8 years, 3 months ago by Guenni007.
    August 28, 2016 at 2:45 am #678538
    Josue

    Hi,

    To make header meta appear regardless of header settings you’d need to use a code like this:

    add_filter('avf_header_setting_filter', function($header) {
	$header['header_topbar'] = 'true';
	return $header;
}, 10, 1);

add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1);

add_action('avia_meta_header', function() {
	get_search_form();
});

    Best regards,
    Josue

    • This reply was modified 8 years, 3 months ago by Josue.
    August 28, 2016 at 7:55 am #678588
    Guenni007

    This works – ok.
    But if you have a transparent header you have to find a solution (for scroll offset i think) because the color-section f.e. with background image is looking through header.

    maybe you give the code of mine above a chance. You only have to activate in Enfold – Header – Extra Elements

    1) the search icon in Navigation
    2) Position of Header social icons (you don’t have to have social icons here)

    function av_move_search(){
?>
 <script>
jQuery(window).load(function(){
jQuery(".av-main-nav > li#menu-item-search").detach().appendTo('#header .social_bookmarks')
});
 </script>
<?php
}
add_action('wp_footer', 'av_move_search');

    What is not so nice on that solution is
    there is a little time shift till the search icon list point is in the social-icon list but it has the right position from the beginning.
    Only a little css is needed to have the search results in that dropdown look good:

    .ajax_search_entry {
    text-align: left !important;
    min-width: 250px !important;
    padding-left: 15px !important;
}
    • This reply was modified 8 years, 3 months ago by Guenni007.
    August 28, 2016 at 8:44 am #678593
    Sadegh

    Hi Josue
    I did what you asked, but still, it doesn’t work. The extra element is activated, but it is transparent and I don’t know how may I fix this. You can see that from the website.

    (@Guenni007 : thank you for your comments, but I can not focus on two persons’ suggestions at a same time. So please let me give help just from Moderators)

    August 28, 2016 at 10:38 pm #678696
    Guenni007

    no problem –
    PS this is what my solution looks like: http://webers-testseite.de/circles/

    August 28, 2016 at 10:49 pm #678698
    Josue

    Hi,

    Check your site, now you need to move the layerslider logo a little bit down.

    Best regards,
    Josue

    August 29, 2016 at 7:08 am #678752
    Sadegh

    Hi Josue,

    Thank you for your great help, the search bar is now set into the header properly.
    1> But still, I need to remove the extra blue pixels in header (image below), any code that could help?
    .

    2> And it would be great if you could let me know how may I change the color of this very thin line to the rest of the header.

    Kind regards,
    Sadegh

    • This reply was modified 8 years, 3 months ago by Sadegh.
    August 29, 2016 at 5:05 pm #679041
    Yigit

    Hi!

    Please add following code to Quick CSS

    .header_color #header_meta {
    background: transparent!important;
}
#header_meta .sub_menu {
    min-width: 560px;
    background: #0077b4;
   padding-left: 0;
   padding-top: 5px;
}
#header_meta div {
    float: right;
    min-width: 300px;
}
#header_meta .container {
    padding: 0;
}
#top .av_header_transparency #header_meta {
    border-color: transparent;
}

    Best regards,
    Yigit

    August 30, 2016 at 2:26 pm #679441
    Sadegh

    Hi Yigit,

    Thanks a lot for your comprehensive help.

    Still, there is a bit issue remains with the menu (to make these transparent parts have a solid background):
    .

    Kind regards,
    Sadegh

    • This reply was modified 8 years, 3 months ago by Sadegh.
    August 30, 2016 at 2:37 pm #679453
    Yigit

    Hi,

    Please add following code to Quick CSS as well

    #header_meta .container {
    padding-top: 0!important;
    padding-bottom: 0!important;
    padding-right: 0!important;
}

    and “min-width: 560px;” is changed to 555px in your code, please keep it 560px

    Best regards,
    Yigit

    August 30, 2016 at 2:48 pm #679466
    Sadegh

    Hi Yigit,

    Thanks a lot, it is all solved now :)

    (and about “min-width: 560px”, I have to change that to 557px, otherwise the menu would be looks like the image below:
    .

    Thank you again for the great help.
    (you may now close the thread please)

    Kind regards,
    Sadegh

    August 30, 2016 at 2:51 pm #679470
    Yigit

    Hi,

    You are welcome! Let us know if you have any other questions or issues :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Search icon position above the menu’ is closed to new replies.