Seeking guidance from the web development community. I am currently working on a client's website that utilizes fullpage.js and encountering a persistent issue. On slide1 of the website, I am struggling to display the correct text next to the arrows. I have attempted using "position:fixed" in the CSS, but it results in the text appearing on every slide, whereas I require different text for each individual slide.
The HTML code snippet is as follows:
<body>
<div class="section" id="section1">
<div class="slide" id="slide1"><img src="imgs/Lowe-Clothing-logo.png" width="30%">
<div id="left-text">Business Opportunities</div><!--left-text-->
<div id="right-text">Introduction</div><!--right-text--></div><!--Slide1-->
<div class="slide" id="slide2"><h1>Totally customizable</h1></div><!--Slide2-->
</div>
</body>
Here is the relevant CSS code:
#left-text{
position: absolute;
top: 50%;
left: 60px;
margin-top:-9px;
font-size: 1.1em;
font-family: arial,helvetica;
color: #fff;
}
#right-text{
position: absolute;
top: 50%;
right: 60px;
margin-top:-9px;
font-size: 1.1em;
font-family: arial,helvetica;
color: #fff;
z-index:100;
}
I am striving to align the text with the arrows while ensuring smooth transitions between content sections. Additionally, I aim to have unique text displayed next to the arrows on each page. For further examination, you can download the complete site here.
Your advice and assistance would be highly appreciated. Thank you, Rob