A "menu" in Harlowe

InspectorCaracal

I'm relatively new to Twine, but I've been poking around with Twine 2 for a couple weeks now. My question is:

I want to have a sort of sidebar menu with a couple of items in it that's accessible at any point in the game. The latter part I figured out can be done easily (though somewhat inelegantly but oh well) by just dropping a (display: "menu") at the bottom of each passage.

Unfortunately, though, I can't figure out how to move it. That is, I want to reposition the displayed passage so it's in one of the upper corners. I tried using CSS with span and div etc. but I must be missing something or doing something wrong, because it isn't doing anything.

greyelf

The first issue is being able to reference the menu using a CSS selector. Because Harlowe does not give elements unique ID's you are going to have give your menu one yourself. This can be done by wrapping the contents of your menu passage in a div with an ID.


<div id="menu">
This is the menu passage
</div>


Now that your menu has an ID you can position it using CSS, the following example adds a border so you can see the edges of the menu and places the it in the top right corner.

note: By default the tw-story element (of which your menu element is a descendant) has a width of 60% and is centered within the browser viewport, this is why I am giving the menu a width of 20%.  eg. 20 + 60 + 20 = 100%


#menu {
width: 20%;
border: 1px solid black;
position: fixed;
top: 0;
right: 0;
}


InspectorCaracal

Ahaaa. Thank you! It turns out what I did wrong was use the wrong "position" value; I had it set to absolute. Doh.

greyelf

The MDN documentation for position explains the difference between absolute and fixed, basically the first one's position is "relative to its closest positioned ancestor or to the containing block" and the second one's position is "relative to the screen's viewport".