Refresh page on browser resize

I am testing my website. To test the responsive menu I resize the browser and on certain size the mega menu hides and hamburger menu appears. In hamburger menu there is a search keyword textbox and submit button. But it will not work unless I refresh the page.

But if I directly open the website on mobile and tablet then it will work perfectly.

I have added several codes so that if user resize the browser then page reload code will run but thus not works also everytime.

Any solution for this?
Shano KhanSoftware EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

CodeTwo SoftwareSoftware DeveloperCommented:
I wouldn't implement refreshing on browser resize, the only thing it does is annoy viewers.
Are you using Bootstrap for responsiveness? Or some custom JavaScript? It's hard to tell where the problem lies without specific information about the code.
To be honest, the majority of people who resize the browser's window are web designers who want to do a quick responsiveness check. And even if it does work, it does not mean that it will look the same on a mobile device.  The most important thing is that your website works on all kinds of devices when opened directly. It is not that I recommend leaving everything the way it is, it is always worth to get closer to perfection :)
2

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Steve BinkCommented:
>>> the mega menu hides and hamburger menu appears. In hamburger menu
>>> there is a search keyword textbox and submit button. But it will not work
>>> unless I refresh the page.

How are you attaching functionality to the search textbox and submit button?  This sounds like you're directly assign events to elements which are not present as the structure finishes loading.  If that's the case, delegating the events will resolve this issue.

As mentioned above, refreshing the browser after a resize is not a good strategy.  I would tolerate that once before I just found a different site.
0
Dave BaldwinFixer of ProblemsCommented:
The browser does not notify the web page that the window has been resized.  You would have to be continuously checking the window size to know that.
0
Steve BinkCommented:
@Dave Baldwin: there's an event for that.  https://developer.mozilla.org/en-US/docs/Web/Events/resize
0
lenamtlCommented:
You should  rethink or fix your template instead.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Mobile

From novice to tech pro — start learning today.