HTML - NAVBAR separado

1 resposta
htmlcss
P

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;

}

1 Resposta

T

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.

Criado 7 de agosto de 2020
Ultima resposta 9 de ago. de 2020
Respostas 1
Participantes 2