How to make navigation menu invisible when search form is being used?

Hi,

To clarify:

You want the menu items hidden when you’re typing on the search form or when the search form is in focus/selected?

This requires you to add a custom script that adds in an eventListener that checks if the search form is in use. Within that eventListener, you then have to add your conditions checking for when the search form is in use.

As for providing the actual script, unfortunately, site customizations that require scripts are outside of our scope of support.

I see. Well, I mean is there another way I can do this? Is it possible to make the search form width the same size as the navigation menu, even as it changes?

The part that seems challenging is if I add a custom width, and then if I add more menu items in the future, then they would be visible and that would be a problem.

But I think the solution could be if the search bar form mirrors the width of the navigation menu. How can I do this?

Thank you!

I see. Well, I mean is there another way I can do this? Is it possible to make the search form width the same size as the navigation menu, even as it changes?

If its only this then it should be achievable with CSS.

You can set the search form’s ancestor <nav> container to “position” property to “relative and then set the search form to position: absolute; width: 100%; so it goes to 100% width of the ancestor nav.

We can help you with this if you can link us to the page in question.

Thanks for your comment @ejcabquina, I deeply appreciate your replies!

I am unable to do this by myself, it does seem really difficult. But I also unfortunately am not able to share the page in question.

I am not sure what to do. Is there another way to do this?

I do have 2 ideas:

1) I am thinking, the search icon is on the far right of my navigation, the very last element. Is it possible to expand the search form to the right, right after the user clicks on the icon?

2) My second idea is is it possible to just make the whole page invisible or have some sort of opacity when user clicks on search? I think that might also work!

1) I am thinking, the search icon is on the far right of my navigation, the very last element. Is it possible to expand the search form to the right, right after the user clicks on the icon?

I’m not exactly sure if it will work well for your site as I have no idea what it looks like.

2) My second idea is is it possible to just make the whole page invisible or have some sort of opacity when user clicks on search? I think that might also work!

This needs custom script. Unfortunately, this is out of our scope.

I see. Well, thank you regardless.

I see. Well, thank you regardless.

No problem. ??