[Resolved] Larger Search

[metcomllc@aol.com]

My site https://www.tryhypnosisnow.com/hypnosis-downloads has a search icon under the header.

I would like a more pronounced/larger search bar or graphic like this site https://www.hypnosisdownloads.com. Is there a larger search option on GP?

[David]

Hi there,

do you want the search form to always be visible ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[metcomllc@aol.com]

Yes, I want it to be visible

[David]

It will take a few steps:

1. We need to create a Shortcode for our Search Field.
This article provides the PHP Snippet to do that:

https://generatepress.com/forums/topic/add-search-hero-box-under-header/#post-1571375

This article explains adding PHP:

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

2. Then you can use the Block Element:

https://docs.generatepress.com/article/block-element-overview/

To create your search area to which you can now add your new shortcode:

[search_form]

In the Block Element you can select the Hook – use the generate_after_header hook to place it below the navigation.

Set the Display Rules to the Entire Site or wherever it is you want it displayed.

NOTE: We recommend using the GenerateBlocks plugin for better styling control in the block element:

https://wordpress.org/plugins/generateblocks/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[metcomllc@aol.com]

Please take a https://www.tryhypnosisnow.com/hypnosis-downloads on a mobile phone. Is there a way to put text content right under the search box?

Is there a way to move the current content below it, closer to the search box so there isn’t a big gap or space there?
“By utilizing the NYC Hypnosis Life Altering hypnosis recordings, you can train your mind to overcome any habit…..”

[David]

If you select the Separator Block you have at the top of your post content, go to the Settings > Advanced > Additional CSS Class(es) and enter: hide-on-mobile this will remove that block on mobile phones. Its that block that is taking up the space

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[metcomllc@aol.com]

Where do I find Settings > Advanced > Additional CSS Class(es)?

[metcomllc@aol.com]

I see the Separator Block on my mobile version but not my desktop? I do not know how/where to find the Separator Block.

Where do I find Settings > Advanced > Additional CSS Class(es)?

[Leo]

Take a look at this:
https://www.screencast.com/t/spas3SMIxmI

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[metcomllc@aol.com]

The problem is, there is no separator block on my main page. My main page is a Page not a Post.

[Leo]

Just to confirm, we are talking about this right?
https://www.screencast.com/t/mYE1D3wm

If that’s definitely a separator block as the HTML shows.

Looks like it’s inserted above the “By utilizing the NYC….” sentence and right below the search bar.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[metcomllc@aol.com]

So I was editing the page visually and switched to code editor.

I removed the following <hr class="wp-block-separator is-style-wide"/>

[Leo]

Glad to hear 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts