Can you remove elements for responsive design?

HTML-CSS
1

For example if I want a left hand side vertical navbar to disappear completely when used on a mobile phone, can this be done with plain HTML/CSS?

I understand you can hide elements but that means everything still acts like it’s still there.

Cheers

2

you can use mediaqueries for that

having different text or elements shown for different screen sizes is bad for SEO, but you could have a nav bar that collapses to an hamburger menu on smaller screens - I have never tried to do one tho, I don’t know how doable it is with just css

1 Like
3

Thank you, that’s good to know about SEO. Will look up the hamburger method, if all else fails I’ll just make it a horizontal nav.

4

A few months ago, I looked into doing a hamburger menu with CSS. I found a tutorial, but it looked very involved. I decided to wait till I learned JavaScript or React to attempt it.

1 Like
5

Then I’ll definitely give it a miss! =}

I never looked into it but it’d be perfect right now.

6

A hamburger menu using just on hover (for open/close) is fairly easy. If you want more JS like behavior but using pure CSS you have to use some tricks like the checkbox hack. It’s still very doable, but I would opt for using JS when possible.

You can find a bunch of tutorials/articles on this if you search for it.

It’s not uncommon to hide or move elements. If you use display: none it’s like the element was removed from the DOM, if you use visibility it is just hidden but still takes part in the document flow. What you use depends on the situation.

For navigation, you really shouldn’t just remove it but find a way to have the navigation work on different screen sizes.