[Resolved] Search in Full Screen

[Vadims]

Hello Tom,

I would like to customize the search icon and the way search is being displayed.

How do I make the search look like on this website – https://www.helpscout.net/blog

Thank you

[Leo]

Hi there,

Unfortunately currently not possible without some custom coding: https://generatepress.com/forums/topic/search-modal/#post-495843

[Vadims]

Hello Leo,

thank you, but when I enter this code in functions it breaks my site and shows http error 500, plus I am not looking for this kind of full screen search, more like on this website https://www.helpscout.net/blog

thank you

[Leo]

Hmm there wasn’t actually a solution in that post.

As Tom mentioned in that post, that type of full width search currently requires a decent amount of coding which is out the scope of this support forum. We are hoping to add it as an option soon though 🙂

[Vadims]

Leo,

There was a fuctions code, I tried that one.

what are my options then? Because I am going to have a logo on the website and the way my search works right now, it will overlay with the logo.

Thank you

[Leo]

The code wasn’t for making the search full screen.

As Tom said it’s currently not possible without lots of custom coding.

Can you link me to your current page?

[Vadims]

Leo,

I submitted the website URL, but at the moment I don’t have much going on on the website.

I like the way search is right now but when I upload the logo, search and the logo overlap.

This does only happen on the tablet, so I could possibly make the logo smaller on the tablet, but it will probably look weird (this is why I asked if this full screen search is possible), but I can try anyways.

If you could please provide with some css to make the logo smaller only on the tablet that would be great.

[Leo]

Can you upload the logo so I can see what the problem is?

Currently is using title and tagline.

[Vadims]

done

[Leo]

Have you consider using the mobile header feature? https://docs.generatepress.com/article/mobile-header/

I think it will look slick if you use the logo/icon (without text) as the mobile header logo.

Let me know 🙂

[Vadims]

Leo,

yes I have. The issue is that:

1. The logo is just too small

2. While on Ipad and in horizontal position the logo still remains like on desktop and therefore overlaps with the search field and while in vertical position, the logo is too small again and when you click search, it overlaps with the menu button now.

3. Number 2 applies to mobile as well

Therefore I either need to completely change how search is being displayed or adjust search field perfectly for tablet and mobile and preferably make the logo a bit bigger.

If you could please give me css to adjust the search field width and padding seperately on table and mobile that would be great, maybe this will be enough.

The folowing “issues” can be seen on the website now.

Thank you

[Leo]

Let’s try this CSS to reduce the logo size on tablet:

@media (min-width: 769px) and (max-width: 1024px) {
    .site-logo {
        max-width: 300px;
    }
}

[Vadims]

Leo,

didn’t do anything at all. And I would like to increase the logo size.

And I would you like to adjust the search field width and padding on tablet and mobile separately, because if I press search, the search field goes over the logo when tablet is in horizontal position and also goes over the menu icon when I am in vertical position on the tablet or when I am on mobile.

Here are the photos. https://ibb.co/bHteax https://ibb.co/b1fQFx

Thank you

[Leo]

Hmm I don’t see the my CSS being added.

Can you try clearing your caching plugin?

Also try this CSS to switch the search and toggle position: https://generatepress.com/forums/topic/search-icon-should-be-to-the-left-of-menu-icon/#post-339792

[Vadims]

Leo,

it kinda worked, but now the menu and search are aligned to the left. How do I just switch the menu and the search and keep them aligned to the right?

Thank you

[Author]

Posts