Show/hide toggle button for markdown block for mobile view

Site URL: https://greensparkstech.com.au

I have used the following CSS code to create a sticky sidebar that links to different page sections:

.markdown-block .sqs-block-content {
  background-color: #fafafa;
  box-shadow: 0 3px 20px rgba(0,0,0,0.08);
  min-height: 0 !important;
  position: fixed !important;
  left: 0;
  top: 30%;
  transform: translateY(-50%);
  z-index: 999;
  padding: 20px 40px !important;
}

Which works well.

However, it doesn't look great on mobile view (block overhangs other content while scrolling), so I currently have it hidden on mobile view. What I would like to do is have a toggle button on the side that can be tapped to cause the block to slide out to use  the navigation, and also make it slide back away. I'd also like it to slide away if another part of the screen is tapped while it is slid out.

Does anyone know how I might do this?

(tagging @tuanphan since you are a wiz at these things)

On 7/29/2021 at 1:19 PM, greensparks said:

Site URL: https://greensparkstech.com.au

I have used the following CSS code to create a sticky sidebar that links to different page sections:

.markdown-block .sqs-block-content {
  background-color: #fafafa;
  box-shadow: 0 3px 20px rgba(0,0,0,0.08);
  min-height: 0 !important;
  position: fixed !important;
  left: 0;
  top: 30%;
  transform: translateY(-50%);
  z-index: 999;
  padding: 20px 40px !important;
}

Which works well.

However, it doesn't look great on mobile view (block overhangs other content while scrolling), so I currently have it hidden. What I would like to do is have a toggle button on the side that can be tapped to cause the block to slide out to use  the navigation, and also make it slide back away. I'd also like it to slide away if another part of the screen is tapped while it is slid out.

 

Does anyone know how I might do this?

(tagging @tuanphan since you are a wiz at these things)

 

Hi.

I don't see it on homepage. Can you share link to page where you added it?

@tuanphan Thanks so much for the reply. The page with the menu is here: https://www.greensparkstech.com.au/store

On 7/30/2021 at 4:34 PM, greensparks said:

@tuanphan Thanks so much for the reply. The page with the menu is here: https://www.greensparkstech.com.au/store

Thank you. Now you want to add a button on right of screen >> Tap on it >>> Open Sidebar >> Tap again >> Close sidebar. Is this right?

@tuanphan Yes, that is correct. The sidebar would contain the index links which could be clicked on and move to the appropriate place on the page. It would also be good if, once an index link had been clicked, the sidebar slides back and the page scrolls to the right place.

On 8/1/2021 at 10:42 AM, greensparks said:

@tuanphan Yes, that is correct. The sidebar would contain the index links which could be clicked on and move to the appropriate place on the page. It would also be good if, once an index link had been clicked, the sidebar slides back and the page scrolls to the right place.

Hi,

First, add a Code Block under Markdown >> Paste this code

<span class="mobile-sidebar">enter text</span>

When you're done, let me know. I will test some script code to achieve above.

Thanks very much, I have added the code block with the suggested code.