[Support request] Moving search field and icon

[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

[David]

Hi there,

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

[Lars]

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

[David]

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;
}

[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.

[David]

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 );

[Lars]

That made the trick.

I am humbled by your great service. Thank you.

[David]

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 🙂

[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.

[David]

Definitely – its on the wish list 🙂

[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?

[David]

Hi there,

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

[jasond]

Hi David

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

Thank you very much

[David]

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.

[Lars]

Hi David

Is this code of making on overlay search field up to date? Would it work on this page? https://ny.nordfro.se (to replace the present obsolete search function)

Thanks
Lars

[Author]

Posts