將Navbar放在Logo上並在縮放時保持位置

Question

將導航欄放在logo上的最佳方式是使其恰好在「g」之下？

即使在瀏覽器被調整大小和不同的屏幕尺寸時，它也需要保持該位置，並且不會影響下面的內容。

徽標圖像縮小到適合屏幕。

---

---

瀏覽器縮小

---

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; 
} 

Answer 1

.container { 
 
    max-width: 960px; 
 
    margin: auto auto; 
 
} 
 

 
#logo { 
 
    z-index: 1; 
 
    max-width: 650px; 
 
    margin: 0 auto; 
 
} 
 

 
#logo img { 
 
    display: block; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
} 
 

 
#nav { 
 
    z-index: 2; 
 
    position: relative; 
 
    display: block; 
 
    width: 100%; 
 
    min-width: 400px; 
 
    height: 50px; 
 
    margin: -16px auto 0 auto; 
 
    text-align: center; 
 
    background: gray; 
 
} 
 

 
#nav ul li { 
 
    display: inline-block; 
 
    padding: 1em; 
 
}

<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>

試試這個，jsfiddle