Question about pinning section to mobile nav view

[dannyduncan]

I really appreciate everything that's been done on this project.

I've been working on a particular customization for a few days and would appreciate if anyone has any advice! I'm hopeful there is an already available class or style option that I can include. Here's a description of what I've done so far and where I'm looking for advice:

I'm working to add extra navigation in the mobile view, such as the 'Home' section in the screenshot below:

I did this by using the md-nav__source class and used an override nav.html file. See code below:

...
  <nav class="{{ class }}" aria-label="{{ lang.t('nav.title') }}" data-md-level="0">
    <label class="md-nav__title" for="__drawer">
...
    </label>
    <div class="md-nav__source">
      <a href="{{ site_url }}" title="Home" class="md-source">
          <div class="md-source__icon md-icon">
              {% include ".icons/material/home" ~ ".svg" %}
          </div>
          <div class="md-source__repository">
              Home
          </div>
        </a>
    </div>
  </nav>

However, this extra section disappears when you click through within the mobile nav view. I'd like to keep this present while using the nav. As you see below, the section is no longer there:

Like I said earlier, I'm hoping there's a class that's available or a style that I can apply to leave that section there even when navigating to sub sections.

Much appreciate any help!

[squidfunk]

The .md-nav__source classes are generally only intended for the source (repository information), so it's semantically not the correct class. .md-nav__item in combination with .md-nav__link would be more correct, as used in the navigation itself. Putting your changes in the nav containers might not be the best idea, as they will stretch to the entire height of the top-most nav container. Maybe try putting your stuff in .md-sidebar__scrollwrap?

[dannyduncan]

@squidfunk thanks for the reply!

1. Regarding the nav containers - I switched to .md-nav__item and .md-nav__link but still getting links that disappear when I click through to other sections.

2. Regarding .md-sidebar__scrollwrap - I'm not sure how to implement. Also, will that show up on the mobile view?

Thanks again!

[squidfunk]

1. That's true, as the said classes don't provide any positioning, only styling. They're just semantically better than those you used before.
2. It will show up in the sidebar (regardless of where you put it), so you must hide it for viewports above 1220px. You could extend base.html and override the nav block (see the customization guide) to put it inside .md-sidebar__scrollwrap (to be found in base.html), but as I said, that's only an educated guess of how to make it work. I would also have to fiddle and implement it to test it, but I'm sure it's possible.

Possibly related: #2130