- This topic has 19 replies, 2 voices, and was last updated 3 years, 2 months ago by Leo.
February 17, 2018 at 4:32 am #498730Vadims
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 youGeneratePress 2.0.2GP Premium 1.5.6February 17, 2018 at 8:59 am #498956LeoStaffCustomer Support
Unfortunately currently not possible without some custom coding: https://generatepress.com/forums/topic/search-modal/#post-495843February 19, 2018 at 8:48 am #500337Vadims
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 youFebruary 19, 2018 at 6:26 pm #500709LeoStaffCustomer Support
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 🙂February 20, 2018 at 12:24 am #500867Vadims
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 youFebruary 20, 2018 at 8:22 am #501238LeoStaffCustomer SupportFebruary 21, 2018 at 9:37 am #502161Vadims
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.February 21, 2018 at 12:24 pm #502290LeoStaffCustomer SupportFebruary 22, 2018 at 8:37 am #502973Vadims
doneFebruary 22, 2018 at 5:33 pm #503291LeoStaffCustomer Support
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 🙂February 23, 2018 at 12:30 pm #504010Vadims
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 youFebruary 23, 2018 at 7:06 pm #504209LeoStaffCustomer SupportFebruary 24, 2018 at 4:50 am #504415Vadims
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.
Thank youFebruary 24, 2018 at 6:59 am #504558LeoStaffCustomer Support
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-339792February 25, 2018 at 2:21 am #505011Vadims
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?
- You must be logged in to reply to this topic.