Search on top menu

I searched through but not able to find anything on moving the search to the top menu bar for fashionistas. I tried to test with the following codes from other themes without any success. Appreciates if anyone can help. thanks.

added the following codes in the child function:

function search_box_function( $nav, $args ) {
if( $args->theme_location == ‘primary’ )
return $nav."

  • ";

    return $nav;
    }
    add_filter(‘wp_nav_menu_items’,‘search_box_function’, 10, 2);

    added the following codes in the child css:

    .top-search-menu .search-submit{
    display: none;
    }

    .top-search-menu label{
    position: relative;
    }

    .top-search-menu label:before{
    font-family: FontAwesome;
    content: ‘\f002’;
    display: inline-block;
    display: block;
    width: 26px;
    height: 26px;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 5px;
    }

    .top-search-menu .search-field{
    height: 26px;
    padding: 3px 5px 3px 23px;
    font-weight: normal;
    }

    .top-search-menu label:before{
    color: #fff;
    }

    .top-search-menu.input-expanded label:before{
    color: #333;
    }

    .top-search-menu input{
    opacity: 0;
    width: 0;
    }

    .top-search-menu.input-expanded input{
    opacity: 1;
    width: 140px;
    }

    Downloaded header and footer plugin and inserted the following codes in the footer:
    (function($){
    “use strict”;
    var $searchArea = $(’.top-search-menu’);
    $searchArea.click(function(){
    $(this).addClass(‘input-expanded’);
    });

    $(document).mouseup(function (e){
        var container = $(".top-search-menu");
        if (!$searchArea.is(e.target) && $searchArea.has(e.target).length === 0){
          $searchArea.removeClass('input-expanded');
        }
    });
    

    })(jQuery);

  • Hello,

    Adding modifications like that are out of scope of our support, sorry :frowning: but I think that you are overdoing it. If you just want search widget on top, if it is present on all pages like in theme demo then you can simply move it up with some css code like this for example:

    @media screen and (min-width: 1024px) {
        .widget.widget_search {
            position: absolute;
            top: 0;
            width: 300px;
            border-bottom: 0;
        }
    
        .site-sidebar .widget_search .search-form {
            margin: 0;
        }
    
        .widget.widget_search input {
            border: none;
        }
    }
    

    And search will be inside top header for all screens above 1024px because on smaller ones there won’t be enough space https://www.screencast.com/t/H5damIYHViUC

    Best Regards!

    thank you. I like your suggestion. I think it is much cleaner. I will work on it.

    hello,

    I tested the suggested css code. It works great if the template is default. However, if the template is full width page, it will not show the search box. I believe this is because when it’s using full width page, the sidebar widget is no longer available. If the search box is move to header, will the above css codes still work if template is full width page? I assume the header should still be available even with full width page? thanks.

    Hi again,

    Yes, css will work if there is search widget on a page. Since full width page doesn’t have widget area then it won’t work. In that case I suggest to call search inside header and to then use css to fix it into header. If you place widget there I can help you with css code if it needs to be changed, just share page link when you add search to header.

    Best Regards!

    Hello dimikjones

    sorry for the delay. was traveled for work. I did add the search in the header widget and I tried to mess around with the css code you provided. however, i still not able to show the search on the top. I do need your help in the css. perhaps I miss something. if you can provide the codes, i will try to see if that works. thanks.

    I added the left margin and I was able to position the search box at the right area but the search button and the search box are not line up. the button is under the search box. I will give it a try to see if I can figure out. If you can share some lights will be great. thanks.

    Hi again,

    I can take a look into this but need a link to your website, so I can inspect element and to see which styling needs to be changed.

    Regards,

    Hello dimikjones,

    thanks for your help! I appreciates it. I installed fashonistes themes and WP on a development computer inside the firewall. The company blocked all ports. I will have to ask for risk office approval before certain ports can be opened, which takes a long time. This is an intranet site that I am working on. I will try to find a hosting site to deploy this and will provide the link to you. Meantime, if there is a way I can upload the styles.css or any scripts to share, please let me know. Thanks again!

    I’m having the same problem on my site. It’s http://foodforthought.com.my/.

    Can you help me?