У меня есть навигация с горизонтальной прокруткой на мобильных устройствах. Я хотел бы добавить текст с надписью «Прокрутка», чтобы люди знали, как это сделать.
Я настроил текст так, чтобы он отображался только на мобильных устройствах, но теперь, когда я добавляю его рядом с навигацией html он появляется над навигацией, а не слева от нее. По сути, я бы хотел, чтобы навигационные ссылки сдвигались вправо и соответствовали тексту.
Я большой нуб, поэтому заранее извиняюсь и очень ценю любую помощь.
Спасибо!
HTML
<nav class="site-nav">
<div class="site-nav-left-wrapper">
<div class="site-nav-left">
{{#if @site.logo}}
<a class="site-nav-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
{{else}}
<a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
{{/if}}
<div class="site-nav-content">
<div class="mobileShow">? Scroll</div>
{{#if @site.navigation}}{{navigation}}
{{/if}}
{{#is "post"}}
<span class="nav-post-title {{#unless @site.logo}}dash{{/unless}}">{{post.title}}</span>
{{/is}}
</div>
</div>
</div>
<div class="site-nav-right">
{{#if @site.secondary_navigation}}
{{navigation type="secondary"}}
{{else}}
<div class="social-links">
<a href="https://instagram.com/monstermtnblog"><i class="fab fa-instagram fa-xs"></i></a>
<a href="https://monstermtn.com"><i class="fas fa-rss fa-xs"></i></a>
</div>
{{/if}}
{{#if @labs.members}}
<a class="subscribe-button" href="#subscribe">Subscribe</a>
{{/if}}
</div>
CSS
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1000;
background: #22003a;
}
.site-nav {
position: relative;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: flex-start;
overflow: hidden;
height: 64px;
font-size: 1.3rem;
}
.site-nav-left-wrapper {
position: relative;
flex: 1 0 auto;
display: flex;
}
.site-header-background:not(.responsive-header-img) .site-nav-left-wrapper:after,
.site-nav-main .site-nav-left-wrapper:after {
content: "";
position: absolute;
top: 0;
z-index: 1000;
width: 40px;
height: 100%;
}
.site-header-background:not(.responsive-header-img) .site-nav-left-wrapper:after,
.site-nav-main .site-nav-left-wrapper:after {
right: 0;
}
.site-nav-left {
flex: 1 0 auto;
display: flex;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
margin-right: 10px;
padding: 10px 0 80px;
font-weight: 500;
letter-spacing: 0.2px;
text-transform: uppercase;
white-space: nowrap;
-ms-overflow-scrolling: touch;
}
.site-nav-left .nav li:last-of-type {
padding-right: 20px;
}
.site-nav-logo {
position: relative;
z-index: 100;
flex-shrink: 0;
display: inline-block;
margin-right: 32px;
padding: 12px 0;
color: #fff;
font-size: 1.7rem;
line-height: 1.8rem;
font-weight: bold;
letter-spacing: -0.5px;
text-transform: none;
}
.site-nav-logo:hover {
text-decoration: none;
}
.site-nav-logo img {
display: block;
width: auto;
height: 21px;
}
.site-home-header .site-nav-logo {
display: none;
}
.site-nav-content {
position: relative;
align-self: flex-start;
}
.nav {
position: absolute;
z-index: 1000;
display: flex;
margin: 0 0 0 -12px;
padding: 0;
list-style: none;
transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav li {
display: block;
margin: 0;
padding: 0;
}
.nav li a {
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
display: block;
padding: 12px 12px;
color: #ff0072;
transition: opacity 0.35s ease-in-out;
}
.nav li a:hover {
color: springgreen;
text-decoration: none;
}
.nav li a:before {
content: "";
position: absolute;
right: 100%;
bottom: 8px;
left: 12px;
height: 1px;
background: #fff;
transition: all 0.35s ease-in-out;
}
.nav li a:hover:before {
right: 12px;
}
.nav-post-title-active .nav {
visibility: hidden;
opacity: 0;
transform: translateY(-175%);
}
.nav-post-title {
visibility: hidden;
position: absolute;
top: 9px;
color: springgreen;
font-size: 1.7rem;
font-weight: 400;
text-transform: none;
opacity: 0;
transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
transform: translateY(175%);
}
.nav-post-title.dash {
left: -25px;
}
.nav-post-title.dash:before {
content: "– ";
opacity: 0.5;
}
.nav-post-title-active .nav-post-title {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.site-nav-right {
flex: 0 1 auto;
font-size: 1.7em;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 10px 0;
height: 64px;
}
.site-nav-right .nav {
position: relative;
margin: 0;
}
.site-nav-right .nav a {
white-space: nowrap;
}
.site-nav-right .nav a:before {
display: none;
}
.site-nav-right .nav li:last-of-type a {
margin-right: -12px;
}
.social-links {
flex-shrink: 0;
display: flex;
align-items: center;
}
.social-link {
display: inline-block;
margin: 0;
padding: 10px;
}
.social-link:hover {
fill: springgreen;
}
.social-link svg:hover {
fill: springgreen;
}
.social-link svg {
height: 1.8rem;
fill: azure;
}
.social-link-fb svg {
height: 1.6rem;
}
.social-link-wb svg {
height: 1.6rem;
}
.social-link-wb svg path {
stroke: #fff;
}
.social-link-rss svg {
height: 1.9rem;
}
.subscribe-button {
display: block;
margin: 0 0 0 10px;
padding: 4px 10px;
border: #fff 1px solid;
color: #fff;
line-height: 1em;
border-radius: 10px;
opacity: 0.8;
}
.subscribe-button:hover {
text-decoration: none;
opacity: 1;
}
.site-nav-right .nav + .subscribe-button {
margin-left: 24px;
}
.rss-button {
padding: 10px 8px;
opacity: 0.8;
}
.rss-button:hover {
opacity: 1;
}
.rss-button svg {
margin-bottom: 1px;
height: 2.1rem;
fill: #fff;
}
/* Special behaviors for home navigation */
.home-template .site-nav-main {
z-index: 100;
}
.home-template .site-nav-main .site-nav {
opacity: 0;
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.home-template .site-nav-main .fixed-nav-active {
opacity: 1;
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.05s;
}
@media (max-width: 700px) {
.site-home-header .site-nav {
margin-left: -5vw;
}
.site-nav-main {
padding-right: 0;
padding-left: 0;
}
.site-nav-left {
margin-right: 0;
padding-left: 5vw;
}
.site-nav-right {
display: none;
}
}```