Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1233248

    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

    #1233267

    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

    #1233320

    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

    #1233387

    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, 3 months ago by Guenni007.
    #1233425

    Hi,

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

    Best regards,
    Rikard

    #1233453

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

    #1233456
    #1234031

    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

    #1234108

    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
    }
    #1234118

    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/

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