1

Всем привет! Подскажите плиз куда копать, ситуация такая:

  1. При изменении размера экрана, текст "накладывается" на меню навигации.

введите сюда описание изображения

  1. Как сделать чтобы навигационная панель изменяла свое позиционирование на верхнюю позицию?

введите сюда описание изображения 3. Хочу сделать это через медиа запрос;

Заранее спасибо большое за ответ!

Основной контент у меня находится в тегах html <section></section>;

Мой код CSS:

body {
  background-color: #D0D0D0;
  font-family: DejaVu Sans Mono, monospace;
  line-height: 1.5;
}
header {
  font-weight: bold;
  font-size: 20px;
}
p{
  margin-left: 15px;
}
#main-doc {
  padding-top: 30px;
}
.main-section {
  margin-left: 20%;
  position: relative;
}

#navbar  {
  position: fixed;
}

.nav-link, #bar {
  text-decoration: none;
  color: black;
  list-style-type: none;
}

2 ответа 2

0

У тебя #navbar (я так понимаю ето и есть меню) имеет свойство position: fixed и оно вырывается с контекста. Как минимум для начала задай ему max-widh равную margin-left для .main-section. А при медиаквери нужно прописать padding-top для .main-section равный высоте меню.

@media (max-width: 600px) {
  #navbar  {
    top: 0;
  }
  .main-section {
    padding-top: 250px; // где 250px высота меню
    overflow-y: auto; // для внутреннего скорла меню как на 2 скрине
  }
}
1
  • Спасибо большое всем за ответы! Юрий ваш совет помог, дальше докручу сам. Спасибо еще раз! Commented 6 мая 2020 в 21:58
0

Переменная --height - это высота header

:root {
  --height: 80px;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 30px;
  text-align: center;
}

body {
  position: relative;
}

:root {
  --height: 80px;
}

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 10px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  width: 100%;
  max-height: var(--height);
  overflow-y: auto;
  border: 1px solid black;
}

header .container>* {
  border-bottom: 1px solid gray;
  padding: 10px 0;
}

header .container>*:last-child {
  border: none;
}

section {
  margin-top: var(--height);
}
<header>
  <div class="container">
    <div>Пункт 1</div>
    <div>Пункт 2</div>
    <div>Пункт 3</div>
    <div>Пункт 4</div>
    <div>Пункт 5</div>
  </div>
</header>
<section>
  <div class="container">
    <div class="content">
      Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент
      Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент
      Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент
    </div>
  </div>
</section>

1
  • Михаил спасибо! Commented 6 мая 2020 в 21:59

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.