We Keep Coding

offsetting anchor link with a sticky header

i have a navbar and a sticky header which you can check it out in snippet. Now if i click on my anchors, I get scrolled down to the right position, even the header doesn't overlap the text of the div except in one strange case.
the problem is when i'm in the #Home section, after clicking on any anchors ( no matter #AboutMe or #Skills), it sends me to the right position but the header overlaps the text a little bit which is not what i want.
so when i'm in #AboutMe section and click on #Skills anchor for example, nothing strange happens and everything is alright but the problem is when you are in the #Home section and you wanna get to another sections by clicking on their anchors, it sends you a little bit lower than where it should get you.
to find out what i mean exactly, you need to click on #AboutMe anchor twice when you are in #Home section ( same as #Skills anchor) then you will find out on first attempt, it's not doing the job properly and you need to click on that specific anchor, twice to get the result you're looking for.
NOTE: ignore other styles like texts positioning or images which are not really important here and the snippet i've provided is enough to show you what my issue is.
has anybody ever faced this strange issue?
JS fiddle link: https://jsfiddle.net/f715j3qh/120/
$(document).ready(function () {
var aboveHeight = $('header').height();
$(window).scroll(function () {
if ($(window).scrollTop() > aboveHeight) {
$('nav').addClass('fixed').css('top', '0').next().css('padding-top', '70px');
} else {
$('nav').removeClass('fixed').next().css('padding-top', '0');
}
});
});
.header {
text-align: center;
}
.header-top {
font-size: 3.5rem;
height: 210px;
background: #28223f;
}
.header-top-p {
padding: 40px 0 30px;
}
.header p{
color:#a8c6de;
letter-spacing:1px;
}
#header-nav {
background-color: yellow;
color: black;
justify-content: space-between;
height: 70px;
background-image: yellow;
width: 100%;
margin: 0 auto;
align-items: center;
z-index: 10000;
}
nav .mainMenu {
list-style: none;
display: flex;
}
#header-nav ul li {
position: relative;
margin: 0 auto;
}
#header-nav ul li.active {
opacity: 1;
text-shadow: -3px 3px 7px #4d4d00;
}
nav .mainMenu li a {
font-weight: bold;
color: black;
padding: 21px;
display: inline-block;
text-decoration: none;
font-size: 2rem;
}
.anchor {
display: block;
height: 70px;
margin-top: -70px;
visibility: hidden;
}
.fixed {
position: fixed;
top: 0;
z-index: 1;
}
#Matin-Pic {
background: #28223f;
min-height: 63vh;
}
.Matin-Picture {
margin: 15px auto;
color: #b3b8cd;
width: 380px;
background: brown;
text-align: center;
border-radius: 5px;
box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.75);
}
.cover-photo {
background: lightblue;
height: 130px;
width: 100%;
border-radius: 5px 5px 0 0;
}
.non-profile {
height: 130px;
width: 100%;
}
.non-profile img {
height: 160px;
width: 175px;
margin: auto 150px;
display: flex;
}
.profile {
height: 140px;
width: 105px;
border-radius: 50%;
border: 1px solid #1f1a32;
padding: 7px;
background: #292343;
margin: -70px 0 0 203px;
}
.profile-name {
font-size: 25px;
font-weight: bold;
margin: 25px 0 0 -100px;
}
.about {
margin-top: 35px;
line-height: 25px;
font-size: 1.7rem;
}
#Matin-Pic button {
margin: 15px 10px 30px;
}
.msg-btn, .follow-btn {
border-radius: 3px;
cursor: pointer;
background: lightblue;
color: brown;
border: 1px solid lightblue;
padding: 10px 25px;
}
.follow-btn {
background: transparent;
color: lightblue;
}
#Matin-Pic i {
font-size: 20px;
padding-left: 20px;
margin-bottom: 20px;
cursor: pointer;
color: lightblue !important;
}
.section-1 {
background: #fff;
height: auto;
width: 100%;
}
.section-1 img {
margin-top: 160px;
border-radius: 10px;
width: 100%;
height: auto;
}
#AboutMe-image img:nth-child(1) {
box-shadow: -5px -5px 10px blue;
display: block;
}
#AboutMe-image img:nth-child(2) {
display: none;
box-shadow: -5px 5px 10px blue;
}
.section-1-image img {
display: none;
box-shadow: 5px 5px 10px blue;
}
.section-1 h3 {
font-style: oblique;
font-weight: bold;
font-size: 3rem;
margin: 60px auto;
color: blue;
}
.section-1 p {
color: black;
}
.section-1 p:nth-child(2) {
margin: 0 auto 15px;
font-size: 1.6rem;
}
.section-1 p:nth-child(3) {
font-size: 1.4rem;
line-height: 2.5;
}
#AboutMe {
margin-bottom: 110px;
min-height: 78vh;
}
#AboutMe-Text {
padding-right: 50px;
}
#Skills {
background: rgba(168, 198, 222, 0.2);
margin: 0 auto;
border-radius: 300px 15px;
}
.section-2 ul {
list-style: none;
text-align: center;
}
.section-2 ul li {
margin: 52px auto 0;
font-size: 1.6rem;
color: black;
}
.section-2 ul li:first-child {
margin-top: 30px;
}
.section-2 ul li:last-child {
margin-bottom: 52px;
}
.section-2 img {
margin: 32px auto;
max-width: 220px;
height: 540px;
border-radius: 7px;
}
.main-titles {
text-align: center;
font-weight: bold;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="Home">
<div class="container-fluid">
<div class="row">
<header class="header header-top">
<div class="header-top-p col-lg-4 col-md-4 col-sm-4 hidden-xs">
<p>text</p>
</div>
<div class="header-top-p col-lg-4 col-md-4 col-sm-4 hidden-xs">
<p>text</p>
</div>
</header>
<nav id="header-nav">
<ul class="mainMenu">
<li class="Home">Home</li>
<li class="AboutMe">About Me</li>
<li class="Skills">Skills</li>
</ul>
</nav>
</div>
</div>
</section>
<!--end Home section and header-->
<!-- ***** card profile ***** -->
<div id="M-Pic" class="container-fluid">
<div class="M-Picture">
<div class="cover-photo">
<div class="non-profile">
<img src="Content/images/logo.png">
</div>
<img src="Content/images/MPic.jpg"
class="profile">
</div>
<div class="profile-name">text</div>
<p class="about">some text here<br>some text</p>
<button class="msg-btn" onclick="#">send</button>
<button onclick="#" class="follow-btn">button1
</button>
<div>
<a href="#"><i
class="fab fa-linkedin"></i></a>
<a href="#"><i
class="fab fa-instagram"></i></a>
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
</div>
<span class="anchor" id="AboutMe-anchor"></span>
<section id="AboutMe" style="padding-top:3rem;">
<div class="container">
<div class="row">
<div class="section-1">
<div id="AboutMe-image" class="col-md-5 col-sm-5 slide-in fade-in">
<img src="Content/images/bg2-com2.jpg" alt="an image" width="1280" height="850">
<img alt="an image" src="Content/images/bg2-com5.jpeg" width="1000" height="800">
</div>
<div id="AboutMe-Text" class="col-md-7 col-sm-7 slide-in fade-in">
<h3>some text here</h3>
<p>some text here</p>
<p>some text here<br> some text here
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <br>
</p>
</div>
<div class="col-xs-12 section-1-image">
<!-- <img alt="an image" src="Content/images/bg2-com.jpg" width="598" height="399" class="fade-in slide-in"> -->
</div>
</div>
</div>
</div>
</section>
<!--end AboutMe-->
<!-- ***** skills ***** -->
<span class="anchor" id="Skills-anchor"></span>
<section id="Skills" style="padding-top:1rem;">
<div class="container-fluid">
<div class="row">
<div class="section-2">
<h2 class="main-titles fade-in-main-titles slide-in-main-titles">skills</h2>
<div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-left">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs">
<img src="Content/images/MySkills2.gif"
class="img-responsive center-block fade-in-skills slide-in-skills">
</div>
<div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-right">
<ul>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item13</li>
<li>item14</li>
<li>item15</li>
<li>item16</li>
</ul>
</div>
</div>
</div>
</div>
</section>

Scroll button behavior

The button scrolls past the content I want to be shown.
I want the "About Us" section to be showed to the display of user (100vh), but it just scrolls past that.
Here's the code:
function smoothScroll(target, duration) {
var target = document.querySelector(target);
var targetPosition = target.getBoundingClientRect().top;
var startPosition = window.pageYOffset;
var distance = targetPosition - startPosition;
var startTime = null;
function animation(currentTime) {
if (startTime === null) startTime = currentTime;
var timeElapsed = currentTime - startTime;
var run = ease(timeElapsed, startPosition, distance, duration);
window.scrollTo(0, run);
if (timeElapsed < duration) requestAnimationFrame(animation);
}
function ease(t, b, c, d) {
t /= d / 2;
if (t < 1) return (c / 2) * t * t + b;
t--;
return (-c / 2) * (t * (t - 2) - 1) + b;
}
requestAnimationFrame(animation);
}
var btn = document.querySelector(".btn");
btn.addEventListener("click", function () {
smoothScroll(".text-slider", 600);
});
.hero {
display: flex;
width: 90%;
margin: auto;
height: 100vh;
min-height: 100vh;
align-items: center;
text-align: center;
background-image: url(/img/pexels-tranmautritam-326501.jpg);
background-size: cover;
background-attachment: fixed;
justify-content: center;
}
.introduction {
flex: 1;
height: 30%;
}
.welcometxt h1 {
font-size: 17px;
color: white;
font-weight: 100;
letter-spacing: 12px;
}
.intro-text h1 {
font-size: 44px;
font-weight: 700;
color: white;
/* background: linear-gradient(to left, rgb(184, 184, 184), #ffffff); */
/* -webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}
.intro-text p {
font-size: 18px;
margin-top: 5px;
color: white;
}
.cta {
padding: 50px 0px 0px 0px;
}
.btn {
background-color: white;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: black;
border: none;
border-radius: 40px;
transition: all 0.6s ease;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
}
.btn:hover {
background-color: black;
color: white;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.8);
}
.text-slider {
width: 70%;
height: 90vh;
margin: 100px auto;
position: relative;
text-align: center;
align-items: center;
}
.carousel {
height: 70vh;
overflow: hidden;
}
.slider {
height: 100%;
display: flex;
width: 400%;
transition: all 0.3s;
}
.slider p {
width: 70%;
font-size: 17px;
}
.slider section {
flex-basis: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.controls .arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.controls .arrow i {
font-size: 60px;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}
.nextpage-arrow i{
font-size: 60px;
cursor: pointer;
}
<section class="hero">
<div class="introduction">
<div class="welcometxt">
<h1>
WELLCOME
</h1>
</div>
<div class="intro-text">
<h1>Optimal Solution for Your Product</h1>
<p>
Ensuring optimal solution for your
Quality Management.
</p>
</div>
<div class="cta">
<button class="btn">Click for more</button>
</div>
</div>
</section>
<div class="text-slider" id="text-slider">
<h1>About Us</h1>
<div class="carousel">
<div class="slider">
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, fugiat.</p>
</section>
<section>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, commodi?</p>
</section>
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, velit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, aperiam.</p>
</section>
</div>
<div class="controls">
<span class="arrow left">
<i class="material-icons">
keyboard_arrow_left
</i>
</span>
<span class="arrow right">
<i class="material-icons">
keyboard_arrow_right
</i>
</span>
</div>
</div>
<div class="nextpage-arrow">
<span class="text-slider-btn">
<i class="material-icons">
keyboard_arrow_down
</i>
</span>
</div>
</div>
As shown in the picture, it goes past "About Us" h1.
I want the page to stop at "About Us", and not go past it.
If you need more code, or more explanation please comment and I'll try my best!
Thank you in advance.
UPDATE (GIF):

That code that you use for smooth scroll is unnecessary. You should better use Element.scrollIntoView()
Element.scrollIntoView()
The Element interface's scrollIntoView() method scrolls the element's
parent container such that the element on which scrollIntoView() is
called is visible to the user. MDN - Element.scrollIntoView()
Use the following code should you want to scroll to About Us section when you click on Click for more button.
// 'Click for more' button
const button = document.querySelector("#more-info")
button.onclick = () => {
document.querySelector("#text-slider")
.scrollIntoView({block: "start", behavior: "smooth"})
}
const button = document.querySelector("#more-info")
button.onclick = () => {
document.querySelector("#text-slider")
.scrollIntoView({block: "start", behavior: "smooth"})
}
.hero {
display: flex;
width: 90%;
margin: auto;
height: 100vh;
min-height: 100vh;
align-items: center;
text-align: center;
background: #000;
background-image: url(/img/pexels-tranmautritam-326501.jpg);
background-size: cover;
background-attachment: fixed;
justify-content: center;
}
.introduction {
flex: 1;
height: 30%;
}
.welcometxt h1 {
font-size: 17px;
color: white;
font-weight: 100;
letter-spacing: 12px;
}
.intro-text h1 {
font-size: 44px;
font-weight: 700;
color: white;
/* background: linear-gradient(to left, rgb(184, 184, 184), #ffffff); */
/* -webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}
.intro-text p {
font-size: 18px;
margin-top: 5px;
color: white;
}
.cta {
padding: 50px 0px 0px 0px;
}
.btn {
background-color: white;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: black;
border: none;
border-radius: 40px;
transition: all 0.6s ease;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
}
.btn:hover {
background-color: black;
color: white;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.8);
}
.text-slider {
width: 70%;
height: 90vh;
margin: 100px auto;
position: relative;
text-align: center;
align-items: center;
}
.carousel {
height: 70vh;
overflow: hidden;
}
.slider {
height: 100%;
display: flex;
width: 400%;
transition: all 0.3s;
}
.slider p {
width: 70%;
font-size: 17px;
}
.slider section {
flex-basis: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.controls .arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.controls .arrow i {
font-size: 60px;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}
.nextpage-arrow i {
font-size: 60px;
cursor: pointer;
}
<section class="hero">
<div class="introduction">
<div class="welcometxt">
<h1>
WELLCOME
</h1>
</div>
<div class="intro-text">
<h1>Optimal Solution for Your Product</h1>
<p>
Ensuring optimal solution for your Quality Management.
</p>
</div>
<div class="cta">
<button class="btn" id="more-info">Click for more</button>
</div>
</div>
</section>
<div class="text-slider" id="text-slider">
<h1>About Us</h1>
<div class="carousel">
<div class="slider">
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, fugiat.</p>
</section>
<section>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, commodi?</p>
</section>
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, velit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, aperiam.</p>
</section>
</div>
<div class="controls">
<span class="arrow left">
<i class="material-icons">
keyboard_arrow_left
</i>
</span>
<span class="arrow right">
<i class="material-icons">
keyboard_arrow_right
</i>
</span>
</div>
</div>
<div class="nextpage-arrow">
<span class="text-slider-btn">
<i class="material-icons">
keyboard_arrow_down
</i>
</span>
</div>
</div>
Recommend you to add background: #000; as fallback for background-image since sometimes image might not be loaded.

Can you tell me how to add an image and a text to my html slideshow?

thank you so much for your help in advance. I started coding few days ago, and I have issues with my slider. My text h1 does not appear on top of my slider. I tried the Z-index but it did not work. it seems that the image appear next to my slide and not on it. i tried different things, but it is still the same. Image appears, but next to the sliders,or the text appears under the image.
here is my html and my css file. Hopefully someone can help me to sort it out/
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 1.43;
color: #484848;
max-width: 100%;
overflow-x: hidden;
}
p {
font-size: 16px;
margin: 0;
padding: 0;
}
a:link {
font-size: 16px;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
h1,h2,h3,h4,h5,h6,ul,ol,li{
margin: 0;
padding: 0;
}
ul,ol{
list-style-type;
}
::selection {
color: #fff;
background-color: #333;
}
::-moz-selection {
color: #fff;
background-color: #333;
}
/*-----------Top-Nav-------- */
.top-nav {
position: fixed;
width: 100%;
border-bottom: 1px solid #c9c9c9;
float: left;
display: block;
height: 95px;
background: #fff;
z-index: 99999999999;
}
.top-nav .logo{
width: 100%;
float: left;
display: block;
height: 95px;
border-right: 1px solid #e9e9e9;
}
.top-nav .logo img {
width: 100%;
padding: 14px 0;
transition: all .9s;
-webkit-filter: grayscale(0%);
}
.top-nav .logo a:hover img {
-webkit-filter: grayscale(100%);
}
/*-----------Top-Nav-Search-------- */
.top-nav .search-container {
float: left;
width:100%;
display:block;
padding:22px 0;
}
.top-nav form{
position:relative;
display:block;
}
.top-nav input[type="text"] {
width: 100%;
background: #fff;
padding: 10px 12px;
border: 1px solid #e1e1e1;
border-right: none;
color: #888;
font-size: 14px;
height:42px;
}
.top-nav .search-container button {
float: right;
padding: 8px 15px;
background: orange;
font-size: 17px;
height: 42px;
border: none;
cursor: pointer;
position: absolute;
right: 0;
color: #fff;
}
.top-nav .search-container button:hover {
background: #ccc;
}
/*-----------Top-Nav-Navigation-------- */
.navigation{
width: auto;
float: right;
display: block;
}
.top-nav ul {
float: right;
padding: 35px 0;
margin: 0;
width: auto;
display: block;
}
.top-nav ul li {
list-style: none;
margin: 0 34px;
display: inline-block;
}
.top-nav ul li a {
color: #777;
font-size: 16px;
font-weight: 400;
text-transform: capitalize;
letter-spacing: .5px;
transition: all .9s;
}
.top-nav ul li a:hover {
color: orange;
}
/*-----------Slideshow----------- */
.slideshow-container {
width: 100%;
position: relative;
margin: auto;
float: left;
display: block;
margin-top: 94px;
}
.slideshow-container .slider-text{
width:100%;
float:left;
display:block;
background:#008080;
height:510px;
}
.slideshow-container .slider-text h1 {
d
color: #fff;
font-weight: 400;
text-align: center;
width: 667px;
display: block;
margin: 130px auto auto;
font-size: 35px;
font-weight: 600;
}
.slideshow-container .slider-text p {
color: #fff;
font-size: 17px;
text-align: center;
max-width: 700px;
display: block;
margin: 15px auto auto;
font-weight: 400;
letter-spacing: 0.5px;
}
.slideshow-container .prev, .slideshow-container .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 11px 18px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 48px;
height: 48px;
width: 48px;
background: rgba(0,0,0, 0.4);
}
.slideshow-container .next{
right: 16px;
}
.slideshow-container .prev{
left: 16px;
}
.slideshow-container .prev:hover, .slideshow-container .next:hover {
background-color: rgba(0,0,0,1);
text-decoration:none;
}
.slider-image {
display: flex
}
/*-----------Slideshow-dot----------- */
.dot-area{
width:100%;
float:left;
display:block;
padding:20px 0;
background:orange;
}
.dot-area .dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 5px;
background-color: #f9f9f9;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dot-area .active, .dot-area .dot:hover {
background-color: #008080;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
/*-----------your-name----------- */
.your-area{
width:100%;
float:left;
display:block;
background:#003333;
}
.your-area h1{
padding:100px 0;
font-size:20px;
color:#fff;
text-align: center;
font-weight:600;
}
.your-area h1 span{
color:white;
font-size:20px;
/*:::::::::::::::::Responsive Media Query:::::::::::::::::::*/
#media only screen and (max-width:1279px){
.top-nav ul li {
margin: 0 20px;
}
}
#media only screen and (max-width:1023px){
}
#media only screen and (max-width:979px){
.top-nav {
height: 70px;
}
.top-nav .logo {
height: 70px;
}
.top-nav .search-container {
padding: 13px 0;
}
.top-nav ul li a {
font-size: 14px;
letter-spacing: 0;
}
.top-nav ul {
padding: 24px 0;
}
.slideshow-container {
margin-top: 68px;
}
.slideshow-container .slider-text h1 {
width: 560px;
font-size: 27px;
}
.slideshow-container .slider-text {
height: 400px;
}
}
#media only screen and (max-width:899px){
.slideshow-container .slider-text p {
max-width: 600px;
}
.top-nav ul li {
margin: 0 15px;
}
.your-area h1 {
font-size: 18px;
}
.your-area h1 span{
font-size: 22px;
}
}
#media only screen and (max-width:799px){
}
#media only screen and (max-width:767px){
.top-nav {
height: auto;
}
.top-nav .logo {
height: auto;
border:0;
}
.top-nav .logo img {
width: 180px;
margin: auto;
display:block;
}
.top-nav .search-container {
padding: 0;
}
.navigation {
float: none;
margin: auto;
}
.top-nav ul {
float: none;
padding: 12px 0;
width: auto;
display: table;
margin: auto;
}
.top-nav input[type="text"] {
height: 38px;
}
.top-nav .search-container button {
height: 38px;
}
.slideshow-container {
margin-top: 170px;
}
.slideshow-container .slider-text h1 {
width: 100%;
padding: 0 90px;
}
.slideshow-container .slider-text p {
max-width: 100%;
padding: 0 90px;
}
}
#media only screen and (max-width:639px){
}
#media only screen and (max-width:599px){
.slideshow-container .slider-text h1 {
margin: 65px auto auto;
}
}
#media only screen and (max-width:479px){
.top-nav ul li {
margin: 0 9px;
}
.slideshow-container .slider-text h1 {
padding: 0 85px;
font-size: 16px;
}
.slideshow-container .slider-text p {
padding: 0 78px;
font-size:12px;
}
.slideshow-container .slider-text {
height: 350px;
}
.slideshow-container .slider-text h1 {
margin: 100px auto auto;
}
.your-area h1 {
font-size: 13px;
}
.your-area h1 span {
font-size: 14px;
}
}
#media only screen and (max-width:359px){
.top-nav ul li {
margin: 0 5px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>ElephantRoom</title>
<meta charset="utf-8" />
<meta name"viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,500" />
<link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Top-NAV HTML-->
<section class="top-nav">
<div class="col-md-2 col-sm-2 col-xs-12">
<div class="logo">
<img src="logo.png" alt="ElephantRoom"/>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Keywords.." name="search">
<button type="submit">Search</button>
</form>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="navigation">
<ul>
<li>Become a Host</li>
<li>Help</li>
<li>Sign Up</li>
<li>Log In</li>
</ul>
</div>
</div>
</section>
<section class="slideshow-container">
<div class="mySlides fade">
<div class="slider-image">
<img src="image1.jpg" alt="image1"/>
<div class="slider-text">
<h1><span> why book an expensive hotel when you can book a cheap apartment</span></h1>
<p>Lorem ipsum dolor sit amet, consecteur adipiscing
elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.</p>
</div>
</div>
</div>
</div>
<div class="mySlides fade">
<div class="slider-text">
<h1>We have you covered anywhere you go in Africa</h1>
<p>Lorem ipsum dolor sit amet, consecteur adipiscing
elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.</p>
</div>
</div>
<div class="mySlides fade">
<div class="slider-text">
<h1> We believe in a world with no frontier</h1>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</section>
<section class="dot-area" style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</section>
<section class="your-area" style="text-align:center">
<h1>Designed by <span>Sangbe Torndou Jean Marc</span></h1>
</section>
<!-- javascript import-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
enter image description here

Use css for h1
.slider-text h1 {position:absolute; z-index:9999999}

hey hi here is the solution for u slider with right content:
HTML:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"
rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="holder col-sm-8">
<img class="img-responsive" src="http://placehold.it/1000x400" alt="...">
</div>
<div class="col-sm-4">
<div class="carousel-caption">
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu
pede mollis pretium.</p>
<button type="button" class="btn btn-default">Default</button>
</div>
</div>
</div>
<div class="item">
<div class="holder col-sm-8">
<img class="img-responsive" src="http://placehold.it/1000x400" alt="...">
</div>
<div class="col-sm-4">
<div class="carousel-caption">
<h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<button type="button" class="btn btn-default">Default</button>
</div>
</div>
</div>
<div class="item">
<div class="holder col-sm-8">
<img class="img-responsive" src="http://placehold.it/1000x400" alt="...">
</div>
<div class="col-sm-4">
<div class="carousel-caption">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<button type="button" class="btn btn-default">Default</button>
</div>
</div>
</div>
</div>
<div class="controllers col-sm-8 col-xs-12">
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-
slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-
slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
</div>
CSS:
.carousel-caption {
position: relative;
left: 0%;
right: 0%;
bottom: 0px;
z-index: 10;
padding-top: 0px;
padding-bottom: 0px;
color: #000;
text-shadow: none;
& .btn {
text-shadow: none; // No shadow for button elements in carousel-caption
}
}
.carousel {
position: relative;
}
.controllers {
position: absolute;
top: 0px;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
JAVASCRIPT:
<SCRIPT>
$(window).bind("load resize slid.bs.carousel", function() {
var imageHeight = $(".active .holder").height();
$(".controllers").height( imageHeight );
console.log("Slid");
});
</SCRIPT>
Try this let me know ...

Simple JavaScript/jQuery image slider

I'm trying to make an image slider, that will slide Step 1 to --> Substep 1 --> Substep 2 --> Substep 3 --> Step 1 (right arrow) and backward (left arrow) from Step 1 to --> Substep 3 --> Substep 2 ---> Substep 1 --> Step 1
I've made a jQuery code (which you can see by visiting the jsfiddle link below), but it doesnt work properly and also very laggy and buggy.
I would appreciate any help whether you will correct the existing code or provide the new one.
Thank you.
https://jsfiddle.net/4j58q930/
.step__arrows {
position: absolute;
width: 300px;
padding: 19px 0px;
margin-top: 128px;
z-index: 1;
}
.step__arrows__previous {
width: 71px;
height: 67px;
float: left;
background-image: url('http://rockerbox.com/assets/img/general/left-arrow.png');
background-repeat: no-repeat;
background-position: 50% 50%;
}
.step__arrows__next {
width: 72px;
height: 67px;
float: right;
background-image: url('http://rockerbox.com/assets/img/general/right-arrow.png');
background-repeat: no-repeat;
background-position: 50% 50%;
}
.step__arrows__previous:hover {
background-color: rgba(255, 255, 255, .2);
cursor: pointer;
-webkit-border-radius: 0px 4px 4px 0px;
-moz-border-radius: 0px 4px 4px 0px;
border-radius: 0px 4px 4px 0px;
}
.step__arrows__next:hover {
background-color: rgba(255, 255, 255, .2);
cursor: pointer;
-webkit-border-radius: 4px 0px 0px 4px;
-moz-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
}
.step__info {
position: absolute;
bottom: 0;
}
.step__a {
color: #fff;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
display: inline-block;
background: #ff4e50;
margin-left: 21px;
font-weight: normal;
text-decoration: none;
width: 70px;
height: 20px;
line-height: 21px;
text-align: center;
}
.step__a:hover {
background: #3cb0fd;
}
.step__h2 {
color: #fff;
font-size: 24px;
padding: 15px 19px 9px 19px;
margin: 0;
font-weight: bold;
}
.step__p {
color: #ccc;
margin: 0;
padding: 0px 24px 15px 19px;
font-size: 14px;
font-family: Roboto;
font-weight: 300;
line-height: 1.3em;
}
.step__1 {
float: left;
width: 300px;
height: 400px;
background-image: url('http://images.askmen.com/responsive/channels/cars/car_tips.jpg');
background-size: cover;
position: relative;
}
.slider__1 ul {
margin: 0;
padding: 0;
list-style: none;
}
.slider__1 ul li {
margin: 0;
padding: 0;
}
.slider__1 {
float: left;
width: 300px;
height: 400px;
position: relative;
}
.substep__1 {
float: right;
width: 300px;
height: 400px;
background-image: url('http://static2.consumerreportscdn.org/content/dam/cro/cars/sports/buying_lg_sports_cars.jpg');
background-size: cover;
position: relative;
}
.substep__2 {
float: right;
width: 300px;
height: 400px;
background-image: url('http://i.kinja-img.com/gawker-media/image/upload/texbia6a0wfjdclbjlrw.jpg');
background-size: cover;
position: relative;
}
.substep__3 {
float: right;
width: 300px;
height: 400px;
background-image: url('http://indianautosblog.com/wp-content/uploads/2013/12/2015-Ford-Mustang-front-three-quarters-3-leaked-press-shot.jpg');
background-size: cover;
position: relative;
}
<div class="slider__1">
<div class="step__arrows">
<span class="step__arrows__previous"></span>
<span class="step__arrows__next"></span>
</div>
<ul>
<li class="step__1">
<div class="step__info">
<a class="step__a" href="#">Step 1</a>
<h2 class="step__h2">Lorem ipsum dolor sit amet,</h2>
<p class="step__p">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</li>
<li class="substep__1">
<div class="step__info">
<a class="step__a" href="#">Substep 1</a>
<h2 class="step__h2">In enim justo</h2>
<p class="step__p">Quisque libero libero, dictum non turpis in, luctus semper lorem. Donec rhoncus a leo sit amet facilisis.</p>
</div>
</li>
<li class="substep__2">
<div class="step__info">
<a class="step__a" href="#">Substep 2</a>
<h2 class="step__h2">Nullam dictum</h2>
<p class="step__p">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
</div>
</li>
<li class="substep__3">
<div class="step__info">
<a class="step__a" href="#">Substep 3</a>
<h2 class="step__h2">Aenean vulputate</h2>
<p class="step__p">Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
</div>
</li>
</ul>
</div>

CSS content and menu positioning

http://postimg.org/image/sadzaa0up/
I'm trying to get the JS navigation buttons to fall inline with a full width background/box so the buttons aren't just floating. When I try to set this in the CSS I find the buttons aren't in line with this background/box/container. They sit slightly above it. I've tried altering margins etc but had no luck.
I'm not sure if the issue is related but I'm finding I can't position the nav bar directly beneath the logo container/header. It's being pushed so it's a 150px or so below the logo with a big gap between.
Then finally, the main body content area won't stretch to the width on the left side. I've sorted the right side using margins, yet the left side won't get rid of the gap.
Any help on this is greatly appreciated.
document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='Index.html'>HOME</a></li>" +
"<li><a href='Customers.html'>SECTIONS</a></li>" +
"<li><a href='About.html'>HOWS</a></li>" +
"<li><a href='About.html'>OUR EXPERIENCE</a></li>" +
"<li><a href='About.html'>TESTIMONIALS</a></li>" +
"<li><a href='About.html'>NEWS</a></li>" +
"<li><a href='About.html'>CONTACT US</a></li>" +
"</ul>";
document.getElementById("foot01").innerHTML =
"<p>© lumi " + new Date().getFullYear() + " All rights reserved.</p>";
/* Check how to edit nav main background colour */
#container {
position: absolute;
top: 0px;
left: 0px;
background-color: #73008C;
background-image: url("banner.jpg");
background-size: 100%;
width: 100%;
height: 800px;
content: 60px padding: 5px;
border: 5px #73008C;
margin-left: 0px;
margin-right: 0px;
z-index: -2;
}
#header {
position: absolute;
opacity: 0.6;
background-color: #ffffff;
width: 100%;
height: 90px;
margin: auto;
z-index: -1;
}
#logo {
position: center top;
margin: 0;
z-index: 2;
}
ul#menu {
width: 100%;
height: 50px;
padding: 0px;
border: 0px;
border-color: #374754;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
ul#menu {
position: relative;
background-color: #374754;
padding: 0;
margin-top: 70px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
ul#menu li {
display: inline;
margin-right: 5px;
}
ul#menu li a {
background-color: #374754;
padding: 10px 10px;
text-decoration: none;
color: #ffffff;
border-radius: 4px 4px 4px 4px;
}
ul#menu li a:hover {
color: white;
font-style: bold;
background-color: #d83030;
}
body {
font-family: "Helvetica", Verdana, sans-serif;
font-size: 12px;
background-color: #ffffff;
color: #ffffff;
text-align: center;
padding: 0px;
}
#main {
position: absolute;
top: 600px;
padding: 10px;
padding-left: 200px;
padding-right: 200px;
background-color: #d83030;
background-position: top center;
margin: auto;
}
#h1 {
text-shadow: 5px 5px 5px ##374754;
font-family: Helvetica, sans-serif;
color: #ffffff;
text-align: center;
font-size: 24px;
}
#footer {
position: relative;
color: #ffffff;
margin-bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>LOREM IPSUM</title>
<link href="Site.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="logo">
<img src="logo.png" alt="CROWD" style="width: 305px; height125px">
</div>
<nav id="nav01"></nav>
</div>
<link href="Site.css" rel="stylesheet">
<div id="main">
<h1>Welcome to LOREM</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque est dui, aliquam non auctor eget, maximus eu ligula. Ut sed iaculis elit, ac pharetra sem. Nam ipsum sem, consectetur id bibendum vitae, faucibus at tellus. Mauris aliquam, justo efficitur luctus vehicula, velit arcu efficitur nunc, eu volutpat diam erat ut eros. Vestibulum nec mi tristique, blandit eros sit amet, porttitor urna. Ut vehicula elit ipsum, a rhoncus erat fermentum sed. Suspendisse non diam at ex tincidunt pharetra eu id sem.</h2>
<p>content</p>
<p>content</p>
<p>more content</p>
<p>data (more content)</p>
<footer id="foot01"></footer>
</div>
<script src="Script.js"></script>
</body>
</html>