Change width of sidetoc

Question

Basically I am trying to change the width of the navigation on the left side (sidetoc). Some of my namespaces and Types are wider in width than the sidetoc allows and therefor breaks in a newline, which I really want to avoid.

Is there any way to change this without using js?

Answer 1

Follow the instructions for creating a custom template. In your custom template, modify the docfx.css file to change the width set in the .sidetoc style.

.sidetoc {
  position: fixed;
  width: 300px;
  top: 150px;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #f1f1f1;
  border-left: 1px solid #e7e7e7;
  border-right: 1px solid #e7e7e7;
  z-index: 1;
}

Answer 2

Solution for following templates:

• darkFX

Customize the file ./templates/darkfx/styles/main.css

  media (min-width: 1600px) {
  .container {
    width: 100%;
  }
  .sidefilter {
    /* width: 18%; */
    width: 28%;
  }
  .sidetoc {
    /* width: 18%; */
    width: 28%;
  }
  .article.grid-right {
    /* margin-left: 19%; */
    margin-left: 29%;
  }

• mathew

Customize the file ./templates/docfx-tmpl/styles/main.css

.sidetoc {
  width: 480px;
}
.sidefilter {
  width: 480px;
}
.article.grid-right {
  margin-left: 500px;
}