Item appearing above another rather than to the left of it? - html

Question

I have a navigation that's horizontally scrollable on mobile devices.
I'd like to add text that says '👉 Scroll' so folks know to do so.
I've set up the text to appear on mobile only but now when I add this next to my nav html it appears above the nav rather than to the left of it. Essentially I'd like the nav links to shift right and accommodate the text.
I'm a massive noob so apologies in advance and I really appreciate any help.
Thanks!
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">
<i class="fab fa-instagram fa-xs"></i>
<i class="fas fa-rss fa-xs"></i>
</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;
}
}```

Answer 1

Hello I3rett could you try putting this in an < a > tag, the div tag is not inline :D
-> If that doesn't work, try putting the < a > element inside site-nav-logo/nav-left