A segunda linha na barra de navegação <nav>

[Frank K Hosaka]

O meu conhecimento em HTML é precário, mas encontrei no projeto Laravel Chirps um arquivo chamado navigation.blade.php, nele eu encontrei o marcador <nav>.

Para mim <nav> ou <div> é a mesma coisa, pois eu não sei nada de HTML. No entanto, ele aparece no topo da página do navegador. Eu clico "Dashboard", e ele apresenta o conteúdo do Dashboard. Eu clico "Chirps", e ele apresenta o conteúdo do Chirps. Só que a barra permanece no topo da página. Eu gostei desse recurso, mas fiquei imaginando se era possível acrescentar mais uma linha na barra de navegação. Esse é o meu primeiro teste. Se você perceber que estou fazendo coisa errada, por favor me alerte.

<nav>
    <div>linha de cima</div>
    <div id=em_baixo>linha de baixo</div>
    <hr>
</nav>
<script>
    function teste(){em_baixo.innerHTML='<input>'}
</script>
<input type=submit onclick=teste()>

 

[Frank K Hosaka]

Ainda falando da barra de navegação, encontrei um problema no Tailwind na hora de fixar a barra no topo da tela: ele esconde a parte inicial dos elementos que vem a seguir. A solução que eu encontrei foi criar um <div style="height:100px"></div>, ou seja, empurrei os elementos seguintes para não ocultar a parte inicial.

O Bootstrap fuciona bem. 

Já o CSS tradicional que eu encontrei no w3school faz a parte inicial dos elementos que vem depois da barra sobrepor à barra de navegação.

CSS não é nada fácil!

bootstrap.php

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<nav class="navbar navbar-light sticky-top bg-light flex-md-nowrap p-0"> 
<h1 class=display-1>Olá mundo</h1>
</nav>
<div>
<h1 class=display-1>1</h1>
<h1 class=display-1>2</h1>
<h1 class=display-1>3</h1>
<h1 class=display-1>4</h1>
<h1 class=display-1>5</h1>
<h1 class=display-1>6</h1>
  
---------------------------------------
  
css.php
  
<style>
.navbar {overflow: hidden;position: fixed;top: 0;width: 100%;}
.main {margin-top: 100px;}
</style>

<div class="navbar">
<h1>Olá mundo</h1>
</div>

<div class="main">
<div>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
</div>
</div>
  
tailwind.php
  
<script src="https://cdn.tailwindcss.com"></script>
<nav class="bg-white dark:bg-gray-900 fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600"> 
<h1 class="text-9xl">Olá mundo</h1>
</nav>
<div class="text-9xl">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>

 

Editado Junho 22, 2023 por Frank K Hosaka