I imported a header from header builder and customized it. For Mobile view, I added content to mobile sidebar but the mobile sidebar is not responsive for different screen sizes of mobile devices.
I tested the sidebar on different screen sizes of different mobile devices. For the mobile device having a bigger size screen, it displays perfectly and there also shows cross button also to close the sidebar menu but for the mobile device with a bit small screen size, the sidebar is not responsive and no cross button is shown and also it appears on whole screen and does not shows the cross button to close the side bar.
The mobile sidebar should be shown on not more than 50-60% of the screen, but for the small screen size mobile devices, the sidebar appears on whole screen and no cross button shows to close the sidebar plus on some cases the social media icons are also cropped.
Please help to make the mobile sidebar responsive for all the screen sizes of different mobile devices.
As you may see before opening the mobile sidebar and after the sidebar icon is clicked it appears on the whole screen and the cross icon to close the sidebar is not showing.
Help me to make the mobile sidebar responsive for all kind of screen sizes for different mobile devices.
I imported a header from header builder and customized it. For Mobile view, I added content to mobile sidebar but the mobile sidebar is not responsive for different screen sizes of mobile devices.
I tested the sidebar on different screen sizes of different mobile devices. For the mobile device having a bigger size screen, it displays perfectly and there also shows cross button also to close the sidebar menu but for the mobile device with a bit small screen size, the sidebar is not responsive and no cross button is shown and also it appears on whole screen and does not shows the cross button to close the side bar.
The mobile sidebar should be shown on not more than 50-60% of the screen, but for the small screen size mobile devices, the sidebar appears on whole screen and no cross button shows to close the sidebar plus on some cases the social media icons are also cropped.
Please help to make the mobile sidebar responsive for all the screen sizes of different mobile devices.
As you may see before opening the mobile sidebar and after the sidebar icon is clicked it appears on the whole screen and the cross icon to close the sidebar is not showing.
Help me to make the mobile sidebar responsive for all kind of screen sizes for different mobile devices.
Attached files: 11_154.jpg
13_233.jpg
12_202.jpg
Hi,
Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
body {--mnw: calc(100vw - 35px);
} @media only screen and (max-width:479px) {
.penci-menu-hbg {
width: var(--mnw) !important;
} } .penci-builder-mobile-sidebar-nav {
transform: translateX(calc(var(--mnw) * -1));
-webkit-transform: translateX(calc(var(--mnw) * -1));
-moz-transform: translateX(calc(var(--mnw) * -1));
}
.open-mobile-builder-sidebar-nav .close-mobile-menu-builder,
.open-mobile-builder-sidebar-nav .penci-builder-mobile-sidebar-nav {
left: var(--mnw);
}
Regards,
PenciDesign.
Hi,
Please avoid replying with duplicate content across multiple tickets. We will review and respond to it within a single ticket only.Regards,
PenciDesign.