you could have multiply
@media queries which check for various width (using min-width and max-width in the media query), and inside each media query write the different css selectors with different widths
if/else is not possible for css.
you could add a addEventListener to
window which listen for resize.
read the stackoverflow question properly, and comments. Some good recommendations are make. The first answer uses Jquery, be aware of this. Be really careful with what you are doing here, DOM manipulation with resize directly seems ill advised, what are you planning?
I made a task bar on the top of the website, I hid some of the elements from the page and displayed ‘more’ using @media in case the screen size was reduced and a dropdown using toggleSlide was established so that the hidden elements could be shown, but the problem is that I only want the dropdown menu to show the elements hidden in different smaller screen sizes considering no. of hidden elements varies but uptil now, I’ve only been able to show all of them in the dropdown…I’m using bootstrap in the webpage if that info is of any importance.
This is too big a question, you dont have to explain everything, I’ll check out the addEventListener links you shared
There are so many different ways to solve this. It really depends on the final desired outcome, research your options and familiarize yourself with there pros and cons
the most common solution is to have a full navigation menu, something like this:
for larger screens, and they make a hamburger menu for small screens (using media queries), and then do the animation of the hamburger menu with JS/jquery.