Loading ...

How to Hide Sidebar on Mobile Screens

0

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">
        <p>Home</p>
    </a>
    <a href="#second">
        <p>What?</p>
    </a>
    <a href="#third">
        <p>Who?</p>
    </a>
    <a href="#fourth">
        <p>Contact</p>
    </a>
</div>

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;
    }
}
Was this topic helpful?0% of users found this helpful
  • Tags:
  • Categories:
Advertiment
arrow