HTML - NAVBAR separado

Prezados, preciso de ajuda com navbar

Preciso criar um menu superior igual ao do guj, com o ícone a esquerda, 4 opções ao lado e lá do outro lado direito outras opções como o botão login.

Tentei de todas as formas e não consigo.
Segue o que tenho até agora

<html>
<head>
	<title>Teste</title>
</head>

<link rel="stylesheet" href="C:\Users\user\Documents\Drive Original\Projeto\Site\css\Teste.css">
<nav class="topnav fixed-top">
	
	<div id="myTopnav">
		<a href="#inicio" class="active">Início</a>
		<a href="#novidades">Novidade</a>
		<a href="#faleconosco">Fale conosco</a>
		<a href="#sobrenos">Sobre nós</a>
		<a href="javascript:void(0);" class="icon" onclick="myFunction()">
			<i class="fa fa-bars"></i>
		</a>
	
		<a href="#login">Login</a>
		
	</div>
	
</nav>
.topnav {

background-color: #333;
overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav li {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #4CAF50;
color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}

ola, tem um projeto opensource, o adminlte

da uma olhada talvez observando o codigo fonte dele, voce tira sua duvida.
nessa opcao de leiaute dele leiaute top-nav seria a forma que voce deseja.

sou muito ruim de desing e leiaute, entao prefiro trabalhar com o que ja tem pronto. esse projeto usa bootstrap, voce pode tambem da uma olhada nos exemplos dele.