How to get Search and sidebar functionality of honkit-plugin-theme-default with footer navigation of honkit-plugin-theme?

[pranit1]

I would like to hide the sidebar as well as have search funtionality along with the footer navigation of honkit-plugin-theme. how can i achieve this?

[azu]

Probably, you need to customize theme.
https://honkit.netlify.app/themes/

footer navigation example

<project dir>/_layouts/website/page.html

{% block page %}
{{ super() }}
<hr>
<div class="btn-group btn-group-justified">
    {% if page.previous and page.previous.path %}
    <a class="btn" href="{{ page.previous.path|resolveFile }}"><b>Previous:</b> {{ page.previous.title }}</a>
    {% endif %}
    {% if page.next and page.next.path %}
    <a class="btn" href="{{ page.next.path|resolveFile }}"><b>Next:</b> {{ page.next.title }}</a>
    {% endif %}
</div>
{% endblock %}

[pranit1]

Thanks I guess I could use the same styling as in honkit-plugin-theme in my website.css file. How do I remove the existing navigation arrows on the side? I know how to extend something but I am not clear on how to override or delete something from the existing theme without creating a new theme.

[azu]

<project dir>/_layouts/website/page.html allow you to overide existing theme.

[pranit1]

Thank you once again. I have this code in my page.html

`{% extends template.self %}

{% block page %}
{{ super() }}
{% block book_navigation %}
<div class="bottom-navigations">
  {% if page.previous and page.previous.path %}
  <a href="{{ page.previous.path|resolveFile }}{{ page.previous.anchor }}"
     class="bottom-navigations---prev-link  navigations-prev {% if not (page.next and page.next.path) %}navigations-unique{% endif %}"
     aria-label="Previous page: {{ page.previous.title }}">
      <div>
          <div class="bottom-navigations--prev-sublabel">Previous</div>
          <div class="bottom-navigations--prev-label">
              {{ page.previous.title }}
          </div>
      </div>
  </a>
  {% endif %}

  {% if page.next and page.next.path %}
  <a href="{{ page.next.path|resolveFile }}{{ page.next.anchor }}"
     class="bottom-navigations---next-link  navigations-next {% if not (page.previous and page.previous.path) %}navigations-unique{% endif %}"
     aria-label="Next page: {{ page.next.title }}">
      <div>
          <div class="bottom-navigations--next-sublabel">Next</div>
          <div class="bottom-navigations--next-label">
              {{ page.next.title }}
          </div>
      </div>
  </a>
  {% endif %}
</div>
{% endblock %}
{% endblock %}`

For some reason it is creating a duplicate element at the bottom of the page as I have highlighted in the screenshot (bottom-navigations in the console on right) I was hoping it would simply override the existing book_navigation block with my new block. Why is there a duplicate element being created?

[pranit1]

Okay I solved the issue. This is what I was looking for.

{% extends template.self %}

{% block page %}
{{ super() }}
{% block book_navigation %}{% endblock %}
<div class="bottom-navigation">
  {% if page.previous and page.previous.path %}
  <a href="{{ page.previous.path|resolveFile }}{{ page.previous.anchor }}"
     class="bottom-navigation---prev-link  navigation-prev {% if not (page.next and page.next.path) %}navigation-unique{% endif %}"
     aria-label="Previous page: {{ page.previous.title }}">
      <div>
          <div class="bottom-navigation--prev-sublabel">Previous</div>
          <div class="bottom-navigation--prev-label">
              {{ page.previous.title }}
          </div>
      </div>
  </a>
  {% endif %}

  {% if page.next and page.next.path %}
  <a href="{{ page.next.path|resolveFile }}{{ page.next.anchor }}"
     class="bottom-navigation---next-link  navigation-next {% if not (page.previous and page.previous.path) %}navigation-unique{% endif %}"
     aria-label="Next page: {{ page.next.title }}">
      <div>
          <div class="bottom-navigation--next-sublabel">Next</div>
          <div class="bottom-navigation--next-label">
              {{ page.next.title }}
          </div>
      </div>
  </a>
  {% endif %}
</div>

{% endblock %}

And then I simply copied the css of bottom-navigation from the honkit-plugin-theme to my website.css file. Worked like a charm. Thanks a lot again @azu