Basic CSS help - how to ensure the menu is on its own line in Paper?

Hosting on Micro.blog
1

Hi,

Apologies for what I assume will be a basic question to people more CSS-technical than myself (which will be almost everyone!).

I’ve been trying out the wonderful “Paper” theme from the plugins section. I really like it.

However I wanted the top part to look a little different - rather than the pages menu being at the right of the site name / icon, I wanted it to appear as a second row. With both left aligned to the post content rather than the default overhang effect.

That does basically already automatically happen when I make my browser window too narrow to fit it all in - but I’m trying to find a way such that it is always appears like that, even with a wide browser.

Thinking that using custom CSS was likely the easiest option I found various ideas online as to code that forces a new line with perhaps my closest attempt being something like:

h1.logo:after {
     content: "\A";
     white-space: pre;
}

which is similar to the “replace some text” examples in the micro.blog help docs

or various attempts to use a table layout.

…but nothing I tried quite worked, probably because I need to actually understand more about how layouts work rather than just attempt workarounds!

Wondering if anyone knows an easy way I can get the effect I want? I’m sorry for what I imagine is a basic question…am open to being told I need to go learn CSS properly rather than google and hope :slight_smile:

The blog I am trying it on is the one here if that makes a difference.

(A second thing I’d like to do is align the ingenious moon icon that enables dark-mode to the right of the window rather than have it appear directly after the site title, but I thought I’d focus on one issue at a time ! )

2

Hi Adam! I’m tagging @amit here, who is the author of the Paper theme. I also want to follow this topic, because I recently switched to Paper myself. I’m no CSS wizard, but I wouldn’t mind making a tweak or two.

3

@adammedcalf You can add the below to your custom CSS. It should bring the header look closer to one on narrow screens. Hope this helps.

.header {
    position: relative;
    --header: 16rem;
}

.menu {
    position: absolute;
    inset: auto 0 0;
}

Aligning the dark mode toggle to the right would be difficult just with CSS. I had thought of providing the positioning as a setting, but it might take some time.

4

Nice! Let me know what tweaks you are interested in. I could add them to the issues list :slight_smile:

5

Thanks so much! That works great. And also many thanks for creating the excellent theme in the first place :slight_smile:

Also it’s useful to to know that changing where the dark mode toggle is would be challenging in CSS…I think I’ll leave looking into that until I become an expert then :joy:.