How to use media queries to make a dropdown menu?

Question

I want to use media queries to delete my navbar if the screen is 700px or less. I want to then add a dropdown menu instead.. Can I delete elements using media queries? CSS & HTML.

Answer 1

You don't really need to delete any element in order to make them disappeared, use CSS display: none to make them invisible.

In HTML, make a div#navbar for your navbar element and a div#dropdown for your dropdown element.

In CSS, add
#navbar {
display: block;
}

#dropdown {
display: none;
}

to set default, turn element navbar on and dropdown off.

And for lower screen size, add following CSS:

@media (max-width: 700px) {
#navbar {
display: none;
}

#dropdown {
display: block;
}
}

which overide the default and turn element dropdown on, and navbar off when screen is below 700px.