您好,我正在使用引导程序创建一个网站,我希望导航栏保持固定并且在我滚动时不会上升。这个栏的顶部还有一个我不知道如何删除的小间隙。我没有放引导代码,因为它非常广泛。我留下了我的代码示例,看看如何解决漏洞和固定导航栏。谢谢。
我编辑问题
这是我之前看到的,这是我申请后 #content{
position: relative;
top: 78px;
}
看到的
我不知道你是否可以帮助我,我修改了几次代码,但我错过了字符。
body {
background: #2f3133 url(../images/patternbg.jpg) 0 0 repeat;
}
/*----------- Back to top --------------*/
#toTop {
display: none;
width: 27px;
height: 19px;
overflow: hidden;
background: url(../images/totop.png) 0 bottom no-repeat;
position: fixed;
margin-right: -690px !important;
right: 50%;
bottom: 60px;
z-index: 999;
}
#toTop:hover {
background-position: 0 0;
}
#toTop:active, #toTop:focus {
outline: none;
}
/*-----------row_s--------------*/
.row_1 {
text-align: center;
padding: 30px 0;
background: #2f3133 url(../images/patternbg.jpg) 0 0 repeat;
}
.row_2 {
text-align: center;
padding: 22px 0 0;
background: #2f3133 url(../images/patternbg.jpg) 0 0 repeat;
}
.row_3 {
padding: 43px 0 13px;
background: url(../images/pattern2.jpg) 0 0 repeat;
}
.row_4 {
padding: 30px 0 81px;
background: #ffffff;
}
.row_5 {
padding: 30px 0 98px;
background: #ffffff;
}
.row_6 {
padding: 30px 0 72px;
background: #ffffff;
}
.row_7 {
padding: 30px 0 80px;
background: #ffffff;
}
.row_8 {
padding: 63px 0 112px;
background: #ffffff;
}
.row_9 {
padding: 31px 0 90px;
background: #ffffff;
}
.row_10 {
padding: 101px 0 85px;
background: #ffffff;
}
.row_11 {
padding: 40px 0 40px;
background: #ffffff;
}
/*------------links headings-----------*/
p {
font-family: 'Arial', sans-serif;
font-size: 15px;
line-height: 22px;
color: #adadad;
margin: 0;
padding: 0;
margin-bottom: 11px;
}
h2 {
font-family: 'Georgia', serif;
font-size: 26px;
line-height: 28px;
color: #474848;
margin: 0;
padding: 35px 0;
}
h3 {
text-transform: uppercase;
font-family: 'Georgia', serif;
font-size: 12px;
line-height: 20px;
color: #4e4134;
margin: 0 0 10px;
padding: 0;
}
.btn1 {
position: relative;
background: #545658;
color: #ffffff;
font-family: 'Georgia', serif;
font-size: 15px;
line-height: 22px;
font-weight: normal;
border-radius: 50px;
border: none;
padding: 20px 0 24px;
margin: 0;
width: 65px;
height: 65px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.btn1:hover {
text-decoration: none;
background: #ffffff;
color: #545658;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.btn-link1 {
position: relative;
color: #585858;
font-family: 'Georgia', serif;
font-size: 15px;
line-height: 22px;
font-weight: normal;
}
.btn-link1 span {
margin: 0 0 0 7px;
top: 1px;
position: relative;
height: 11px;
width: 11px;
background: url(../images/arrowsmall1.png) center top no-repeat;
display: inline-block;
}
.btn-link1:hover {
color: #585858;
text-decoration: none;
}
.btn-link1:hover span {
background: url(../images/arrowsmall1.png) center bottom no-repeat;
}
.btn-link2 {
position: relative;
color: #eb5368;
font-family: 'Georgia', serif;
font-size: 15px;
line-height: 22px;
font-weight: normal;
}
.btn-link2 span {
margin: 0 0 0 7px;
top: 1px;
position: relative;
height: 11px;
width: 11px;
background: url(../images/arrowsmall1.png) center bottom no-repeat;
display: inline-block;
}
.btn-link2:hover {
color: #adadad;
text-decoration: none;
}
.btn-link2:hover span {
background: url(../images/arrowsmall1.png) center top no-repeat;
}
.btn-link2:focus {
color: #adadad;
text-decoration: none;
}
.btn-link3 {
position: relative;
color: #eb5368;
font-family: 'Georgia', serif;
font-size: 18px;
line-height: 22px;
font-weight: normal;
}
.btn-link3 span {
top: 1px;
margin: 0 11px 0 0;
position: relative;
height: 19px;
width: 22px;
background: url(../images/iconmail.png) center bottom no-repeat;
display: inline-block;
}
.btn-link3:hover {
color: #37383a;
text-decoration: none;
}
/*------ header ------- */
header {
background: #2f3133 url(../images/patternbg.jpg) 0 0 repeat;
text-align: center;
}
/*-------- Logo -------- */
.navbar-brand_ {
float: none;
display: block;
position: relative;
margin: 0;
text-align: center;
padding: 0;
margin: 68px auto 60px;
}
.navbar-brand_ img {
max-width: 100%;
}
.navbar-brand_a:hover {
text-decoration: none;
}
/*-----------------navbar---------------------*/
.menuheader {
background: #545658;
}
.tm_navbar {
position: relative;
padding: 26px 0 22px;
margin: 0;
background: none;
border: none;
}
.tm_navbar .nav {
float: none;
position: relative;
display: inline-block;
}
.tm_navbar ul {
position: relative;
padding: 0;
margin: 0;
background: none;
list-style: none;
}
.tm_navbar .nav li:first-child {
position: relative;
zoom: 1;
background: none;
}
.tm_navbar .nav li {
float: left;
padding: 0 26px 0 27px;
position: relative;
zoom: 1;
background: url(../images/bullet1.png) no-repeat left center;
}
.tm_navbar .nav li a {
text-decoration: none;
text-transform: lowercase;
color: #ffffff;
font-family: 'Georgia', serif;
font-size: 22px;
line-height: 24px;
font-weight: normal;
background: transparent;
padding: 0;
border: none;
border-radius: 0;
text-shadow: 1px 1px 2px #333639;
}
.tm_navbar .nav > li > a .sf-sub-indicator {
background: url(../images/indicator.png) no-repeat 0 bottom;
width: 7px;
height: 4px;
display: inline-block;
top: 30px;
right: 23px;
position: absolute;
z-index: 5;
}
.tm_navbar .nav li a:hover, .tm_navbar .nav > li.active > a, .tm_navbar .nav > li.active > a:hover {
color: #ffcbd2;
text-decoration: none;
}
.tm_navbar .nav > .active > a, .tm_navbar .nav > .active > a:hover, .tm_navbar .nav > .active > a:focus {
color: #ffcbd2;
background: transparent;
}
.tm_navbar .nav > li.sfHover.active > a .sf-sub-indicator, .tm_navbar .nav > li.active > a .sf-sub-indicator {
background-position: 0 0;
}
.tm_navbar .nav > li.sfHover > a, .tm_navbar .nav > li.sfHover > a:hover, .tm_navbar .nav > li > a:hover, .tm_navbar .nav > li.active > a, .tm_navbar .nav > li.active > a:hover {
color: #ffcbd2;
background: transparent;
}
/*---------submenu1-------------*/
.tm_navbar .nav ul {
position: absolute;
display: none;
top: 51px;
left: 0px;
width: 110px;
padding: 20px 24px 10px;
list-style: none;
zoom: 1;
z-index: 11;
background: #eb5368;
margin: 0;
text-align: center;
}
.tm_navbar .nav ul li:first-child {
width: 64px;
padding: 0 0 6px;
display: block;
position: relative;
zoom: 1;
z-index: 10;
background: transparent;
}
.tm_navbar .nav ul li:first-child img {
position: absolute;
top: -20px;
}
.tm_navbar .nav ul li {
text-align: left;
width: 64px;
padding: 6px 0;
display: block;
position: relative;
zoom: 1;
z-index: 10;
background: url(../images/dotted1.png) top center repeat-x;
}
.tm_navbar .nav ul li a {
text-align: left;
position: relative;
color: #ffffff;
padding: 0;
font-family: 'Arial', sans-serif;
font-size: 14px;
line-height: 20px;
font-weight: normal;
margin: 0 0 0 10px;
text-shadow: none;
}
.tm_navbar .nav ul li a:hover {
color: #474848;
}
.tm_navbar .nav > li > ul li > a:hover, .tm_navbar .nav > li > ul li.sfHover > a {
text-decoration: none;
color: #474848;
}
.tm_navbar .nav > li > ul li > a:hover, .tm_navbar .nav > li > ul ul li.sfHover > a {
text-decoration: none;
color: #474848;
}
/*-----------submenu2-----------*/
.tm_navbar .nav ul ul {
list-style: none;
width: 87px;
padding: 10px;
background: #4e4134;
left: 86px;
top: 0px;
background: url(../images/patternsubmenu2.jpg);
}
.tm_navbar .nav ul ul li:first-child {
text-align: left;
padding: 6px 0;
position: relative;
zoom: 1;
z-index: 11;
background: transparent;
}
.tm_navbar .nav ul ul li {
text-align: left;
padding: 6px 0;
position: relative;
zoom: 1;
z-index: 11;
background: url(../images/dotted2.png) top center repeat-x;
}
.tm_navbar .nav ul ul li a {
color: #eb5368;
text-shadow: none;
}
.tm_navbar .nav ul ul li a:hover {
color: #474848;
}
/*-----indicator2-------*/
.tm_navbar .nav ul .sf-sub-indicator {
background: url(../images/indicator.png) no-repeat 0 0;
width: 7px;
height: 5px;
position: absolute;
display: block;
top: 8px;
left: auto;
right: -14px;
z-index: 5;
}
/*-------------------select------------------*/
.select-menu {
display: none !important;
}
/*--- header end ------*/
/*------ content ------- */
.title1 {
color: #ffffff;
font-family: 'Georgia', serif;
font-size: 36px;
line-height: 38px;
font-weight: normal;
margin-bottom: 24px;
}
.title2 {
letter-spacing: 0;
color: #939598;
font-family: 'Georgia', serif;
font-size: 17px;
line-height: 26px;
font-weight: normal;
margin-bottom: 28px;
}
/*--------row2--------*/
.list1 {
padding: 0;
margin: 0;
position: relative;
list-style: none;
overflow: hidden;
}
.list1 li a {
display: block;
position: relative;
padding: 0;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.list1 li a p {
text-shadow: 1px 1px 2px #c1c1c1;
font-family: 'Georgia', serif;
font-size: 30px;
line-height: 32px;
font-weight: normal;
padding: 44px 0 41px;
margin-bottom: 0;
}
.list1 li a:hover {
text-decoration: none;
}
.list1 li a:hover p {
color: #4e4134;
text-decoration: none;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.box1 {
background: #eb5368;
}
.box1 figure {
width: 100%;
}
.box1 figure img {
width: 100%;
}
.box1 p {
color: #ffffff;
}
.box2 {
background: #f1d154;
}
.box2 figure {
width: 100%;
}
.box2 figure img {
width: 100%;
height: 216px;
}
.box2 p {
color: #ffffff;
}
.box3 {
background: #5bb4d6;
}
.box3 figure {
width: 100%;
}
.box3 figure img {
width: 100%;
}
.box3 p {
color: #ffffff;
}
.listbox1 {
padding-right: 0;
}
.listbox2 {
padding-right: 0;
padding-left: 0;
}
.listbox3 {
padding-left: 0;
}
/*---------list3-------------*/
.list3 {
padding: 0;
margin: 0;
position: relative;
list-style: none;
overflow: hidden;
}
.box4 {
overflow: hidden;
position: relative;
background: #ffffff;
margin-bottom: 30px;
}
.list3 li figure {
margin: 0;
padding: 0;
float: left;
overflow: hidden;
display: block;
margin-right: 20px;
}
.list3 li figure img {
width: 100%;
}
.list3 li .info1 {
overflow: hidden;
margin-top: 30px;
padding-right: 10px;
}
.list3title1 {
font-family: 'Georgia', serif;
font-size: 26px;
line-height: 28px;
font-weight: normal;
color: #4e4134;
margin-bottom: 10px;
}
.list3title2 {
font-family: 'Georgia', serif;
font-size: 20px;
line-height: 22px;
font-weight: normal;
color: #adadad;
margin-bottom: 6px;
}
.list3title3 {
margin-bottom: 10px;
font-family: 'Georgia', serif;
font-size: 15px;
line-height: 20px;
font-weight: normal;
color: #c6c6c6;
margin-bottom: 8px;
}
/*------------chef------------*/
.title3 {
font-family: 'Georgia', serif;
font-size: 24px;
line-height: 26px;
font-weight: normal;
color: #adadad;
margin-bottom: 17px;
}
.chef figure {
padding: 0;
margin: 0;
float: left;
margin-right: 15px;
}
.chef figure img {
width: 100%;
}
.chef .m_bot1 {
margin-bottom: 14px;
}
/*--------list2--------*/
.list2 {
position: relative;
overflow: hidden;
margin: 6px 0 0 0;
padding: 0;
}
.list2 li {
overflow: hidden;
list-style: none;
padding: 0 0 0 23px;
margin: 0 0 7px 0;
background: url("../images/arrowsmal2.png") 0 5px no-repeat;
}
.list2 li:first-child {
overflow: hidden;
padding: 0 0 0 23px;
margin: 0 0 8px 0;
}
.list2 > li {
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.list2 > li > a {
float: left;
display: block;
text-transform: uppercase;
font-family: 'Georgia', serif;
font-size: 12px;
line-height: 20px;
font-weight: normal;
color: #474848;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.list2 > li > a:hover {
text-decoration: none;
color: #eb5368;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.locations .title4 {
font-family: 'Georgia', serif;
font-size: 19px;
line-height: 26px;
font-weight: normal;
color: #adadad;
}
.locations figure {
padding: 0;
margin: 0;
float: none;
margin-bottom: 4px;
}
hr.line1 {
outline: none;
border: none;
background: #e7decf;
height: 1px;
width: 100%;
padding: 0;
margin: 27px 0 33px;
}
.title5 {
font-family: 'Georgia', serif;
font-size: 19px;
line-height: 26px;
font-weight: normal;
color: #797979;
margin-bottom: 25px;
}
hr.line2 {
outline: none;
border: none;
background: #dbdbdb;
height: 1px;
width: 100%;
padding: 0;
margin: 2px 0 27px;
}
.isotope, .isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
overflow: visible;
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
}
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
.isotope.infinite-scrolling {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.pad_bot3 {
padding-bottom: 42px;
}
#container {
margin-left: 0;
}
.containerExtra {
margin-left: -30px;
}
.element {
width: 270px;
height: auto !important;
display: block;
position: relative;
color: #222;
border: none;
margin: 0 !important;
padding: 0 0 38px 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#filters.pagination li a.selected {
color: #797979;
background: none !important;
border: none;
text-decoration: underline;
}
#filters.pagination li {
float: left;
}
#filters li {
display: inline-block;
margin-right: 26px !important;
}
#options {
position: relative;
margin-left: 0;
}
.element > a {
margin: 0;
display: block;
position: relative;
}
.element > a figure {
position: relative;
display: block;
margin: 0 0 18px;
padding: 0;
}
.element > a figure img {
width: 100%;
}
.element > a span {
position: relative;
text-transform: uppercase;
font-family: 'Georgia', serif;
font-size: 12px;
line-height: 20px;
color: #797979;
margin: 0;
padding: 0;
text-decoration: none;
}
.element span {
position: relative;
text-transform: uppercase;
font-family: 'Georgia', serif;
font-size: 12px;
line-height: 20px;
color: #797979;
margin: 0;
padding: 0;
text-decoration: none;
}
.description {
position: relative;
display: block;
}
#filters {
position: relative;
}
#filters li {
display: inline-block;
margin-right: 20px;
}
#filters li a {
padding: 0;
background: none;
border: none;
text-transform: uppercase;
font-family: 'Georgia', serif;
font-size: 12px;
line-height: 20px;
color: #797979;
margin: 0;
text-decoration: none;
}
#filters li a:hover {
background: none;
border: none;
text-decoration: none;
}
#options .pagination {
margin: 1px 0 30px 0;
}
/*--------links------------*/
.btn-link4 {
color: #474848;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.btn-link4:hover {
color: #eb5368;
text-decoration: none;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.pad_bot2 {
padding-bottom: 43px;
}
.links p {
margin-bottom: 28px;
}
.privacy_page h2 {
padding-bottom: 42px;
}
.privacy_page p {
margin-bottom: 22px;
}
.privacy_page .m_bot4 {
margin-bottom: 27px;
}
.privacy_page a {
color: #adadad;
}
.privacy_page a:hover {
color: #eb5368;
}
.smalllogo2 {
position: relative;
top: 5px;
}
@media (min-width: 1220px) {
.chef figure {
padding: 0;
margin: 0;
float: left;
margin-right: 31px;
}
.list3 li figure {
margin-right: 53px;
}
.list3 li .info1 {
overflow: hidden;
margin-top: 46px;
}
.box2 figure img {
height: 270px;
}
.container {
padding: 0;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.box1, .box2, .box3 {
float: none;
width: 100%;
margin: 0 auto 25px;
}
.box1 figure, .box2 figure, .box3 figure {
width: 100%;
}
.box1 figure img, .box2 figure img, .box3 figure img {
width: 100%;
}
.box2 figure img {
height: auto;
}
.listbox1 {
padding-right: 15px;
}
.listbox2 {
padding-right: 15px;
padding-left: 15px;
}
.listbox3 {
padding-left: 15px;
}
.list1 {
text-align: center;
}
.sf-menu {
display: none !important;
}
.select-menu {
display: block !important;
color: #ffffff;
border: 1px solid #343434;
background: #343434 !important;
-webkit-box-shadow: none;
box-shadow: none;
position: relative;
width: 100%;
margin: 0;
padding: 5px;
}
.select-menu option {
padding: 0;
}
}
/**************************************************/
@media (max-width: 480px) {
.list3 li figure {
float: none;
width: 100%;
margin-right: 0;
}
.list3 li .info1 {
padding: 20px;
overflow: hidden;
margin-top: 20px;
}
}
@media (max-width: 360px) {
.chef figure {
padding: 0;
float: none;
width: 100%;
margin: 0 0 10px 0;
}
}
<header id="header">
<div class="menuheader">
<div class="container">
<nav class="navbar navbar-default navbar-static-top tm_navbar" role="navigation">
<ul class="nav sf-menu">
<li class="active"><a href="index.html">Casa</a>
</li>
<li><a href="index.html">Sobre mi</a></li>
<li><a href="index-2.html">Guisos</a></li>
<li><a target="_blank" href="#">Postres</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="content">
<div class="slider">
<div class="camera_wrap">
<div data-src="https://isstatic.aoverflow.com/TLLX9.jpg"></div>
<div data-src="https://isstatic.aoverflow.com/U7vbZ.jpg"></div>
<div data-src="http://i64.tinypic.com/2qdmuis.jpg"></div>
</div>
</div>
<div class="row_1">
<div class="container">
<p class="title1">Aprendamos a cocinar</p>
<p class="title2">Sencillamente.</p>
</div>
</div>
<div class="row_2">
<div class="container">
<div class="row">
<ul class="list1">
<li class="col-lg-4 col-md-4 col-sm-4 listbox1">
<div class="box1">
<a href="#">
<figure><img src="http://i64.tinypic.com/2qdmuis.jpg" alt=""></figure>
<p>Guisos</p>
</a>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-4 listbox2">
<div class="box2">
<a href="galeri_vallas.html">
<p>VAsado</p>
<figure><img src="images/vallas_img/vallas9.jpg" height="500 px" alt=""></figure>
</a>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-4 listbox3">
<div class="box3">
<a href="galeri_podas.html">
<figure><img src="http://i64.tinypic.com/2qdmuis.jpg" alt=""></figure>
<p>Postres</p>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="row_3">
<div class="container">
<div class="row">
<ul class="list3">
<li class="col-lg-6 col-md-6 col-sm-6">
<div class="box4">
<figure><img src="images/forestal_img/fores13.jpg" alt=""></figure>
<div class="info1 maxheight">
<p class="list3title1">Guiso</p>
</div>
</div>
</li>
<li class="col-lg-6 col-md-6 col-sm-6">
<div class="box4">
<figure><img src="http://i64.tinypic.com/2qdmuis.jpg" alt=""></figure>
</div>
</li>
<li class="col-lg-6 col-md-6 col-sm-6">
<div class="box4">
<figure><img src="http://i64.tinypic.com/2qdmuis.jpg" alt=""></figure>
</li>
<li class="col-lg-6 col-md-6 col-sm-6">
<div class="box4">
<figure><img src="http://i64.tinypic.com/2qdmuis.jpg" alt=""></figure>
</div>
</li>
</ul>
</div>
</div>
</div>
Como estás usando Bootstrap, simplemente añádele la clase
.navbar-fixed-top
a tunav
para que la barra de navegación quede fija en la parte superior. Por lo tanto, deberías quitar la propiedadposition: relative
que tienes en tu clasetm_navbar
.Como quieres que el fondo de la barra de navegación sea otro distinto al de la barra de navegación podrás hacerlo haciendo uso de la especificidad de CSS (entre otras cosas para evitar utilizar
!important
), es decir, utilizando un estilo más específico que los que utiliza Bootstrap.En este caso he utilizado la clase
negro
(tu podrías darle el nombre que quisieras) pero teniendo en cuenta varias clases anteriores para hacer el estilo mucho más específico que el que aplica Bootstrap a la clasenavbar-default
.Además, el espacio que se te queda en la parte superior es debido a que el body tiene un margen por defecto. Simplemente añádele
margin: 0
a tu body y ese espacio desaparecerá.Tu ejemplo modificado:
No he podido reproducir el problema y eso que inclui boostrap 3 con un cdn, sin embargo muchas veces se suele solucionar agregando
margin: 0
al navbar usando un selector con mayor prioridad comobody .menuheader .navbar
.Lo otro es que si quieres que no muestre espacio de separación a los lados, puedes agregar esto otro:
Debes agregar la clase fixed-top según
Para que este estilo haga efecto debes asegurarte de que tu position este en fixed, por lo cuál en tu css debes quitar el position relative.
}
Espero sea de ayuda.
Saludos.
例如,尝试向导航栏添加样式(假设您使用的是 .navbar.navbar-default 类):
Me cuentas como te fue.
Creo que lo del hueco esta solucionado. Respecto a dejar la barra de navegación fija podrías hacer uso del Pluging de Bootstrap llamado Affix. Te pongo un ejemplo a continuación de como funcionaría en tu ejemplo: Habría que agregar en:
el CSS
en el HTML
donde
es la cantidad de pixeles que querés que haga scroll para que se fije. Éste es un atributo opcional.
sería para fijarlo abajo. Y si no se coloca este atributo, el nav quedaría fijo al cargar la web. Sirve tanto para utilizarlo horizontal o verticalmente.
Faltaría limpiar un poco el código que por falta de tiempo no pude.
Éxitos.