Center Top Nav with Right Align on Mobile

Is there a way to center the top navigation (for desktop), but when responsive it be right aligned.

I was able to center the top nav, but when responsive it is also center aligned. When responsive the top nav icon to open the menu is now black also.

/*  header : nav topbar
/* ------------------------------------ */
#nav-topbar.nav-container { background: #26272b; text-align: center;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.15);
box-shadow: 0 0 5px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.15); }
#nav-topbar .nav-toggle { background: transparent; color: #000;
-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.06);
box-shadow: inset 1px 0 0 rgba(255,255,255,0.06); }
#nav-topbar .nav-text { color: #000000; color: rgba(255,255,255,0.7); }

@media only screen and (min-width: 1025px) {
	/* fixed nav */
	.full-width.topbar-enabled #header { padding-top: 50px; }
	.full-width #nav-topbar.nav-container { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; }
	.full-width.admin-bar #nav-topbar.nav-container { top: 32px; }
}

@media only screen and (min-width: 720px) {

	/* common */
	#nav-topbar .nav {  }
	#nav-topbar .nav li a { color: #000; color: rgba(255,255,255,0.7); }
	/* level 1 */
	#nav-topbar .nav > li { border-right: none; }
	#nav-topbar .nav > li > a:hover,
	#nav-topbar .nav > li:hover > a { background-color: rgba(0,0,0,0.1); }
	#nav-topbar .nav li > a:hover,
	#nav-topbar .nav li:hover > a,
	#nav-topbar .nav li.current_page_item > a,
	#nav-topbar .nav li.current-menu-item > a,
	#nav-topbar .nav li.current-menu-ancestor > a,
	#nav-topbar .nav li.current-post-parent > a { color: #fff; }
	/* level 2 & 3 */
	#nav-topbar .nav ul { background: #26272b url(img/opacity-10.png) repeat; text-align: left; }
	#nav-topbar .nav ul li { box-shadow: 0 1px 0 rgba(255,255,255,0.06); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
	#nav-topbar .nav ul li:last-child { box-shadow: none; -webkit-box-shadow: none; }

}
@media only screen and (max-width: 719px) {

	/* common */
	#nav-topbar .nav li a { color: #000; color: rgba(255,255,255,0.8); border-top: 1px solid rgba(255,255,255,0.06);text-align: left; }
	/* level 1 */
	#nav-topbar .nav li > a:hover { background: rgba(0,0,0,0.15); color: #fff; }
	#nav-topbar .nav li.current_page_item > a,
	#nav-topbar .nav li.current-menu-item > a,
	#nav-topbar .nav li.current-post-parent > a { background: rgba(0,0,0,0.15); color: #fff; }

}