- This topic has 12 replies, 3 voices, and was last updated 3 years, 3 months ago by Leo.
-
AuthorPosts
-
December 22, 2020 at 6:33 am #1590608metcomllc@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?
December 22, 2020 at 7:22 am #1590815DavidStaffCustomer SupportHi there,
do you want the search form to always be visible ?
December 22, 2020 at 8:03 am #1590861metcomllc@aol.comYes, I want it to be visible
December 22, 2020 at 8:53 am #1590914DavidStaffCustomer SupportIt 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:
December 22, 2020 at 9:23 am #1590952metcomllc@aol.comPlease 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…..”December 22, 2020 at 12:32 pm #1591155DavidStaffCustomer SupportIf 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 spaceDecember 22, 2020 at 12:51 pm #1591188metcomllc@aol.comWhere do I find Settings > Advanced > Additional CSS Class(es)?
December 22, 2020 at 1:27 pm #1591213metcomllc@aol.comI 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)?
December 22, 2020 at 2:26 pm #1591262LeoStaffCustomer SupportTake a look at this:
https://www.screencast.com/t/spas3SMIxmIDecember 22, 2020 at 2:41 pm #1591276metcomllc@aol.comDecember 22, 2020 at 7:17 pm #1591422LeoStaffCustomer SupportJust to confirm, we are talking about this right?
https://www.screencast.com/t/mYE1D3wmIf 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.
December 22, 2020 at 7:34 pm #1591444metcomllc@aol.comSo I was editing the page visually and switched to code editor.
I removed the following
<hr class="wp-block-separator is-style-wide"/>
December 22, 2020 at 7:37 pm #1591447LeoStaffCustomer SupportGlad to hear 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.