Topic: I cannot place the search box in the section I want.

halter723
August 2, 2024 at 7:32 am

https://imgur.com/ilxQRyg
I can’t bring up the search bar.

I am using the SCRIBE theme from the library. In the demo of the theme, the homepage was a permanent link.

I need to place a small search box in the red area where the menus are in the Elements section, but I can’t.

As I said, I do not have a homepage, it is a permanent link.

When I click to place a search box on the right side of the components section, the header and footer of the components section works, but the middle area does not work.

I need to place the small search box in the red area.
Ying
August 2, 2024 at 9:57 am
Hi there,

It’s not possbile to use the default search modal for that layout.

However, you can add the search button’s HTML as a menu item label as a workaround.

1. go to appearance > menus, add a Custom links, add the below HTML to the label field:
<a href="#" role="button" aria-label="Open search" data-gpmodal-trigger="gp-search"><span class="gp-icon icon-search"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path></svg><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z"></path></svg></span></a>

Here’s a screenshot for your reference:
https://app.screencast.com/TwK0cM1n7Wx1t

2. Enable the search modal at customizer > layout > primary navigation, so that the search modal function is active.

3. Now there will be 2 search icons, hide the original search by adding this CSS:
```
.menu-bar-items a[data-gpmodal-trigger="gp-search"] {
    display: none;
}
```
halter723
August 2, 2024 at 12:02 pm

In the menu section, a link is needed to add something to the special links, I pasted the code in the text section, I didn’t understand the tag section. When I activated the search section, 2 searches appeared, so I can’t use it.

By doing this in customizer > layout > primary navigation, 1 search appears, but it’s not in the position I want, it doesn’t matter, even if it’s a little lower, it does the job, and there’s also room for the adsense ad there. Thank you.
Ying
August 3, 2024 at 1:29 pm

You didn’t read or follow my instructions well, please try your best to follow step by step.

And I included screenshots for your reference, please also check that.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

I cannot place the search box in the section I want.