adding a menu or a dropdown to smaller screen sizes

Question

How can I make categories listing appear in a dropdown on smaller screens? Similar to the concept where a navigation bar with pages is substituted for a hamburger menu on smaller screens.

So on the current website that I'm designing using Jupiter Wordpress theme with Elementor page builder. I wanned to create a project page where it would display a Blog list type of element with categories uptop

See attached image below

I'm new to coding :D i have a rough understanding of the structure of things when it comes to HTML and CSS.

Thank you in advanced :D

Answer 1

Very useful in your case will be @media selector. You can use @media to detect i.a. size of the screen, and apply for it other CSS properties. For example:

@media (max-width: 500px) {
  header {
    display: none;
  }
}

I hope, that i helped ;)