[Resolved] Search in Full Screen

Home Forums Support [Resolved] Search in Full Screen

Home Forums Support Search in Full Screen

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #498730
    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

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #498956
    Leo
    Staff
    Customer Support

    Hi there,

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

    #500337
    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

    #500709
    Leo
    Staff
    Customer 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 ๐Ÿ™‚

    #500867
    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

    #501238
    Leo
    Staff
    Customer Support

    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?

    #502161
    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.

    #502290
    Leo
    Staff
    Customer Support

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

    Currently is using title and tagline.

    #502973
    Vadims

    done

    #503291
    Leo
    Staff
    Customer 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 ๐Ÿ™‚

    #504010
    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

    #504209
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #504415
    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

    #504558
    Leo
    Staff
    Customer 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-339792

    #505011
    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

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.