The only way to achieve this navbar on mobile view is through float. I could not do with flexbox.

This is the image on top of navbar

nav {
  background: url(../img/scallop.png) repeat-x;
}
nav ul.full-width {
  list-style-type: none;
  background-color: #e6bf98; 
  padding: .75em;
  margin: 12px 0 0 0;
  border-bottom: 3px solid #cc8850;
  overflow: auto;

}
/* splits nav into 2 columns
http://stackoverflow.com/questions/13104818/
simple-2-column-navigation-with-css-and-a-single-list */
nav li:nth-child(even) {
  width: 50%;
  float: right;
  padding: 0.5em;
}
nav li:nth-child(odd) {
  width: 50%;
  float: left;
    padding: 0.5em;
}
nav a {
  color: #c80060;
  text-decoration: none;
  display: block;
  padding-left:3.333333%;
}
nav a:hover {
  color:#00c4c7;
}