Archived topic
Left sidebar on top and as button on mobile
1 reply · Started by Jon on November 16, 2022
Hi - when viewed on mobile my left sidebar goes to the bottom of the page and I want it at the top. I used the following CSS (found on the forum) to achieve that.
@media(max-width: 768px) {
.left-sidebar .site-content {
display: flex;
flex-direction: column-reverse;
}
}That works great, but what I also want is to collapse it into a 'button' to a user has to click the button to see the contents of the sidebar (so it doesn't take up so much real estate). This page on this site https://startupstash.com/explore/ does exactly what I want. When you view it on a desktop the left-hand nav with the filter options in it appears as normal, but when you view it on mobile it moves to the top as a button.
How can I achieve this?
Hi there,
We could make a simple HTML toggle, to show hide the widgets. Try this:
1. Add a new Hook Element in Appearance > Elements.
1.1 Add this HTML to the Hook:
<input type="checkbox" id="side-toggle">
<label for="side-toggle"><span>Show Sidebar</span><span>Hide Sidebar</span></label>1.2 Set the Hook to: generate_before_left_sidebar_content
1.3 Set the Display Rules
1.4 Publish that hook.
You should see a checkbox before your sidebar widgets.
2. Now add this CSS:
/* Hide toggle on desktop */
@media(min-width: 769px) {
#side-toggle,
#side-toggle+label {
display: none !important;
}
}
@media(max-width: 768px) {
/*-- mobile styles -- */
/* move sidebar above content */
.left-sidebar .site-content {
display: flex;
flex-direction: column-reverse;
}
/* switch lables on off toggle */
#side-toggle:checked+label span:nth-child(1),
#side-toggle:not(:checked)+label span:nth-child(2) {
display: none;
}
/* remove all content after label on check */
#side-toggle:not(:checked)+label~* {
display: none;
}
/* hide input checkbox */
#side-toggle {
position: absolute;
visibility: hidden;
opacity: 0;
}
/* style label to look like a button */
#side-toggle+label {
display: block;
padding: 10px;
border: 1px solid;
line-height: 1;
text-align: center;
border-radius: 4px;
background-color: #fff;
}
}