Resizing issue on mobile with the Text Rotater in header

I'm having an issue with the placing of the Text Rotater text, when viewing the website on mobile. The text is placed over the navigation bar.

This is my HTML code:

`<section id="slider" class="slider-element slider-parallax" style="background: url('images/bgPlaceholder2.png'); background-size: cover;" data-height-xl="670" data-height-lg="500" data-height-md="400" data-height-sm="250" data-height-xs="200">
<div class="slider-parallax-inner">
<div class="container clearfix">
<div class="vertical-middle center">

					<div class="heading-block nobottomborder center">
						<h1>
							<div class="text-rotater" data-separator="|" data-rotate="flipInX" data-speed="3500">
								I'd like to design <span class="t-rotate">|your Website|your App|your Logo|your Business</span>
							</div>
						</h1>
					</div>

				</div>
			</div>
		</div>
	</section>

I'm experiencing this issue on mobile.

Sorry, embedding the image didn't seem to work.