How could I get the buttons on the left?

Question

I am trying to create a reference website. I am using new framework called "Skel". Its really cool, but there is no specific documentation. I'm wondering how to get the buttons on the navigational bar to be next to the title, instead of the right. Here is the code I am using:

<header id="header" class="skel-layers-fixed">
    <h1><a href="#">Reference</a></h1>
    <nav id="nav">
        <ul>
            <li><a href="#top">Top</a></li>
            <li><a href="index.html">Home</a></li>
            <li><a href="page2.html">References</a></li>
            <li><a href="page3.html">About</a></li>
        </ul>
    </nav>
</header>

Here is the nav bar contents in the style.css

#header nav {
    height: inherit;
    line-height: inherit;
    position: absolute;
    right: 1.25em;
    top: 0;
    vertical-align: middle;
}

#header nav > ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

#header nav > ul > li {
    border-radius: 4px;
    display: inline-block;
    margin-left: 1em;
    padding-left: 0;
}

#header nav > ul > li a {
    -moz-transition: color 0.2s ease-in-out;
    -webkit-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
    color: #ccc;
    display: inline-block;
    text-decoration: none;
}

#header nav > ul > li a:hover {
    color: #fff;
}

#header nav > ul > li:first-child {
    margin-left: 0;
}

#header nav > ul > li .button {
    height: 2.25em;
    line-height: 2.25em;
    margin-bottom: 0;
    padding: 0 1em;
    position: relative;
    top: -0.075em;
    vertical-align: middle;
}

#header .container {
    position: relative;
}

#header .container h1 {
    left: 0;
}

#header .container nav {
    right: 0;
}

Answer 1

You will need to modify your CSS a little bit. First of all, specify the following styles for the heading inside the header:

#header h1 {
    display: inline-block;
    margin: 0px;
    vertical-align: middle;
}

Specifying the display property of h1 to be display: inline-block allows other elements to appear in the same line as the heading.

Next, you will need to remove existing CSS which you're using for #header nav and use the following styles:

#header nav {
    display: inline-block;
    vertical-align: middle;
}

Here's a working example:

#header nav {
  display: inline-block;
  vertical-align: middle;
}
#header h1 {
  display: inline-block;
  margin: 0px;
  vertical-align: middle;
}
#header nav > ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
#header nav > ul > li {
  border-radius: 4px;
  display: inline-block;
  margin-left: 1em;
  padding-left: 0;
}
#header nav > ul > li a {
  -moz-transition: color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  color: #ccc;
  display: inline-block;
  text-decoration: none;
}
#header nav > ul > li a:hover {
  color: #fff;
}
#header nav > ul > li:first-child {
  margin-left: 0;
}
#header nav > ul > li .button {
  height: 2.25em;
  line-height: 2.25em;
  margin-bottom: 0;
  padding: 0 1em;
  position: relative;
  top: -0.075em;
  vertical-align: middle;
}
#header .container {
  position: relative;
}
#header .container h1 {
  left: 0;
}
#header .container nav {
  right: 0;
}

<header id="header" class="skel-layers-fixed">
  <h1><a href="#">Reference</a></h1>

  <nav id="nav">
    <ul>
      <li><a href="#top">Top</a>

      </li>
      <li><a href="index.html">Home</a>

      </li>
      <li><a href="page2.html">References</a>

      </li>
      <li><a href="page3.html">About</a>

      </li>
    </ul>
  </nav>
</header>