Responsive Side Menu
The Nature Portfolio template is not well explained on the W3Schools website. The use of a responsive
The classes that are key the templates "fully automatic responsive side navigation" .
To understand the operation of this template you really do need to inspect the W3.css file itself.
The two classes that are key to the operation of the automatic side menu are "w3-main" and "w3-collapse".
w3-main and w3-collapse classes
w3-collapse
w3-main
The CSS @media Queries:
The CSS @media Queries:
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.
w3-sidebar.w3-collapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;
margin-right:0!important}.w3-auto{max-width:100%}}