Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Show/hide toggle button for markdown block for mobile view


greensparks

Question

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)

 

Edited by greensparks
Link to comment
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

6 answers to this question

Recommended Posts

  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

@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.

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...