- This topic has 1 reply, 2 voices, and was last updated 3 years, 5 months ago by
.
-
Posts
-
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?
Customer Support
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; } }
- You must be logged in to reply to this topic.
