Como hacer una barra de navegacion

En Este capitulo vamos a implementar una barra de navegacion basica. En los proximos capitulos vamos a seguir refinando la nav bar, sin embargo aqui te presento la base de su funcionamiento partiendo de un <ul>.

Empezamos creando un div y le asignas una clase con el nombre de tu preferencia, en mi caso le puse .navbar. Dentro del div creas una ul en la que los li seran cada uno de los botones de la barra de navegacion. Por ultimo dentro de cada li creas un enlace con la etiqueda <a>. Tu vas a decidir a donde te llevara cada enlace, uno puede ir al pie de pagina, otro a una seccion y otro nos puede llevar a otra pagina diferente.

En CSS le asignamos un width:100%; para .navbar y el estilo que desees, el ancho tambien puede ser el que desees aunque en este ejemplo usare 100%.

Para el estilo de .navbar > ul es importante que especifiques overflow:auto para evitar que, al acomodar los li de forma horizontal, estos no se muestren correctamente dentro del viewport. Tambien debemos definir list-style-type:none dentro del estilo de ul para que los li no tengan las marcas de la lista o puedes usar display:inline en el estilo de li y tiene el mismo efecto.

Ahora para .navbar>ul>li especificas float:left para que se acomoden de izquierda a derecha. Por ultimo para los enlaces defines display:block para que podamos personalizar su estilo como si se tratara de un div y le podamos agregar padding, por ejemplo. Tambien asegurate de agregar text-decoration:none en el estilo de los enlaces para que no presente el estilo predeterminado para enlaces.

Te recomiendo copiar el codigo de css tal cual.