Sidebar elements order (Sugarcube 2.11.0)

Jud_Casper

I'm playing around with a sidebar inventory system using simple (if true then print) macros, but whatever I name the sidebar passage for the inventory system, it places it at the top above all the other links.

I want the inventory to be last in the sidebar list.

I could live with it being at the top, but the problem is that as the list of carried items grows, the little '<' icon I have for collapsing the sidebar doesn't get moved down, so ends up being overlapped by the other links.

TheMadExile

You cannot expect us to be able to help you when you haven't shown us what you're actually doing—code wise.

Jud_Casper

Apologies, but I'm not sure what you need. I have a lot of CSS which styles the sidebar links and also hides some, but it's a lot of code to post.

In my sidebar, from the top, I have:

backwards
forwards

save/load
restart

<

If I create any of the sidebar passages (Menu, Caption, Author, Banner) for the purpose of an Inventory system, and give it the heading Inventory:, I end up with:

inventory:

backwards
forwards

save/load
restart

<

As I say I could live with this, but the '<' function doesn't move down as the inventory list is compiled, so it ends up being overlapped by the other links.

Here's all my CSS:

@import url('https://fonts.googleapis.com/css?family=Special+Elite');
html {font-family: Special Elite; font-size: 110%;}
.passage {font-family: Special Elite; font-size: 130%; margin-top: 5.2em; margin-left: 1em; width: 70%; color: #bbb; text-align: justify;}
h4 {font-style: italic;}

body.intro {-webkit-animation: introfade 20s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: introfade 20s; /* Firefox < 16 */
        -ms-animation: introfade 20s; /* Internet Explorer */
         -o-animation: introfade 20s; /* Opera < 12.1 */
            animation: introfade 20s; width: 500px; margin: 250px 0 0 50px; }
@keyframes introfade {from {opacity: 0;} to {opacity: 1;}}
/* Firefox < 16 */
@-moz-keyframes introfade {from {opacity: 0;} to {opacity: 1;}}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes introfade {from {opacity: 0;} to {opacity: 1;}}
/* Internet Explorer */
@-ms-keyframes introfade {from {opacity: 0;} to {opacity: 1;}}
/* Opera < 12.1 */
@-o-keyframes introfade {from {opacity: 0;} to  {opacity: 1;}}

body.deathout .passage {-webkit-animation: fadeout 10s;
       -moz-animation: fadeout 10s; 
        -ms-animation: fadeout 10s; 
         -o-animation: fadeout 10s; 
            animation: fadeout 10s;
	          opacity: 0;}
@keyframes fadeout {from {opacity: 1;} to {opacity: 0;}}
@-moz-keyframes fadeout {from {opacity: 1;} to {opacity: 0;}}
@-webkit-keyframes fadeout {from {opacity: 1;} to {opacity: 0;}}
@-ms-keyframes fadeout {from {opacity: 1;} to {opacity: 0;}}
@-o-keyframes fadeout {from {opacity: 1;} to  {opacity: 0;}}

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: .5em; /* change this to whatever height you want it */
}

body.dayfade .passage {-webkit-animation: fadeday 10s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeday 10s; /* Firefox < 16 */
        -ms-animation: fadeday 10s; /* Internet Explorer */
         -o-animation: fadeday 10s; /* Opera < 12.1 */
            animation: fadeday 10s;}
@keyframes fadeday {from {opacity: 0;} to {opacity: 1;}}
/* Firefox < 16 */
@-moz-keyframes fadeday {from {opacity: 0;} to {opacity: 1;}}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeday {from {opacity: 0;} to {opacity: 1;}}
/* Internet Explorer */
@-ms-keyframes fadeday {from {opacity: 0;} to {opacity: 1;}}
/* Opera < 12.1 */
@-o-keyframes fadeday {from {opacity: 0;} to  {opacity: 1;}}

body.intro #menu li a, body.intro #ui-bar-toggle::before { display: none; visibility: hidden; }
a:hover {color: #bbb;}
background: #111; border: none;
body.restart #menu-story, body.restart #ui-bar-toggle::before { display: none; visibility: hidden; }
#story-title {display:none;}
#menu-item-restart a::before, #menu-item-saves a::before {content: "";}
#menu-item-restart a, #menu-item-saves a {}
#menu li a {border: 0px; color: #ccc; display: block; padding: 0em 0em 0em 0.75em; text-transform: lowercase; font-size: 90%; text-align: right;}
#menu li a:hover {background-color: transparent; text-decoration: none;}
a.link-external, a.link-internal {text-decoration: none; font-weight: normal;}
.passage a.link-internal {-webkit-animation: fadein 30s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 30s; /* Firefox < 16 */
        -ms-animation: fadein 30s; /* Internet Explorer */
         -o-animation: fadein 30s; /* Opera < 12.1 */
            animation: fadein 30s;}
@keyframes fadein {from {opacity: 0.5;} to {opacity: 1;}}
/* Firefox < 16 */
@-moz-keyframes fadein {from {opacity: 0.5;} to {opacity: 1;}}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {from {opacity: 0.5;} to {opacity: 1;}}
/* Internet Explorer */
@-ms-keyframes fadein {from {opacity: 0.5;} to {opacity: 1;}}
/* Opera < 12.1 */
@-o-keyframes fadein {from {opacity: 0.5;} to  {opacity: 1;}}

a {color: #bbb; cursor: pointer;}
#menu-item-restart:hover, #menu-item-saves:hover {text-decoration: none; color: #999;}
#menu li:not(:first-child) {border-top: 0px;}
#menu ul {border: 0px;}
#ui-bar.stowed #ui-bar-toggle::before {font-weight: normal;}
#ui-bar-toggle::before {font-weight: normal;}
#ui-bar.stowed ~ #story {text-decoration: none; margin-left: 20em;}
@media screen and (max-width: 1136px) {#ui-bar.stowed ~ #story {margin-left: 19em;}}
#ui-bar-toggle {border: 0px; color: #999; font-size: 90%; margin: 20.5em 2.2em 0 0;}
#ui-bar-toggle a {font-weight: bold;}
#ui-bar-toggle:hover {background-color: #111;}
#ui-bar-body {height: calc(100% - 2.5em); margin: 5.1em 0;  padding: 0 2.4em 0 1em;}
#ui-bar {text-align: right; color: #ccc; height: 100%; left: 0; margin: 0; padding: 0; position: fixed; top: 2em; transition: left 0.1s ease-in 0s; width: 20em; z-index: 50; background: #111; border: none;}

I also have a StoryMenu with the following:

<<link "backward">><<script>>Engine.backward()<</script>><</link>>
<<link "forward">><<script>>Engine.forward()<</script>><</link>>
<<if Story.lookup('tags', 'bookmark').length gt 0>>
\<<link "Jumpto">><<script>>UI.jumpto()<</script>><</link>>
\<</if>>

Although I can't remember why I have this. I thought I could just add the Inventory stuff on the end of this, but it doesn't display.