Адаптивное меню CSS HTML

Question

Всем привет, имеется меню которое я хочу сделать адаптивным.

Но слова разрываются при уменьшении экрана потому что я использую word-wrap: break-word.

Как мне сделать правильное адаптивное меню? Вот мой код:

<nav>
    <div class="topnav" id="myTopnav">
{%- for item in include.menu -%}
  {%- assign node = site.pages | where: "name", item.file | first -%}
  {%- assign url = item.url | default: node.url -%}
  {%- assign title = item.title | default: node.title -%}
  <a href="{{ url | relative_url }}" {% if url == page.url %}class="selected"{% endif %}>
    {%- if item.icon -%}<svg aria-label="{{ title }}" class="icon"><use xlink:href="{{ "/assets/fontawesome/icons.svg" | relative_url }}#{{ item.icon }}"></use></svg>{%- else -%}{{ title }}{%- endif -%}
  </a>
{%- endfor -%}
</div>
</nav>

.topnav 
 text-align: center
 word-wrap: break-word
 height: 0px
 width: 100%

Answer 1

Вариант с медиазапросами (размеры экранов как и размеры шрифта указаны произвольно, Вам нужно использовать свои параметры):

.topnav {
  display: flex;
  gap: 10px;
  justify-content: space-around;
  padding: 15px 0;
}
.topnav a {
  text-decoration: none;
  color: #000;
  font-size: 40px;
}
.topnav a:hover {
  text-decoration: underline;
}
@media (max-width: 900px) {
  .topnav a {
    font-size: 30px;
  }
}
@media (max-width: 600px) {
  .topnav a {
    font-size: 20px;
  }
}
@media (max-width: 450px) {
  .topnav a {
    font-size: 14px;
  }
}

<nav>
  <div class="topnav" id="myTopnav">
    <a href="">Home</a>
    <a href="">About</a>
    <a href="">Archive</a>
    <a href="">Contacts</a>
    <a href="">12 Best</a>
  </div>
</nav>

Вариант с "резиновым" размером шрифта (опять же, цифра условная, для примера):

.topnav {
  display: flex;
  gap: 10px;
  justify-content: space-around;
  padding: 15px 0;
}
.topnav a {
  text-decoration: none;
  color: #000;
  font-size: 3vw;
}
.topnav a:hover {
  text-decoration: underline;
}

<nav>
  <div class="topnav" id="myTopnav">
    <a href="">Home</a>
    <a href="">About</a>
    <a href="">Archive</a>
    <a href="">Contacts</a>
    <a href="">12 Best</a>
  </div>
</nav>

"Резиновый" шрифт можно сочетать с медиазапросами, т.е. на каких-то размерах экрана менять значение vw.

БЛОГ НА HUSL

Адаптивное меню CSS HTML

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