on http://purecss.io/ if you make the viewport narrow the left side menu will disappear.
it still works with js off and i didn’t find any media queries, so how do they do it?
do you know of any tutorials on how to do it?
on http://purecss.io/ if you make the viewport narrow the left side menu will disappear.
it still works with js off and i didn’t find any media queries, so how do they do it?
do you know of any tutorials on how to do it?
it’s minified maybe that’s why i missed it, but i didn’t see one for that feature.
Your right minified make it extremely difficult
there is a
@media (max-width: 870px) .pure-menu-link {
position: fixed;
left: 0;
display: block;
}
which shows the menu icon
Its standard parameters are
.pure-menu-link {
display: none;
top: 0;
left: 150px;
background: #000;
background: rgba(0,0,0,0.7);
padding: 0.75em 1em;
}
There is a
#menu {
margin-left: -150px;
width: 150px;
position: fixed;
top: 0;
left: 150px;
bottom: 0;
z-index: 1000;
background: #191818;
overflow-y: auto;
-webkit-overflow-scroll: touch;
}
where
@media (max-width: 870px) #menu {
left: 0;
}
overrides the left attribute.
It’s in baby-blue.css.
....
@media (max-width: 870px) {
/* Navigation Push Styles */
#layout {
position: relative;
padding-left: 0;
}
#layout.active {
position: relative;
left: 150px;
}
#layout.active #menu {
left: 150px;
width: 150px;
}
#menu {
left: 0;
}
.pure-menu-link {
position: fixed;
left: 0;
display: block;
}
#layout.active .pure-menu-link {
left: 150px;
}
}
@media (max-width: 767px) {
etc..