How can I position the navbar over the logo so that it aligns perfectly under the letter "g"?
I want to ensure that this positioning remains consistent even when resizing the browser or viewing on different screen sizes, without impacting the content below.
The logo image should scale down to fit the screen.
https://i.sstatic.net/JOwAZ.jpg
Browser Scaled Down
https://i.sstatic.net/6FNBm.jpg
https://jsfiddle.net/jypwoaet/
HTML
<div class="container">
<div id="logo">
<img src="https://i.imgur.com/3SBvB3a.jpg">
</div>
<div id="nav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
CSS
.container {
max-width: 960px;
margin: auto auto;
}
#logo {
z-index: 1;
max-width: 650px;
margin: 2em auto;
}
#logo img {
display: block;
max-width: 100%;
max-height: 100%;
text-align: center;
}
#nav {
z-index: 2;
position: relative;
display: block;
width: 100%;
min-width: 400px;
height: 50px;
margin: -12vh auto;
text-align: center;
background: gray;
}
#nav ul li {
display: inline-block;
padding: 1em;
}