Horizontally aligning menu items

Authoring Twine
1

Twine Version: 2.8.1.0
Sugarcube Version: 2.36.1

I’m having issues trying to align the items in my menu to be in one row instead of a column, but none of the most common solutions (such as display:inline or float:left) seem to work.

This is the code for the menu:

#menu-flex {
  position:fixed;
  overflow:hidden;
  top: 0;
  right: 0;
  width: 100vw;
  height:60px;
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 75%, 0 75%);
  clip-path: polygon(0 0, 100% 0%, 100% 75%, 0 75%);
  transition:0.8s;
  background-color:var(--accent);
  color:var(--accent);
}

#menu-flex:hover{
  padding-top: 1em;
  height: 100px;
}

.menu-flex {
  display:inline;
  justify-content: space-between;
  margin:0 auto;
  max-width: 750px;
  width: 100%;
  letter-spacing: 0.2em;
  transition:color 0.75s;
}

.menu-item {
  transition: 0.75s;
  color:var(--accent);
  font-family:var(--displayfont);
  font-size:0.75em;
  text-transform:lowercase;
  line-height:150%;
  font-weight:700;
  padding-top:0.2em;
  display:inline;
}

.menu-item b {
  transition: 0.75s;
  color:var(--accent);
  font-family:var(--displayfont);
  font-weight:700;
  font-size:0.8em;
  letter-spacing:0.2em;
  display:inline;
}

#menu-flex:hover .menu-item {
  color: var(--accent);
}

And this is what it looks like, the menu is on the bottom of the page.

2

I have no idea about how Sugarcube works, but in general it depends on the HTML you are trying to style via CSS. If your menu is a list (“ul” or “ol”), you can try this:

HTML:
<ul id="menu-flex">
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ul>

CSS:
ul#menu-flex {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}
ul#menu-flex li {
    margin-right: 10px;
}

If it’s divs inside a div, try adding:

display: flex;

to #menu-flex.

3

We would definitely need to see the HTML as well as the CSS, or else it’s impossible to really guess what’s wrong.

If you can provide that code, and how you are putting it into the game (in a passage, in StoryInterface, via JS), that should help.

1 Like