How to create an automatic outline side bar based on heading markdown of a post

Using Themes
1

Hi!
I have successfully deployed my website using hugo theme JuiceBar via github. It cost me four days and I am so delighted!
My problem is: in JuiceBar developer’s demo page, there is a list of heading on the right side bar, which is built on the heading markdown order in the article.md.

Inked02
Inked021789×766 165 KB

However, even though I applied headings such as #, ##, and ### in my article.md, my website doesn’t show the same sidebar as the developer’s demo site. And in my VS code I can still see my headings are correctly formatted as headings in the outline section on the left, such as:

Heading 1

Heading 2

How can I fix it and create an auto-sidebar? Thank you so much!

(BTW, I am also looking for ways to change the font size in my articles using JuiceBar.)
Kai

2

These are probably questions for the author of the theme.

3

thank you for your advise

4

Please look at the css as its not my problem just kicks the can down the road