Всем привет, имеется меню которое я хочу сделать адаптивным.
Но слова разрываются при уменьшении экрана потому что я использую 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%