Search Block Functionality on Responsive Mobile/Tablet

  • pradg

    (@pradg)


    1 year, 9 months ago

    Hi,

    I am building a site using 2024 theme and core blocks and some third party blocks. My Header design is Site Logo on the left, Navigation Menu and Search bar on the right. I have decided to only keep the Search icon (magnifying glass) on Mobile/Tablet view. But on Mobile/Tablet view, when I click on the Search button, the text box slides left, pushing the hamburger menu and both of these drop down below the site logo. From all the option for the Search block, it seems there is no way to either make the text box drop down below the magnifying glass icon (like in many Classic themes) or to put an overlay on the Hamburger icon without pushing it or open an overlay screen like the Navigation Menu does when we click on the Hamburger icon. I can put the Search Block inside the Navigation Block so it open in an overlay but I want the Search Block outside the Navigation block so users know there is a Search button.

    How do I go about achieving this cos the current design breaks the UI/UX. “Breadly” block theme’s Search behaviour is what I am looking for. (https://themeforest.net/item/breadly-adsense-optimized-minimal-blog-wordpress-block-theme-with-woocommerce-support/45833289)

    I am doing this on Local WP, so can’t share the site link.

    Thanks.

    View post on imgur.com
    View post on imgur.com
    View post on imgur.com
Viewing 3 replies - 1 through 3 (of 3 total)
  • Helena Artmann

    (@helenaartmann)

    1 year, 9 months ago

    Hi @pradg,

    Thanks for your suggestions and detailed explanation. I tried to check if this change is being addressed in Gutenberg updates but couldn’t find any information. However, I found this issue and wondered if you’d like to add your suggestion as a feature request.

    Thread Starter pradg

    (@pradg)

    1 year, 9 months ago

    Hi @helenaartmann

    Thanks for replying. I am not a developer and just trying to build my site using 2024 as Gutenberg block editing is touted as “no-code” FSE. I have run into multiple issues which unfortunately have no answers anywhere. I am not sure how to reply or ask for a feature request on GitHub. And the thread you have linked has some really good suggestions but looks like active discussion has stopped from 2022. I’ll go ahead and reply to the main thread anyway.

    Helena Artmann

    (@helenaartmann)

    1 year, 9 months ago

    Hi @pradg,

    The latest comment on the thread was from February 2024, and it looks like the issue is still open. While some items have been resolved, not all have been addressed. I recommend replying directly to the main thread, as it’s still being worked on.

    I’d also suggest checking out the Learn WordPress website: https://learn.ww.wp.xz.cn/. There, you can find beginner and intermediate courses, or you can search for specific keywords if you’re looking for help with anything else.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Search Block Functionality on Responsive Mobile/Tablet’ is closed to new replies.

Tags