Loading ...

How to Hide Sidebar on Mobile Screens


How to remove the sidebar completely when people are viewing on mobile, then maybe add another container at the top of the page with the logo in. This way there's a lot more room for the page to breathe since it's just a 100% width container, above another, above another. Is it possible just to make the changes to the CSS and HTML you want within an @media bracket? Any help appreciated!

<div id="sidenav">
    <img id="logo" src="Images/Logo.png">
    <a href="#first">
    <a href="#second">
    <a href="#third">
    <a href="#fourth">

You have the right idea, but there are a couple things that need to be changed. Instead of using max-height it would be better to use max-width. Usually, 768px is considered the breakpoint for mobile width vs. desktop width (remember that users can turn their phones sideways and that there are some large phones). Also, there was a missing curly brace. If you change all of that, you will end up with this:

@media (max-width: 768px) {
    #sidenav {
        display: none;

Choose your Reaction!
Note: You must be logged in to post a comment.