Currently, I am struggling to find tutorials that can assist me in aligning the responsive navigation bar with the logo. As a newcomer to HTML & CSS and website creation, I would greatly appreciate any guidance on positioning it correctly. Additionally, could you provide a link to help me build a responsive website as I progress on this journey? Thank you very much for your help.
Below is the HTML code snippet:
<!DOCTYPE html>
<html>
<title>Office the Naval Adjutant</title>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<nav>
<ul>
<li><img src="logoweb.png"></li>
<li><a href='#'>ADMIN</a></li>
<li><a href='#'>MILITARY ASSISTANCE</a></li>
<li><a href='#'>RECORDS</a></li>
<li><a href='#'>PUBLICATION</a></li>
<li><a href='#'>GALLERY</a></li>
</ul>
</nav>
</body>
</html>
The CSS styling is as follows:
#logo {
position:absolute;
left:0%;
}
* {
padding: 0;
margin: 0;
}
nav{
background-color: #233647;
text-align: right;
padding: 20px;
}
nav li {
display: inline-block;
margin: 0 8px;
padding-top: 1px;
}
nav li a{
color: white;
padding: 11px;
text-decoration: none;
font-family: arial;
}
nav li a:hover{
background-color: white;
color: #233647;
}
This is how the current output appears:
https://i.sstatic.net/5bYvy.png