Split up li in navbar to different sides using flexbox - html

Question

I'm trying to set up my navbar so I have the github and linkedin imgs/links on the left side, but I want to keep the bio/portfolio/contact links on the right.
I'm using flexbox on the nav, but I'm not sure if I can split up this ul such that the lis are on different sides.
I'm using flexbox on the nav, but I'm not sure if I can split up this ul such that the lis are on different sides since I have justify-content: space-between on.
I have no idea what I should change to make this work.
fiddle: https://jsfiddle.net/Ginsole/4svpeLq9/
nav {
background-color: #265B8B;
height:60px;
color: white;
position: fixed;
top:0;
left:0;
right:0;
width: 100%;
display: flex;
justify-content: space-between;
}
nav p {
font-weight: bold;
margin-left: 1em;
color: white;
text-align: left;
margin-top:1.25em;
font-size: 1em;
}
nav a {
color: white;
font-size: 1em;
font-weight: bold;
}
nav ul {
margin-bottom: 5em;
display: flex;
margin-top: 1.25em;
}
nav li {
list-style: none;
margin-right: 1em;
}
nav li.github {
margin-left: auto;
}
nav img {
width: 25px;
height: 25px;
margin-right: 10px;
}
.menu-toggle {
position: absolute;
padding: 0.8 em;
top: 1em;
right: 1em;
cursor: pointer;
}
<nav>
<p>STEVEN KANG</p>
<ul>
<li class="rightLinks"><a data-scroll-target="contact">Contact</a></li>
<li class="rightLinks"><a data-scroll-target="projects">Portfolio</a></li>
<li class="rightLinks"><a data-scroll-target="bio">Bio</a></li>
<li class="leftLinks"><img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"></li>
<li class="leftLinks"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png"></li>
</ul>
<div class="menu-toggle">
<i class="fa fa-bars"></i>
</div>
</nav>
I expect to have the two img links on the left and keep the rest of the links on the right side.

Answer 1

Here is updated version
https://jsfiddle.net/chille1987/236x0ntq/9/
nav {
background-color: #265B8B;
height:60px;
color: white;
position: fixed;
top:0;
left:0;
right:0;
width: 100%;
display: flex;
}
nav p {
font-weight: bold;
margin-left: 1em;
color: white;
text-align: left;
margin-top:1.25em;
font-size: 1em;
}
nav a {
color: white;
font-size: 1em;
font-weight: bold;
}
nav ul {
flex: 1;
margin-bottom: 5em;
display: flex;
flex-direction: row-reverse;
margin-top: 1.25em;
}
nav li {
list-style: none;
margin-right: 1em;
}
nav li.linkedin {
margin-right: auto;
}
nav img {
width: 25px;
height: 25px;
margin-right: 10px;
}
.menu-toggle {
position: absolute;
padding: 0.8 em;
top: 1em;
right: 1em;
cursor: pointer;
}
<nav>
<p>STEVEN KANG</p>
<ul>
<li class="rightLinks contact"><a data-scroll-target="contact">Contact</a></li>
<li class="rightLinks"><a data-scroll-target="projects">Portfolio</a></li>
<li class="rightLinks"><a data-scroll-target="bio">Bio</a></li>
<li class="leftLinks linkedin"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png"></li>
<li class="leftLinks github"><img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"></li>
</ul>
<div class="menu-toggle">
<i class="fa fa-bars"></i>
</div>
</nav>