Moving the search bar based on screen size?

[Mendanbar]

Hi. Is there a way to test for screen size in the partials somehow? I would like to have the search included in the header for mobile devices, but move it to the main content for tablet/desktop (One of the requirements for my project). Thanks!

[squidfunk]

You could add some additional CSS and position the search based on media queries. This is exactly what Material for MkDocs does.

[mason-c-web]

My only thought is that we can't have two search bars and need to remove it from the DOM completely, but I am unsure if that outside MKDocs control. 🤷

[squidfunk]

Theoretically, two search bars should work. The markup must be identical (more precisely contain the data-md-component=search attribute + all of the nested elements) and it must be located outside of .md-container. However, note that I never tested this, so YMMV.

[Mendanbar]

Can you elaborate a bit on why it must be located outside of .md-container? One of the 2 places we'd like the search bar to appear is inside the main content (in between the side navs, and above the main document).

On another note, I was trying to implement your original suggestion of just having one search bar and positioning it based on media queries, but was running into z fighting with the header if it exists outside that element. I think we're hoping to take advantage of some of the special behaviors (taking up the full screen for example) when in mobile without re-inventing all of the associated CSS.

P.S. Thank you for taking the time to respond :)

[squidfunk]

Because this is where it's mounted:

mkdocs-material/src/assets/javascripts/bundle.ts

Lines 176 to 178 in f0e8756

	/* Search */
	...getComponentElements("search")
	.map(el => mountSearch(el, { index$, keyboard$ })),

The control$ observable mounts all components that are outside of the content area. The content$ observable below mounts all components that are inside the container + the header title. This is necessary for instant loading to work, which will leave all components of the control$ observable untouched, while re-mounting those in the content$ observable. Thinking about it, as long as you're not using instant loading, you should also be able to just drop it where you like.

It's probably a good idea to dive into the code base and understand how Material for MkDocs works internally. It's not that complicated, but some understanding of observables and RxJS is certainly helpful. I'm sorry, that I cannot assist you getting this to work. My (spare) time is limited, so I can only give you some hints where to look.

On another note, I was trying to implement your original suggestion of just having one search bar and positioning it based on media queries, but was running into z fighting with the header if it exists outside that element. I think we're hoping to take advantage of some of the special behaviors (taking up the full screen for example) when in mobile without re-inventing all of the associated CSS.

Welcome to the pain of CSS 😅

[Mendanbar]

I totally understand. You've given us some really good hints, so hopefully we'll be able to make it work. 🤞

Thanks!