[Support request] Moving search field and icon

Home Forums Support [Support request] Moving search field and icon

Home Forums Support Moving search field and icon

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1539700
    Lars

    Hi

    Link here: https://monosnap.com/file/t3gbr0IfifSGeDcVLQ8HF6VYbXOGdT

    I am having some CSS difficulties with the search icon and the search field position. Is there (look at the picture in the link) any way to move the search icon to a position of being the last entry in the menu?

    Secondly: When I press the icon the search field is partly covered by the icon and I can’t see the first letters while typing. Sometimes I have seen on some websites that the search field pops up in the very middle of the screen with everything else being a bit smudged out. I would love that! Is there a standard way in Generatepress to do that?

    Thank you very much for your always so kind support
    Lars

    #1540206
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site so we can take a look at the problem

    #1540263
    Lars

    I’ll give you the info for login inte the private section below:

    #1540468
    David
    Staff
    Customer Support

    Ok, so it will take couple of steps.
    First off add this CSS to position the search field below the menu:

    @media(min-width: 769px) {
        .main-navigation .inside-navigation {
            flex-direction: column;
        }
    }

    Now to create the Overlay search – first add this PHP Snippet:

    add_action( 'after_setup_theme', function() {
        remove_action( 'generate_inside_navigation', 'generate_navigation_search' );
        remove_action( 'generate_inside_mobile_header', 'generate_navigation_search' , 1 );
        add_action( 'generate_before_header', 'generate_navigation_search' );
    });
    add_filter( 'generate_navigation_search_output', function($form) {
        $form = sprintf('
            <form method="get" class="search-form navigation-search" action="%1$s">
                <div class="search-form-container grid-container">
    		<span class="search-title">Search...</span>
    		<input type="search" class="search-field" value="%2$s" name="s" title="%3$s" />
    		<span class="search-item menu-item-align-right"><a aria-label="%4$s" href="#">%5$s</a></span>
                </div>
            </form>',
            esc_url( home_url( '/' ) ),
            esc_attr( get_search_query() ),
            esc_attr_x( 'Search', 'label', 'generatepress' ),
    	esc_attr__( 'Close Search Bar', 'generatepress' ),
            generate_get_svg_icon( 'search', true )
      
        );
    	return $form;
    });

    Adding PHP:
    https://docs.generatepress.com/article/adding-php/

    Then add this CSS to style our new overlay form:

    .navigation-search.nav-search-active {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: 10000;
        background-color: rgba(0, 0, 0, 0.75);
        display: flex;
        align-items: center;
    }
    
    .search-form-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        max-width: 800px;
        padding: 20px;
    }
    
    .navigation-search.nav-search-active .gp-icon.icon-search {
        display: block;
        padding: 22px;
        background-color: #000;
        color: #fff;
    }
    
    .search-title {
        flex: 1 0 100%;
        color: #fff;
    }
    
    .navigation-search input[type="search"] {
        width: auto;
        flex: 1;
    }
    #1540715
    Lars

    Wow, man, you understood my question properly and found a perfect solution.

    A small fix is needed in the mobile view. TWO search fields turn up. One at the top and one a the bottom.

    #1540853
    David
    Staff
    Customer Support

    I updated the PHP Snippet above to remove the Search from the Mobile Header. Its just this additional line thats included:

    remove_action( 'generate_inside_mobile_header', 'generate_navigation_search' , 1 );

    #1540933
    Lars

    That made the trick.

    I am humbled by your great service. Thank you.

    #1541177
    David
    Staff
    Customer Support

    Glad to be of help … i have been meaning to come up with solution for a while…. may even make the grade to become a built in option 🙂

    #1541260
    Lars

    I think that would be a great idea to have as an built-in option. It fits well with most designs, maybe better than a lot of other standard solutions.

    #1541888
    David
    Staff
    Customer Support

    Definitely – its on the wish list 🙂

    #1647276
    Lars

    Hi David

    I tried to use this code that you gave me (of an PHP-inserted overlay search-field) in combination with what you wrote me about centering around the logo in the split theme (here). I notice that these solutions do not work well together. I guess it has to do with that the search-item is being put outside of the menu flex-order (grasping for words here). It’s not in the menu anymore.

    Take a look at https://new.teaboytea.com to see for yourself, you’ll see the search-item far out to the right whereas I would rather have it as a part of the menu.

    Is it the PHP-code that should be inserted differently?

    #1648021
    David
    Staff
    Customer Support

    Hi there,

    i have seen your other topic – we’ll respond to that ASAP

    #2104806
    jasond

    Hi David

    Can you advise how to move the search icon to a custom hook “generate_after_logo”?

    Thank you very much

    #2105005
    David
    Staff
    Customer Support

    Hi there,

    can you raise a new topic and share a link to your site – i can then take a look at the best method for doing that.

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