CODEWITHSUNDEEP
htmlcss
CJ408
CJ408

Reputation: 41

CSS responsives, close menu automatically

I am fairly new to CSS, I am working on the responsive for a page. I have a menu bar on the left side of the screen, which can be retracted on a click on a button, I want to make it so that once the screen size reaches a certain size, the menu will retract automatically without user having to click on the button.

<a href="#" class="menu-toggle icon" id="left-menu-toggle" title="Menu">
    <i class="fa fa-bars"></i>
</a>

this is the menu button.

Upvotes: 1

Views: 65

Answers (2)

Isabel Inc
Isabel Inc

Reputation: 1899

You could just hide the menu using a media query and display none.

You can adjust the max-width based on the size of the device you want the menu to hide on. Currently the styles will be applied for all devices with a size of 480px or smaller.

Something like this

@media only screen and (max-width: 480px) {
    #left-menu-toggle {
        display:none;
    }
}

Additionally you could also use min-width:481px and have the menu be a display:block on larger screens. This is know as mobile first because you're targeting your css towards mobile devices and then changing things for larger devices.

Upvotes: 2

Griehle
Griehle

Reputation: 114

You could use

  @media screen and (min-width: 780px) {
  fa-bars {
    display: none;
  }
}

Upvotes: 1

Related Questions