Эквидистантные якорные ссылки на одной линии для Squarespace - PullRequest
Новая
       29

Эквидистантные якорные ссылки на одной линии для Squarespace

0 голосов
/ 01 октября 2019

Я искал в Интернете и на форуме Squarespace ответы на эту проблему, но пока не могу найти удачу! Я понимаю базовый код и CSS, но не могу понять это сам: (

Я пытаюсь создать строку якорных ссылок в индексе с равноотстоящими текстовыми ссылками в строке. Когда я просматриваюто, что у меня есть сейчас с помощью планшета или телефона, они распадаются вхолостую.

Есть ли способ либо: ограничить это, чтобы они оставались на одной линии, либо настроить таким образом, чтобы они аккуратно складывались сверхудруг на друга?

Я пытаюсь воссоздать что-то с эффектом ссылки "Progamming сообщества Workspace" здесь (https://www.the -wing.com / why-the-wing / )

Изображения того, что происходит с моим сайтом в виде планшета, прилагаются.

изображение здесь

1 Ответ

0 голосов
/ 01 октября 2019

Если вы хотите просто сложить их сверху, когда экран станет меньше (как в телефоне или планшете, то это подойдет: 

.menu li {
  list-style-type: none;
  display: inline-block;
  padding-right: 30px;
}

@media (max-width: 760px) {
  .menu li {
    display: block;
    text-align: center;
  }
}
<div class="menu">
  <li><h2>LOCATIONS</h2></li>
  <li><h2>EVENTS</h2></li>
  <li><h2>PERSONAL STYLING</h2></li>
</div>
Он изменяется в зависимости от размера экрана, поэтому на экранах размером более 760 пикселей он располагается в одну линию и складывается на экранах меньшего размера. Вы можете изменить этот размер в @media в соответствии с вашими потребностями.

Однако сайт, на который вы ссылались, использует то, что называется меню бургера. Вот хорошая реализация, которую я нашел в сети , но реализовать ее немного сложнее.

Я ничего не знаю о Squarespace, но на вашем месте я бы искал своюBurger Menu шаблона в документации шаблона. Надеюсь, это поможет!

...