My navbar was fine and fixed at the bottom, until I added a link to the google font API and an additional font option in the html. I commented out everything I changed, then I deleted it, but nothing has worked. The navigation should be exactly as it is, just at the bottom. Here is my html:
<div class="navbar">
<nav>
<a href="otherpage.html">Blog</a>
<a href="otherpage.html">Linguistics Facts</a>
<a href="otherpage.html">More About Me</a>
</nav>
</div>
</body>
</html>
Here is my CSS:
.navbar {
position: relative;
bottom: 0;
width: 100%;
list-style: none;
}
.navbar a {
float: center;
display: block;
text-align: center;
padding: 10px 12px;
margin: 15px; /*experimental*/
background-color: #f7b733;
color: white;
font-family: 'PassionTea', 'Amatic SC';
font-size: 170%;
list-style-type: none;
}
.navbar{
position:fixed;
bottom:0;
width:100%;
height: desired height;
}
To stick your menu to the bottom of your viewport you need to set position fixed not relative.You don't need list-style:none; because you don't have any list on the nav tag.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.