CSS Template Analytics

[sheelsc]

I would like to remove the sidebar from this css template below. In this template the side menu is visible on larger screens. I want this sidebar to be accessible only from the hamburger menu icon on all screen sizes.

Can you explain how to do this in the code.

 

http://www.w3schools.com/w3css/tryw3css_templates_analytics.htm#

 

Thanks

[dsonesuk]

Remove 'w3-collapse' class from nav element and replace with ' w3-hide-large' class, then remove 'margin-left:300px;' from w3-main div element.

[sheelsc]

Thank you for the feedback. Following your instructions It has removed the menu from this screen but now there is no access to the side menu as the hamburger icon is only available in the smaller screen sizes.

[dsonesuk]

Remove 'w3-hide-large' from button, so it should be

<button onclick="w3_open();" class="w3-btn w3-padding-0 w3-hover-text-grey"><i class="fa fa-bars"></i> Menu</button>

Remove the 'w3-hide-large' I previously asked you to add, and instead add display: none; to attribute style

<nav id="mySidenav" style="z-index:3;width:300px; display: none" class="w3-sidenav w3-white w3-animate-left">

IT should work now.

[sheelsc]

That worked perfectly Thank you!!!