Изменение ориентации меню при изменении ширины окна;

Question

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

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

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

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

введите сюда описание изображения 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;
}

Answer 1

У тебя #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 скрине
  }
}

Answer 2

Переменная --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>

БЛОГ НА HUSL

Изменение ориентации меню при изменении ширины окна;

Ответы (2 шт):