Блог

Я пытаюсь вдвое уменьшить размер моей липкой навигационной панели, и чтобы она отображалась наложенной, а не над изображением моего заголовка. Когда я пытаюсь изменить масштаб содержимого контейнера / оболочки, кажется, что он регулирует размер изображения, которое у меня есть в качестве навигационной панели. Я также хотел бы, чтобы выпадающее меню отображалось везде, где вы находитесь на странице, а не только вверху.

Я попытался использовать ‘position: absolute’ в моем css для всех битов навигационной панели. Похоже, это работает при наложении навигационной панели, однако она не отображается в верхней части страницы, а выпадающее меню недоступно.

 #wrapper {
     width: 100%;
}
 #demoncontrast {
     filter:contrast(100%) brightness(180%);
}
 .navbar {
     overflow: hidden;
     background-color: #333;
     z-index: 9999;
}
 .navbar a {
     float: left;
     font-size: 16px;
     color: white;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
}
 .dropdown {
     float: left;
     overflow: hidden;
}
 .dropdown .dropbtn {
     font-size: 16px;
     border: none;
     outline: none;
     color: white;
     padding: 0px;
     background-color: inherit;
     font-family: inherit;
     margin: 0;
}
 .navbar a:hover, .dropdown:hover .dropbtn {
}
 .dropdown-content {
     display: none;
     position: absolute;
     background-color: #f9f9f9;
     min-width: 657px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
}
 .dropdown-content a {
     float: none;
     color: black;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
}
 .dropdown-content a:hover {
     background-color: #ddd;
}
 .dropdown:hover .dropdown-content {
     display: block;
}
 .content {
     padding: 16px;
}
 .sticky {
     position: fixed;
     top: 0;
     width: 100% 
}
 .sticky   .content {
     padding-top: 102px;
}  

 <div class="container">
    <div id="wrapper">
		<div class="navbar" id="myHeader">
			<div class="dropdown">
				<button class="dropbtn">
					<img src="NONENTITYHEADERNB.png" id="opacity" align="left" style="max-width: 50%;height:auto;">
					<i class="fa fa-caret-down"></i>
				</button>
				<div class="dropdown-content">
					<a href="#1">Bio and album stream</a>
					<a href="#2">Where to buy</a>
					<a href="#3">Upcoming shows and links</a>
				</div>
			</div> 
		</div>
    </div>
</div>  

Я также хотел бы, чтобы выпадающее меню отображалось везде, где вы находитесь на странице, а не только вверху.

Вы должны использовать position свойство со fixed значением: position: fixed . Это приведет к тому, что ваш элемент (в данном случае панель навигации) останется в окне и всегда будет перемещаться вместе со зрителями.

И чтобы гарантировать, что ваш элемент не будет наложен, вы можете добавить z-index свойство на определенный уровень. Например: z-index: 999 .

Когда я пытаюсь изменить масштаб содержимого контейнера / оболочки, кажется, что он регулирует размер изображения, которое у меня есть в качестве навигационной панели

Причина кроется здесь:

 <img src="NONENTITYHEADERNB.png" id="opacity" style="max-width: 50%;height:auto;">
  

Вы max-width:50% имеете в виду, что это изображение должно иметь размер только 50% по сравнению с родительской шириной, и контейнер, и оболочка являются его родительскими.

Если я вас правильно понял, вы хотите, чтобы изображение автоматически масштабировалось при изменении размера контейнера, верно? Если это так, то, боюсь, вам придется приложить больше усилий к JavaScript, а не к CSS.