Как мне разместить элемент навигации под моим элементом заголовка?

Question

Я хочу, чтобы моя навигация отображалась в заголовке «Acme Web Design» всякий раз, когда я просматривал его на мобильном устройстве. Все мои элементы расположены в правильном месте для экрана ноутбука, но когда я проверяю, реагирует ли он, они не располагаются в том месте, где я хочу их видеть.

Вот как выглядит мой заголовок в отзывчивом виде.

Это файл HTML и CSS, который я использовал.

.headerdiv {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* Header */
header{
    background-color: #35424a;
    border-bottom: 2px solid #ff6600;
    color: white;
    padding-top: 30px;
    min-height: 70px;
}
nav {
    float: right;
    margin-bottom: 30px ;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 10px;
}

<header>
    <div class="container">
        <div class="headerdiv">
            <h1>Acme Web Design</h1>
            <nav>
                <a href="index.html">HOME</a>
                <a href="about.html">ABOUT</a>
                <a href="services.html">SERVICES</a>
            </nav>
        </div>
    </div>
</header>

Это то, что я хочу, чтобы мой заголовок выглядел

Answer 1

попробуйте это .. вы получите тот же результат на любом устройстве.

если вы хотите увеличить размер меню, вы можете сделать это с помощью font-size ..

	headerdiv {
display: flex;
justify-content: space-between;
align-items: flex-end;
}

/* Header */
header{

background-color: #35424a;
border-bottom: 2px solid #ff6600;
color: white;
padding-top: 8px;
min-height: 70px;

}

nav {

/* float: right; */
text-align: center;
margin-bottom: 30px ;

}

nav a {

color: white;
text-decoration: none;
padding: 10px;

}

<header>
		<div class="container">
			<div class="headerdiv">	
				<div>
					<h1 style="text-align: center;">Acme Web Design</h1>
				</div>
				<div>
				<nav>
					<a href="index.html">HOME</a>
					<a href="about.html">ABOUT</a>
					<a href="services.html">SERVICES</a>
				</nav>
			</div>
			</div>
		</div>
</header>

Answer 2

Измените свойство css класса .headerdiv и удалите nav class.

.headerdiv {
    text-align: center;
    margin-bottom: 30px;
    }

    /* Header */
    header {
    background-color: #35424a;
    border-bottom: 2px solid #ff6600;
    color: white;
    padding-top: 30px;
    min-height: 70px;
    }

    nav a {
    color: white;
    text-decoration: none;
    padding: 10px;
}

Answer 3

Я думаю, это то, что вы пытались достичь. Вот рабочая Codepen Link

body {
  font-family: sans-serif;
}

.headerdiv {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}

.headerdiv h1 {
  margin-bottom: 20px;
  font-size: 32px;
  font-weight: bold;
}

.headerdiv h1 span {
  color: #e7491c;
}


/* Header */

header {
  background-color: #35424a;
  border-bottom: 2px solid #ff6600;
  color: white;
  padding-top: 30px;
  min-height: 70px;
}

nav {
  margin-bottom: 30px;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
}

nav a.active {
  color: #e7491c;
}

<header>
  <div class="container">
    <div class="headerdiv">
      <h1><span>Acme</span> Web Design</h1>
      <nav>
        <a href="index.html" class="active">HOME</a>
        <a href="about.html">ABOUT</a>
        <a href="services.html">SERVICES</a>
      </nav>
    </div>
  </div>
</header>

Answer 4

Измените настройки флекс для контейнера следующим образом (особенно flex-direction: column;), используйте text-align: center для дочерних элементов .headerdiv, чтобы отцентрировать их и удалить поплавки, чтобы включить все элементы в родительский элемент / фон

Да, и добавьте эти дополнительные правила в медиазапрос , чтобы оставить ваш рабочий стол без изменений - во фрагменте ниже показан только мобильный просмотр, без медиазапросов (так как в вашем коде их не было). )

headerdiv {
  display: flex;
  flex-direction: column;
}
.headerdiv>* {
  text-align: center;
}

/* Header */

header {
  background-color: #35424a;
  border-bottom: 2px solid #ff6600;
  color: white;
  padding-top: 30px;
  min-height: 70px;
}

nav {
  margin-bottom: 30px;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

<body>
  <header>
    <div class="container">
      <div class="headerdiv">
        <h1>Acme Web Design</h1>
        <nav>
          <a href="index.html">HOME</a>
          <a href="about.html">ABOUT</a>
          <a href="services.html">SERVICES</a>
        </nav>
      </div>
    </div>
  </header>