adding a text header to the lefthand sidebar menu

[LisaLiel]

Is there any way for me to add text above the menu in the sidebar in HTML? I don't want to add it in the top header, because it will make the top header too tall and reduce the reading area. But I have several documents with a standard top header, and I'd like to put the name of the product above the menu.

[Psider]

Is it SideNav? I don't think there's any way in the skin editor, but you could potentially use CSS to insert text before the actual TOC code.

I tried this in a test project, so perhaps try in a copy of your project to see if it will work.

I used the browser developer tools to find the relevant output code for the sidebar. Then I added the following to the end of the stylesheet:

.sidenav-container > ul:first-child:before {
content: "My Amazing App";
color: pink;
font-size: xx-large;
}

This code targets the UL that is the first tag inside the sidenav containing and inserts the text "My Amazing App" in front of it. It also colours it pink and makes the font xx large.

It looks like this after generation:

content before.png

You'd just put it in your main style sheet if you were generating from separate projects.

If you're generating multiple output from one project, you'll probably need to create a separate stylesheet for each HTML output (to use in the relevant target) that imports the main stylesheet, and includes the above css with the appropriate product name.

Like so:

@import (url: 'mymainstyles.css');
.sidenav-container > ul:first-child:before {
content: "My Amazing App";
color: pink;
font-size: xx-large;
}

[LisaLiel]

Thanks. I'll give that a try.