CSS to move tab menu in header up and to the right of the site logo?

[toomanybrians]

Hello. Thank you for mkdoc-material and the work everyone is doing on this. What a wonderful project!

I would like to "streamline" my header by removing the page title and then relocating the tabs menu content up into that spot. (You could think of this like I want to collapse my 2-line header into a 1-line header.) So my single-line header would be:

Site logo - tabs menu items - light/dark icon - search box

I'm able to remove the doc/page title easy enough via a custom header partial. That's pretty straightforward (thanks to the docs and other posts here).

But I don't know CSS, so I end up doing a lot of guessing and hunting via the browser CSS explorer and stuff. Even if I figure it out, I'm unsure whether what I'm doing is the correct or proper way. So I wonder if anyone has done this and/or knows CSS well enough to point me in the right direction for which CSS things I need to adjust to do this properly? (And if not, no prob, I'll figure out on my own and post the solution back here!)

Thanks!

[squidfunk]

I have seen some customizations over the years and think I also saw what you're asking, but phew, don't ask me where. Maybe other users can share their customizations that go into this direction 😊

[toomanybrians]

Ok, I think I figured out a workable solution to this. What I did was almost embarrassingly simple but seems to work. Again if anyone has feedback or a more "real" solution, let me know.

Anyway I just went into the partials/header.html file, cut the 5 lines of jinja templates for the navigation tabs and then pasted them in place of the ~20 lines or so for the site title and it works perfectly! Formatting, styling.. everything is perfect. I figured that would position them correctly but I would have to mess around with CSS, but from what I can tell this works perfectly.

The only thing that's not perfect is the relocated nav menu stays bright when the search box is clicked. (There's some dimming of the background that includes elements of the existing menu, which doesn't apply to the nav items now.) But this is minor and no one will notice, so I'm fine with it.

Thanks everyone!

[squidfunk]

Awesome! Thanks for sharing your solution. I'm glad that my work, even when reassembled, seems to work almost perfectly 😅

[14mC4]

Think you could help specify some for me. I am interested in doing the same thing but, wanna make sure I understood specifically. By no mean am I a developer ;D --- extend theme > partials > header.html > BASED on the partials from Insiders > Go grab the 5 lines on Jinja?

Went based on the above code links and whatnot which lead me to have double nav bars ;D

[squidfunk]

I haven't checked the code, but you probably have to remove the navigation bar from the other partial to omit doubling 😉