Problems styling the page header the way I want it

[pitosalas]

Here is my MkDocs/material GitHub: https://github.com/pitosalas/wp-convert and here is the resultant web site. It's getting to where I want it to be. Escaping the claws of Wordpress and controlling it all myself. I have a home page which is the latest "index" page of the blog. But for some reason the nav is along the side instead of along the top, and also I want an image in the header - a banner filling up the top 200 pixels or so.

I've tried but so far have not succeeded in setting this up. Can someone give me a tip? Thanks!

[alexvoss]

Since you are already using navigation.tabs, I assume you are looking for drop-down menus? This is something that has been asked for before and squidfunk has written an explainer why this is not supported.

The banner should be fairly easy to do by overriding the header block in the base.html template. I will try to come up with an example since this is something I have had on my mind for my own work as well.

[alexvoss]

Here is the minimal version:

Add a custom_dir to your mkdocs.yml:

site_name: My Docs

theme:
  name: material
  custom_dir: overrides

Then create a main.html in the overrides directory:

{% extends "base.html" %}
{% block header %}
  <div class="banner">
    <b>Banner</b>
  </div>
  {{ super() }}
{% endblock %}

Hope this helps. You should be able to add whatever you like into the div that encloses the banner and you can style it with some extra CSS.

[pitosalas]

Thanks, a very helpful explanation of how this mechanism works! I am sorry though about the limited nav.

[pitosalas]

Actually, I got curious then what "navigation.tabs” does and it seems like it should to do what I want… Not sure why it’s not doing it.

…

On Jan 12, 2024 at 8:47:28 PM, Pito Salas ***@***.***> wrote: Thanks, a very helpful explanation of how this mechanism works! I am sorry though about the limited nav.

[alexvoss]

Is it not? It is the top-level navigation elements that get lifted into the tabs and that is what I see on your site.

[pitosalas]

Sorry for the small messages… And now I figured out that the table only appear if the window is wider than 1220. There seems to be many mentions of 1220 in the source. Which one do I use if I want the Navigation Tabs to appear all the time or at least at a narrower window? This does not seem to do it: .md-grid { <https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/#__codelineno-19-2> max-width: 600px; <https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/#__codelineno-19-3> } Thanks! Pito

…

On Jan 12, 2024 at 8:51:30 PM, Pito Salas ***@***.***> wrote: Actually, I got curious then what "navigation.tabs” does and it seems like it should to do what I want… Not sure why it’s not doing it. On Jan 12, 2024 at 8:47:28 PM, Pito Salas ***@***.***> wrote: > Thanks, a very helpful explanation of how this mechanism works! > > I am sorry though about the limited nav. > > >

[alexvoss]

From the documentation on navigation.tags: "When tabs are enabled, top-level sections are rendered in a menu layer below the header for viewports above 1220px, but remain as-is on mobile". That is what I see on your website. It is just the top levels of the navigation hierarchy that are pulled into the tabs. The rest remains as they are.

I am not sure the break-point for switching navigation can be easily overridden. I had a look in the developer tools but had no joy finding the CSS that is using it.

[kamilkrzyskow]

Looking in the developer tools I saw this hiding the tabs when switching to "tablet" resolution:

@media screen and (max-width: 76.2344em) {
  .md-tabs {
    display: none;
  }
}

so override it with the same and display block or initial in the extra css:
https://squidfunk.github.io/mkdocs-material/customization/#additional-css

@media screen and (max-width: 76.2344em) {
  .md-tabs {
    display: block;
  }
}

[pitosalas]

Fantastic, that works! Thanks for all your help :)

…

On Jan 13, 2024 at 12:33:38 AM, Kamil Krzyśków ***@***.***> wrote: Looking in the developer tools I saw this hiding the tabs when switching to "tablet" resolution: @media screen and (max-width: 76.2344em) { .md-tabs { display: none; } } so override it with the same and display: initial; in the extra css: https://squidfunk.github.io/mkdocs-material/customization/#additional-css @media screen and (max-width: 76.2344em) { .md-tabs { display: initial; } } — Reply to this email directly, view it on GitHub <#6639 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAK5CPBS3URX4BKRSL3X7LYOIMDFAVCNFSM6AAAAABBYDUGO6VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DCMJWGAYDA> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>