I'm currently in the process of updating my website, but I've encountered a problem that I can't seem to solve.
The issue revolves around the positioning of my navigation bar. Currently, it is situated below some JavaScript content and on the left side of the page. However, I would like it to be centered directly below the JavaScript content. Below is the CSS followed by the HTML code:
ul {
position: absolute;
left: 0;
top: 50%
width: 100%;
text-align: center;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin: 0
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
And here is the HTML code:
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="http://www.about.trinity-international.com">About</a></li>
<li><a href="http://www.contact.trinity-international.com">Contact</a></li>
</ul>
If you'd like to see what I'm working on, you can visit the following subdomain:
Thank you!