Как зафиксировать панель меню в верхней части экрана?

Question

[Raul Abdullin]

Задача простая для верстальщика даже с небольшим опытом, но так как я только начинаю, немного запутался.
Мне всегда казалось, что достаточно добавить position: fixed; для .top-panel и будет работать.
В итоге что имеем после добавления position: fixed; Прикрепляю скрин, т.е. вся панель почему ужимается, и становится не во всю ширину экрана браузера, причину понять не могу. Из-за чего панель ужимается после того, как задаю это свойство? Далее после этого попробовал задать свойство width: 100%; для .top-panel в итоге стало всё хорошо. Но почему-то когда прокручиваю страницу, то данная панель находится под плашками контента, прикрепляю второй скрин. Подскажите правильный ли я способ выбрал для закрепления панели и как решить задачу?

.main-header .top-panel {
	display: flex;
	justify-content: space-between;
	height: 90px;
	background-color: #fff;
	box-shadow: inset 0 -2px 0 0 #DCE9F5;
}

.main-header .left-side {
	padding-top: 35px;
}

.left-side h1 a {
	position: relative;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.8rem;
	margin-left: 99px;
	color: #212121;
}

.left-side h1 a span {
	font-size: 1.8rem;
	font-weight: 300;
}

.main-header .right-side {
	display: flex;
}

ul.main-nav {
	display: flex;
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
}

ul.main-nav a, .right-side .phone {
	font-weight: 700;	
	font-size: 1.6rem;
	margin-right: 40px;
	line-height: 90px;
}

.top-panel ul.main-nav a {
	text-transform: uppercase;
	color: #455F87;
}

.top-panel ul.main-nav a:hover {
	color: #37A1F6;
	border-bottom: 2px solid #37A1F6;
	padding-bottom: 34px;
}

.right-side .phone {
	color: #212121;
	border-left: 2px solid #DCE9F5;
	padding-left: 40px;
}

.right-side .main-btn {
	padding-right: 40px;
	padding-left: 40px;	
}

<div class="main-header">
		<div class="top-panel">

			<div class="left-side">
				<h1><a href="#" class="icon-iconmonstr-infinity-1"><span>Creative</span> Box</a></h1>
			</div>

			<div class="right-side">
				<ul class="main-nav">
					<li><a href="">About</a></li>
					<li><a href="">Services</a></li>
					<li><a href="">Calculator</a></li>
					<li><a href="">News</a></li>
					<li><a href="">Contact</a></li>
				</ul>
				<div class="phone">0947891495</div>
				<button class="main-btn">Get Started</button>
			</div>

		</div>

1Й СКРИН


2Й СКРИН

Comments

[Ярослав Иванов]

z-index

[Raul Abdullin]

Ярослав Иванов, большое спасибо

Answer 1

[Andrey_Hmytron]

Да. Правильно. fixed; width: 100%; top 0; left: 0;
Только z-index побольше дай для .top-panel
Что бы был больше чем у Этих блоков которые поверх шапки становятся.

Comments

[Raul Abdullin]

спасибо большое :)

[Raul Abdullin]

Не подскажите еще, можно ли средствами html/css сделать так, чтобы когда начинаем крутить, чтобы эта верхняя панель по высоте меньше становилась?

[Andrey_Hmytron]

Только через js такое делал. Через css, как мне кажется, нельзя

[Raul Abdullin]

Andrey_Hmytron, ага понял спасибо большое, только сейчас заметил такой баг, теперь общий контейнер шапка имеет белый пробел равный высоте плашки меню, видимо из-за того, что position: fixed; Не подскажите, как пофиксить такое?

[Andrey_Hmytron]

Не подскажу. Подумайте ;)

[Raul Abdullin]

Andrey_Hmytron, попробовал через calc(100vh + 90px); не работает =(

[Andrey_Hmytron]

raulvodov, 100vh наверное стоит на main-header или как? Нужно ставить на тот блок, который голубой фон дает. Он , возможно, идет после .top-panel

[Raul Abdullin]

Andrey_Hmytron, ага еще раз спасибо большое получилось.