Sun Dial Menu
Responsive Side Menu
Menu Responsive Side Menu
 

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

" Used together with w3-sidebar to create a fully automatic responsive side navigation. For this class to work, the page content must be within a "w3-main" class. "

w3-main

" Container for page content when using the w3-collapse class for responsive side navigations "

Top

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%}}

External Links Disabled.

tempusfugit.me.uk is a non-commercial website. No payment or benefit is gained by the placement of links to other websites.

The External link is disabled to on this page, please visit other pages

Links

External

Site design by Tempusfugit Web Design -