I've been working hard to troubleshoot the header on my personal webpage. As it stands now, here is how it looks:
https://i.sstatic.net/C4zSQ.png
Currently, there's a simple paragraph with "ZH" on the left and three list items next to the logo. What I'm aiming for is to float these three list items to the right, similar to this:
https://i.sstatic.net/MbkN4.png
Below is the HTML code generated:
<ul class="nav">
<a class="navbar-brand" href="http://localhost:8888/wordpress/">
<p>ZH</p>
</a>
<li class="nav-item">
<a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/about/" role="button">About</a>
</li>
<li class="nav-item">
<a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/projects/" role="button">Projects</a>
</li>
<li class="nav-item">
<a class="btn btn-lg nav-link" target="_blank" href="http://localhost:8888/wordpress/wp-content/themes/zachary_hughes_wordpress/assets/hughes_zachary_cv.pdf" role="button">Resume</a>
</li>
</ul>
And here is the CSS for the ul.nav:
.nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
If possible, I would like to achieve this without altering the HTML markup. Any guidance or assistance would be highly appreciated.