Navigation in Material for MkDocs

[Sahith-8055]

Thanks for providing this software and maintaining it with constant improvements.

I have a question for you all. Is there any way to increase the size of the navigation bar to encompass more space (as we see in Docusarus). I might have missed details about the same. If possible, could you point me to the exact location in the documentation (if available)?

Sorry for the mistakes, if any as this is my first question.

[squidfunk]

Yes, you can use additional CSS. I'm not sure what you mean by "more space", but if you want to make it wider, use:

.md-sidebar--primary {
  width: 300px;
}

You might also want to adjust the overall width then:

.md-grid {
  max-width: 1400px;
}

[Sahith-8055]

Thanks for the answer @squidfunk. It partially solves my question. But, my question still remains as to how to increase the length of the navigation bar.

Below is the supposed picture of my question -

Is there anyway of doing this using the extra_css that you had suggested? If so, can you suggest the css for the same?

[squidfunk]

I'm not sure I understand what you mean by "Increase the length".

[Sahith-8055]

Sorry for not being clear enough @squidfunk. Let me try my luck again.

Currently, navigation bar in mkdocs-material looks like the below one -

My question is how can I ensure the navigation bar in mkdocs-material looks like the below one (If there is any possibility of doing so) -

[squidfunk]

Material for MkDocs is trivial to customize. You can use additional CSS and modify it to your taste. I currently don't have the time to provide a full implementation, but it is definitely possible to achieve the same layout. As a starter, you can use the following:

.md-grid {
  max-width: 100%;
}

@media (min-width: 1220px) {
  .md-main__inner {
    margin-top: 0;
  }
  .md-sidebar {
    height: auto;
  }
  .md-sidebar--primary {
    border-right: 1px solid var(--md-default-fg-color--lightest);
  }
  .md-nav {
    font-size: 16px;
  }
  .md-nav .md-nav__title {
    display: none;
  }
  .md-nav__icon {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: -.1rem;
  }
}

Result: