-
AuthorPosts
-
August 27, 2016 at 5:49 pm #678444
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,
SadeghAugust 27, 2016 at 6:13 pm #678454Hey 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,
JosueAugust 27, 2016 at 7:50 pm #678494Hi 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,
SadeghAugust 27, 2016 at 8:32 pm #678508Hi,
Meta header doesn’t seem to be enabled.
Best regards,
JosueAugust 27, 2016 at 8:38 pm #678510well – 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 #678517August 28, 2016 at 2:45 am #678538Hi,
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, 2 months ago by Josue.
August 28, 2016 at 7:55 am #678588This 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, 2 months ago by Guenni007.
August 28, 2016 at 8:44 am #678593Hi 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 #678696no problem –
PS this is what my solution looks like: http://webers-testseite.de/circles/August 28, 2016 at 10:49 pm #678698Hi,
Check your site, now you need to move the layerslider logo a little bit down.
Best regards,
JosueAugust 29, 2016 at 7:08 am #678752Hi 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, 2 months ago by Sadegh.
August 29, 2016 at 5:05 pm #679041Hi!
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,
YigitAugust 30, 2016 at 2:26 pm #679441Hi 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, 2 months ago by Sadegh.
August 30, 2016 at 2:37 pm #679453Hi,
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,
YigitAugust 30, 2016 at 2:48 pm #679466Hi 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,
SadeghAugust 30, 2016 at 2:51 pm #679470 -
AuthorPosts
- The topic ‘Search icon position above the menu’ is closed to new replies.