Навигационная панель: когда я закрепил навигационную панель вверху, мои компоненты также были закреплены наверху

Question

Я работаю над персональным проектом с Angular. Я хочу, чтобы верхняя фиксированная панель навигации могла писать «фиксированная верхняя часть» в <nav>. Навигационная панель исправлена, но проблема в том, что мои компоненты также закреплены наверху, что является большой проблемой, которую я не знаю, как решить. Как вы видите на моем экране, мой список компонентов mov ie также закреплен вверху, поэтому верхняя часть компонента скрыта панелью навигации. Это проблема со всеми компонентами / страницами.

[Это экран моего приложения.] 1

Это мой шаблон панели навигации

Это css

nav {
-webkit-box-shadow: 0px 5px 4px -1px rgba(173,161,173,1);
-moz-box-shadow: 0px 5px 4px -1px rgba(173,161,173,1);
box-shadow: 0px 5px 4px -1px rgba(173,161,173,1);
height: 60px;
width: 100%;
}

Это мой компонент приложения, вызывающий панель навигации

<app-header></app-header>
<router-outlet></router-outlet>

Если у вас есть идеи, пожалуйста, помогите мне.

Спасибо

Answer 1

Вот проблема:

<nav class=". . . fixed-top . . .">

Вы указали класс fixed-top. Это означает, что панель навигации будет перекрываться содержимым.

Вы можете попробовать удалить этот класс. Или, если вам нужен этот конкретный класс c, попробуйте добавить отступ: body { padding-top: 80px; } (80 пикселей или то, что вы считаете более удобным для показанного веб-содержимого).