[Support request] How to show search as a field not overlay?

Home Forums Support How to show search as a field not overlay?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #471073
    Atef

    Hi,
    thanks for such a great theme. I like it a lot and bought the premium version.

    I am just wondering if there is a way to change the search field from an overlay to an actual search field that shows, like this:
    https://prnt.sc/i0k6gj
    For me, the overlay is stylish but confusing, especially on mobile. My target audience are not tech savvy and might get confused.

    I have listed one of my test sites in this support ticket.

    thanks a lot.

    GeneratePress 2.0.1
    GP Premium 1.5.6
    #471108
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You could try something like this:

    add_action( 'generate_inside_navigation', 'tu_add_custom_search' );
    function tu_add_custom_search() {
          echo '<div class="custom-search">';
                get_search_form();
          echo '</div>';
    }

    Then this CSS:

    .main-navigation .custom-search {
        float: right;
    }

    Might need some CSS adjustments, but that should get you started 🙂

    #471295
    Atef

    Hi Tom,

    Thanks a lot for the prompt response.

    sorry if my question was not clear enough.
    What I want to do is to replace the overlay on the desktop and mobile menu by a search box.
    so when people click on the magnifying glass, they see a searh box that opens, lot an overlay.

    the solution you gave me added a search box to the menu on desktop, but the overlay still exist when I click on the magnifying glass.

    so is there a way to achieve this?
    thanks

    #471886
    Tom
    Lead Developer
    Lead Developer

    What about something like this?:

    .navigation-search.nav-search-active {
        max-width: 200px;
        left: auto;
        right: 50px;
    }
    
    .navigation-search input[type="search"] {
        background: #fff;
        opacity: 1;
        height: 40px;
        margin-top: 10px;
    }
    
    .main-navigation .main-nav ul li.search-item a {
        line-height:  40px;
        margin-top: 10px;
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.