[Resolved] Search bar with an existing box

[Dong]

Hi guys,

I have a question:

How can I make the search in the primary Nav work as a box where users can type in the search time right away, and then click on the glass to perform the search? Like this:

https://dongknows.com/wp-content/uploads/2020/06/Search.png

Thanks,

-Dong.

[Leo]

Hi there,

Is this what you are looking for?
https://wordpress.org/support/topic/generatepress-search-how-to-change-visual-display/

Let me know 🙂

[Dong]

Thanks, Leo. I actually already tried that and it kinda worked but it broke the Nav bar and it doesn’t have the magnifier as the button (instead there’s some text). I use SVG icon tpe by the way.

Basically, I want folks to be able to type in the search term right away (without clicking on the search button) and then click on the button (instead of having it hit enter) to execute the search.

[Tom]

Hi there,

You’d need to do something along these lines:

add_action( 'generate_inside_navigation', function() {
?>
    <div class="custom-search">
        <form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
            <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />
            <button class="button"><?php generate_do_svg_icon( 'search' ); ?></button>
        </form>
    </div>
<?php
} );

Then you’d need to position/style it with CSS.

[Dong]

Thanks, Tom.

1. I’ve had a VERY hard time figuring out the elements in the code you provide to customize (the glass, the button, the search box etc.) Inspecting doesn’t seem to show which is whihch.

Also, the settings don’t stick with the sticky Nav (which is the primary Nav.)

Can you please give me some temp CSS code that I can work with?

2. Another thing is I can’t see to be able to center the caption of the gallery in this post (top pictures). I was able to make the font italic and change the font size but there’s no way to make the caption centered. Can you please shed some light in this?

The post: https://dongknows.com/wi-fi-6-routers-compared-which-one-to-consider/

The caption in question: Wi-Fi 6 routers compared: So many options, so little time. (under the gallery at the top of the post.

Thanks,

-Dong.

[Tom]

Hi there,

1. Is there somewhere I can see it set up? It will be difficult to provide the necessary CSS without seeing it.

2. You have this CSS on your site:

.media-credit {
    color: #909090;
    display: block;
    font-size: .9em;
    line-height: 1.2em;
    margin: 3px 5px;
    text-align: right;
}

That text-align: right is preventing the caption from centering.

[Author]

Posts