У меня довольно простой липкий заголовок, написанный на scss / html, и контактная форма Google.Заголовок отлично работает на настольных и мобильных устройствах, за исключением страницы контактов для мобильных устройств.После прокрутки на странице или выбора / ввода информации в форму ничего нельзя выбрать, кроме формы Google.Я пользуюсь также турболинками.
РЕДАКТИРОВАТЬ: Я обнаружил, что ссылки на заголовки можно выбрать только в этом случае, если вы удерживаете их нажатой немного дольше, чем стандартный экран телефона.
Вот мой SCSS:
.topnav {
overflow: hidden;
background-color: $white;
opacity: 0.8;
position: fixed;
width: 100%;
z-index: 9999;
}
.topnav a {
float: center;
display: block;
color: $black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
&:hover {
color: $gray;
}
}
.active {
background-color: #4CAF50;
color: $black;
}
@media screen {
.topnav a:not(:last-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen {
.topnav.responsive {position: fixed;}
.topnav.responsive .icon {
position: fixed;
right: 0;
top: 0;
color: $black;
&:hover {
color: $gray;
}
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.fa-2x {
font-size: 2em !important;
}
Вот мой HTML-код для навигации:
<div class="topnav" id="myTopnav">
<div class="center">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="booking">Book your trip!</a>
<a href="/contact">Contact us!</a>
<a href="/info">I'm interested, whats next?</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class=" fa fa-2x fa-bars"></i>
</a>
</div>
</div>
Вот мой HTML-код для страницы контактов:
<div class="body-padding"></div>
<div class="row home-padding">
<div class="center mobile-padding">
<h1 class="logo">Skyline Journey</h1>
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeSF3ThRYkBMcl7w_4x5A5oHu7ivOZa_RGdv4MXvZQ2tL-ZSQ/viewform?embedded=true" width="100%" height="1015" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div>
</div>