Currently, I am in the process of creating a website for my college project using HTML, CSS, and other related technologies. However, I am facing challenges with my navigation bar design.
The main issue is that the navigation bar appears on the side of the page, whereas I would prefer it to be positioned at the top similar to the navigation bar on Stack Overflow. I have implemented flexbox for the navigation bar layout and I am satisfied with the sizing of each section. Here is a snippet of my code:
body {
background-color: #000000;
color: #FFFFFF;
font-family: Georgia;
}
nav {
background-color: #000000;
color: #888;
margin: 0px 0px 0px 0px;
overflow: hidden;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
nav ul {
float: left;
display: block;
margin: 0;
padding: 0;
}
nav ul li {
float: top;
list-style: none;
text-align: center;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 56px;
padding: 0;
text-decoration: none;
text-align: center;
}
nav > ul > li:hover > a {
color: rgb(255, 255, 255);
}
<nav>
<ul>
<li>
<h1>Title</h1>
</li>
<li><a href="index.html">Home</a>
</li>
<li><a href="forum.html">Forum</a>
</li>
<li><a href="music.html">Music</a>
</li>
<li><a href="about.html">About</a>
</li>
<li><a href="shop.html">Shop</a>
</li>
</ul>
</nav>