Left menu issues.

[JulianChia]

I am trying to use this theme. It is a very nice template. But am experiencing a few issues with the left menu. Appreciate your kind advice on how to over my issues.

Below is a picture of the issue:

1. The number of headers I have used seems to exceed the length of a page. In such a situation, I cannot see my headers after 5. Conclusions. The left menu cannot be scrolled up or down either. How to make it scrollable? Presently when I roll my mouse wheel, the text in the white zone gets scrolled regardless of my mouse pointer position. I think when the mouse pointer is within the left column, the mouse wheel should scroll the left menu, else it should scroll the main text region.
2. Information on Project maintained by and Hosted on GitHub-Pages - Theme appears to be overlapping with my headers in the left menu. How do I prevent this overlap? I was expecting these info to appear after my headings.
3. How do I make the texts in the left menu align left to be beneath the word Singapore. Presently, they are aligned right by default.

[ParadoxV5]

This is a duplicate of #48 but with more description and an image.

[JulianChia]

One other question, how do I change the font size of the sub-heading in the left menu to a smaller size? E.g. I what the font size of ##headers to be smaller than #headers.

[ParadoxV5]

One other question, how do I change the font size of the sub-heading in the left menu to a smaller size? E.g. I what the font size of ##headers to be smaller than #headers.

It looks like they have different classes

[JulianChia]

The font size of tag-h2 is already smaller than tag-h1; my mistake. What I actually want for the left menu is to make the font size of tag-h3 to be smaller than tag-h2. Also to have the line spacing of tag-h3 smaller too if needed. How do I do this?

[ParadoxV5]

The font size of tag-h2 is already smaller than tag-h1; my mistake. What I actually want for the left menu is to make the font size of tag-h3 to be smaller than tag-h2. Also to have the line spacing of tag-h3 smaller too if needed. How do I do this?

I implied in

It looks like they have different classes

that you can use custom CSS, such as font-size: 90%

[JulianChia]

The font size of tag-h2 is already smaller than tag-h1; my mistake. What I actually want for the left menu is to make the font size of tag-h3 to be smaller than tag-h2. Also to have the line spacing of tag-h3 smaller too if needed. How do I do this?

I implied in

It looks like they have different classes

that you can use custom CSS, such as font-size: 90%

Much appreciate your guidance. I am not CSS trained but will look into implementing your advice.

[JulianChia]

I managed to align the text of nav to left and set the font-size of tag-h3 to 80%. However, I am unable to reduce the line spacing of tag-h3 and indent it. I made the following amendments to _sass/jekyll-theme-leap-day.scss and the outcome is shown below.

Can you tell me how to reduce the line spacing of tag-h3 and indent it?

nav {
  width: 230px;
  position: fixed;
  top: 220px;
  left:50%;
  margin-left:-580px;
  text-align: left;

  ul {
    list-style: none;
    list-style-image:none;
    font-size: 14px;
    line-height:24px;

    li {
      padding: 5px 0px;
      line-height: 16px;
      // padding-right:17px;
      // position:relative;
      // right:-12px;

      &.tag-h1 {
        font-size: 1.2em;

        a {
          font-weight: bold;
          color: #333;
        }

        + .tag-h2 {

        }
      }

      &.tag-h2 {

        + .tag-h1 {
          margin-top:10px;
        }
      }

       &.tag-h3 {
        font-size: 0.8em;
        
        + .tag-h1 {
          margin-top:10px;
        }
      }

   }

    a {
      color: #666;

      &:hover { color: #1c1c1c; }
    }

    // .active {
    //   border-right:solid 4px #39C;
    //   padding-right:13px;
    // }
  }
}

[JulianChia]

I managed to indent tag-h3, Also, I relocated footer to the right side of the main text area given the nav is not scrollable yet. The below figure shows this new outcome rendered on my local machine.

Issues:

1. Is my amended syntax correct?
2. I am unable to reduce the gaps between lines of tag-h3 still. What should I do?

nav {
  width: 230px;
  position: fixed;
  top: 220px;
  left:50%;
  margin-left:-580px;
  text-align: left;

  ul {
    list-style: none;
    list-style-image:none;
    font-size: 14px;
    line-height:24px;

    li {
      padding: 5px 0px;
      line-height: 16px;
      // padding-right:17px;
      // position:relative;
      // right:-12px;

      &.tag-h1 {
        font-size: 1.2em;

        a {
          font-weight: bold;
          color: #333;
        }

        + .tag-h2 {

        }
      }

      &.tag-h2 {

        + .tag-h1 {
          margin-top:10px;
        }
      }

       &.tag-h3 {
        font-size: 0.8em;
        padding-left:13px;
        line-height: 1.0em;

        // + .tag-h1 {
        //  margin-top:10px;
        // }
      }

   }

    a {
      color: #666;

      &:hover { color: #1c1c1c; }
    }

    .active {
      border-right:solid 4px #39C;
      padding-right:13px;
    }
  }
}

footer {
  width:180px;
  position: fixed;
  right:50%;
  margin-right:-530px;
  top:220px;
  text-align: left;
  line-height: 16px;
}

[chaojian-zhang]

Might not be very relevant to ask here - but is there anyway to show just h1/h2 instead of showing all levels? In a document with lots of levels of header the display is not super clear and it clusters side menu.