Favicon Redirets to root folder on offline site

[guitarguy1685]

1st off, this mkdocs-materials is amazing, thanks so much for all of this.
So far everything is working perfectly, but I noticed that when I click on the logo, instead of taking me to the home page it takes me to the root folder. This only happens when viewing the offline HTML.

I plan to save this on my company server, so this is how it will function there as well. I want the icon to take me to the home page. When viewing this on Netlify it works just fine, not sure why the offline version takes me to the root.

[niclasheinz]

Hi @guitarguy1685

In order to help you better, we need more information about your setup. Could you provide us with a minimal reproduction?

PS: Material for MkDocs only lives because @squidfunk has wonderful sponsors. If you use Material for MkDocs in a company, please consider sponsoring @squidfunk. That way he can continue to maintain the project and develop great stuff. He is currently working on fundamental work.

[guitarguy1685]

I absolutely will!

[guitarguy1685]

site_name: Handbook
site_description: Handbook
site_url: ""
site_dir: docs-offline
use_directory_urls: false

theme:
  name: material
  custom_dir: material/overrides  
  logo: assets/darkbg.png
  favicon: assets/light.png
  font:
    text: Source Sans Pro
  palette:
    # Palette toggle for dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      primary: black
      accent: deep orange
      toggle:
        icon: material/brightness-4
        name: Switch to light mode

    # Palette toggle for light mode
    - media: "(prefers-color-scheme: light)"
      scheme: default 
      primary: black
      accent: deep orange
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode
  features:
    - content.tabs.link
    - content.tooltips
    - content.action.view
    - content.code.annotate
    - content.code.copy
    - navigation.tracking
    - navigation.footer
    - navigation.tabs
    - navigation.tabs.sticky
    - navigation.sections
    - navigation.expand
    - navigation.path
    - navigation.prune
    - navigation.indexes
    - navigation.tracking
    - navigation.top
    - search.highlight
    - search.share
    - search.suggest
    - toc.follow
    - toc.integrate

plugins:
  - blog:
      blog_dir: blog/directive
  - glightbox:
       loop: true
       manual: true
       touchNavigation: true
       zoomable: true
  - offline
  - search
      
markdown_extensions:
  - abbr
  - admonition
  - attr_list
  - def_list
  - pymdownx.blocks.caption
  - pymdownx.details
  - pymdownx.emoji:
      emoji_index: !!python/name:material.extensions.emoji.twemoji
      emoji_generator: !!python/name:material.extensions.emoji.to_svg
  - pymdownx.snippets:
        auto_append:
        - includes/abbreviations.md
  - pymdownx.superfences
  - pymdownx.tabbed:
      alternate_style: true
  - pymdownx.critic
  - pymdownx.caret
  - pymdownx.keys
  - pymdownx.mark
  - pymdownx.tasklist:
      custom_checkbox: true
  - pymdownx.tilde
  - tables
  - md_in_html
  - toc:
      permalink: true
      title: On this page

extra_css:
  - stylesheets/extra.css

extra_javascript:
  - https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js
  - javascripts/tablesort.js

[alexvoss]

@guitarguy1685, when you write "the offline version", do you mean you have built it for offline use?
See the description of the offline plugin for some useful info. If navigation does not work locally while it works on a web server then chances are that you are using the MkDocs default setting of directory urls. Hope this helps.

[guitarguy1685]

thanks for your reply. Yes, I mean built for offline use, running it off my desktop.
so i tried a few things. i tried setting use_directory_urls: to false, then true but still the logo takes me to the root.
I also tried the plugin option

  - offline:
      enabled: !ENV [OFFLINE, true]

and still the logo takes me to the root.

[alexvoss]

You could help us investigate the problem by creating a minimal reproduction. That would allow us to observe the problem on our own machines.

[guitarguy1685]

sorry, I posted it in a reply. I'll edit my original so it's not hidden.

[guitarguy1685]

In the html mkdocs renders it this way

<header class="md-header md-header--shadow md-header--lifted" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href="." title="handbook" class="md-header__button md-logo" aria-label="Handbook" data-md-component="logo">
      
  <img src="assets/darkbg.png" alt="logo">

if I manually replace the "." with "index" on <a href> then it works fine. of course I'd have to do this on every page

[guitarguy1685]

so probably not the correct way to do this, but I was able to fix it with a java script in my override main.html file using this

{% block scripts %}
{{ super() }}
<script>
  document.addEventListener("DOMContentLoaded", function() {
      let logoLink = document.querySelector(".md-logo");
      if (logoLink) {
          logoLink.href = "{{ base_url }}/index.html";  
      }
  });
</script>
{% endblock %}

[squidfunk]

I'm locking this discussion because two team members asked for a minimal reproduction, including a link to our documentation how to create one, that was never provided. Instead, noise was added and multiple seemingly unrelated answers were given, adding to the confusion. This binds a lot of our precious time. I'm sorry to say, but I'm sick of this. This is your first warning.