Tagged: sidebar
I have a page with a sidebar which I would like to render without a sidebar for mobile users. is this possible?
Hey ihf-eramstad,
Could you post a link to the page in question please? Are you looking to hide the sidebar on mobile for this page only?
Best regards,
Rikard
Hi Rikard,
Link provided. I’d like to hide the sidebar on mobile for this page and 3 child pages beneath it.
Hi,
Thanks for that. The sidebar looks to be hidden on mobile already on that page though, did you find a solution? If not, then please try to specify which content you are looking to hide on mobile a bit further.
Best regards,
Rikard
Thanks – It looks like a responsive breakpoint setting somewhere is removing the sidebar once the browser reaches a mobile phone screen size. I think I can rely on that.
Is there a way to keep the left sidebar a fixed width? I don’t want the sidebar width to scale down as the browser window size is reduced.
Hi,
Thank you for your patience, the following css gives the left sidebar a minimum width of 264px and calculates the body width accordingly until 767px when the sidebar is hidden.
You said you want the three child pages beneath it to also have this behavior so I added parent-pageid-1772 to the css, this should work but if not please link to the three pages so we can check.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
@media only screen and (min-width: 768px) {
#top.parent-pageid-1772 #main .sidebar.sidebar_left {
min-width: 264px;
}
#top.parent-pageid-1772 #main .container_wrap.sidebar_left .container .av-content-small.units {
width: calc(100% - 264px);
}
}
After applying the css, please clear your browser cache and check.
Best regards,
Mike