How to toggle the sidebar menu for every browser size?


Tags: jquery,html,css

Problem :

How to get the menu-toggle button to show and hide the sidebar in this template for every browser size and not only if it's smaller than 767px? Currently the button only shows up if the browser window is smaller than 767px.

This is the CSS of it: - http://startbootstrap.com/templates/css/simple-sidebar.css

I tried to change the display from none to inline-block, but now the menu doens't toggle anymore:

#menu-toggle {
  display: inline-block;
}


Solution :

The key is in the @media query. Near the bottom of the stylesheet, you'll notice

@media (max-width:767px) {
    ...
}

Whatever styles you want applied universally, just remove them from this block, and place them in the body of your stylesheet instead.


    CSS Howto..

    How to handle javascript & css files across a site?

    How to align radio buttons inside a DIV?

    CSS: How to set procentual width using display:flex?

    How to make links work, regardless of location in directory structure?

    How to negate conjunction of two attributes in CSS selector

    How to activate a CSS3 (webkit) animation using javascript?

    How to Write an Angular directive to update CSS class based on form validation

    How to prepend a div to another div using javascript

    How to strongly force line-height in css, with no streches?

    How to remove CSS triangles?

    How can I be sure that a website is responsive by only looking the code?

    How to override the external CSS using some condition in Jquery?

    html,css.php? help how output my form subissions into webpage instead of text file?

    How to modify the link text(html link) properties using css

    How to make this page less cluttered with css and html [closed]

    How to use CSS calc according to a certain amount of li's?

    CSS How to multiple background + gradient?

    How Do I Reduce the Padding Around a Chart Within an Article

    How to not display css padding when span element is empty

    How to center this rotating image (CSS animation)

    How to move this circle using javascript?

    How to avoid text go below the thumbnail with css

    How do I make this CSS work to have semi-transparent border?

    How can I change the css properties of a google visualization table and it columns?

    How can CSS interfere with JavaScript?

    How to bring all elements down with a header slide up/down?

    How can I disable the color defined in an previously defined CSS class

    How to place a css button in center (horizontal) of four table columns

    CSS: how to select parent's sibling [duplicate]

    How to change CSS id property depending upon screen size