Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 26, 2020 at 1:26 am #1233248
    Neverlands

    Hello,
    I am using Enfold with the Consulting Demo.
    I realized that there is no search option so I’ve tried the solution from this topic.
    But I don’t like it because then I would have to un-frix the main menu.

    Is it possible to place the search like this?
    I would like to directly show the form, not just the search icon:
    Search form below logo

    Best regards,
    Neverlands

    July 26, 2020 at 4:47 am #1233267
    Nikko

    Hey Neverlands,

    It won’t exactly like that, but you can show the search icon using this CSS code and add it in Quick CSS:

    @media only screen and (max-width: 1200px) {
  #top #header .av-main-nav > #menu-item-search {
    display: block !important;
  }
}

    Best regards,
    Nikko

    July 26, 2020 at 11:49 am #1233320
    Neverlands

    Hi Nikko,

    unfortunatley this does not change anything.
    With this option I would have to un-fix the main menu because the search results are not displayed in the visible area.
    I need to position the search below the logo or at least above the main menu.
    Is there maybe a chance to put the search widget via shortcode there?
    Can I add/place an Enfold widget area above the main menu instead below of it?

    Thanks,
    Neverlands

    July 26, 2020 at 6:48 pm #1233387
    Guenni007

    try this approach:
    https://kriesi.at/support/topic/search-icon-on-left-menu/#post-1185825

    if that menu item is on top of your menu list – it will be – yes on top
    If you like to have a little bit different look – give to that menu-item a custom class: f.e. searchfield.
    ( If you do not know how to have custom-class on menu-items see here: Link )

    and f.e. :

    .html_header_sidebar #header .av-main-nav > li.searchfield {
  margin: 0 15px;
  border-bottom: 2px solid #ddd
}

    one thing to mention – after inserting the individual link – empty the url field for that menu item ( you can not add individual link if url input is not filled out) – otherwise you can fill in text but not activate it – f.e. to erase some text.

    And if you do not want to have on logo bottom a border and less distance to the searchfield:

    .html_header_sidebar .logo {
  border-bottom: none;
  padding: 30px 15px 0;
}

    ( try always first without the !important setting)

    • This reply was modified 4 years, 4 months ago by Guenni007.
    July 27, 2020 at 4:36 am #1233425
    Rikard

    Hi,

    Thanks for helping out @guenni007, did you try that out @Neverlands?

    Best regards,
    Rikard

    July 27, 2020 at 9:02 am #1233453
    Neverlands

    Not yet. But thanks for the solution – I will try that out.

    July 27, 2020 at 9:21 am #1233456
    Guenni007

    Testpage: https://webers-testseite.de/cynthia/

    July 30, 2020 at 1:26 am #1234031
    Neverlands

    Hello,
    I tried the recommended solution – it works well so far, thank you!
    I only have some troubles with the full width burger menu, where I am not able to responsively center the search from field.

    Best regards,
    Neverlands

    July 30, 2020 at 9:26 am #1234108
    Guenni007

    try this – and to have searchform results font in a color:
    (on my testpage there is a dark background on fullwidth burger overlay)

    #av-burger-menu-ul #searchform > div {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#av-burger-menu-ul #searchform .ajax_search_response * {
	color: #FFF
}
    July 30, 2020 at 10:02 am #1234118
    Guenni007

    first: because of the search-results list – it might be better to have the vertical-align on top!

    #top #av-burger-menu-ul {
    vertical-align: top;
    padding: 125px 0 !important;
}

    second:
    but what we can do on the search input field to have no href on that menu-item ( to have the opportunity to activate text in that input field by mouse activation) – see description above – we do not have the possibility to do that on hamburger search menu item
    there is:

    so if the href attribut remains you can not activate text like above to get rid of “er” in weber f.e.

    this to child-theme functions.php :

    function remove_href_from_hamburger_search_input(){
?>
<script type="text/javascript">
(function($) {
	$('#header').on('click', '.av-main-nav-wrap', function() {
		$('#av-burger-menu-ul .searchfield > a:first-of-type').removeAttr("href");
	});	
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'remove_href_from_hamburger_search_input');

    Resultpage for your test: https://webers-testseite.de/cynthia/

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