Responsive nav tweak

Question

I'm working on making a responsive menu that by default is displayed inline with the site title. However on mobile the menu needs to display as a list below the site title and it's toggled by hitting a + or -. I've achieved all of this except for two small issues.

1. I can't seem to get the menu to display relative to the document flow so that it overlaps the text on the pages
2. I need the menu to be the full width of the page.

I'm not sure if I just need to take this menu and put it in its own div outside of the nav or if I'm just forgetting some css rule. It's currently set up as:

<nav>
 <div id="nav-div">
  <div id="title"></div>
  <div id="menu-toggle"></div>
  <div id="nav-links">
   <ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
   </ul>
  </div>
 </div>
</nav>

CSS:

#nav-links {
  position:absolute;
  width:100%;
  ul {

  }
  li {
    display:block;
    float: none;
    border-bottom: 1px solid black;
    &:last-child {
      border-bottom: none;
    }
    a {

    }
  }
}

Answer 1

You need to set top and left properties on #nav-links . And if you set right too, you wont need width: 100% . Also make it position:relative . Like this:

#nav-div {
  position: relative;
  height: 50px;
}
#nav-links {
  position:absolute;
  left: 0;
  right: 0;
  ...
}

Change 50px to whatever your navbar height is.

Answer 2

The way I ended up doing this was:

ul {
  position: absolute;
  width: 100%;
  right: 0px;
  left: 0px;
  li {
    width: 100%;
    a {
      width: @small-width; //defined with my variables
      margin: 0px auto;
      display: block;
    }
  }
}