Develop Reference

Scroll to top on click for a sub drop down menu in html

I like to access content from sub drop down menu immediately without using scroll bar on left hand side as shown in the figure using html
Here is the code I used
<div class="col-sm-12">
<br/>
<button class="collapsible">Drop Down Main</button>
<div class="content"><p></p>
<ul>
<button class="collapsible">Drop Down-1</button>
<div class="content"><p></p>
<p>Line1 </p>
<p>Line 2</p>
<p><b>Line 3</b></p>
</div>
</ul>
<ul>
<button class="collapsible">Drop Down-2</button>
<div class="content"><p></p>
<p>Line1 </p>
<p>Line 2</p>
<p> <b>Line 3</b></p>
</div>
</ul>
<ul>
<button class="collapsible">Drop Down-3</button>
<div class="content"><p></p>
<p>Line1 </p>
<p>Line 2</p>
<p> <b>Line 3</b></p>
</div>
</ul>
<ul>
<button class="collapsible">Drop Down-4</button>
<div class="content"><p></p>
<p>Line1 </p>
<p>Line 2</p>
<p> <b>Line 3</b></p>
</div>
</ul>
</div>
<br/>
This is the style code I used for drop down and sub drop downs.
.collapsible {
background-color: #01579b;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 20px;
}
.active, .collapsible:hover {
background-color: #0043b3;
}
.content {
padding: 0 18px;
max-height: 0px;
overflow: auto;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
Please let me know how we can use html to achieve this. Thanks in advance.

We can use the standard <details> HTML element:
let details = document.querySelectorAll('details>details');
// add toggle event on all sub sections
details.forEach(d => {
d.addEventListener("toggle", event => {
let current = event.target;
// close all others
if (current.open){
details.forEach(e => {
if (current !== e) e.open = false;
});
current.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
}
});
});
body{
padding: 1rem;
}
summary {
background-color: rgb(46, 46, 255);
color: white;
padding: 0.3rem;
cursor: pointer;
}
details>details {
margin-left: 1rem;
}
details>details>summary {
background-color: rgb(86, 86, 245);
}
details>details[open]>summary {
background-color: rgb(105, 166, 245);
}
details .info {
padding: .5rem;
border: 1px solid gray;
}
<details>
<summary>Drop down main</summary>
<details>
<summary>Drop down 1</summary>
<div class="info">ONE Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sunt.</div>
</details>
<details>
<summary>Drop down 2</summary>
<div class="info">TWO Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, illo exercitationem sequi voluptatum tempora minus rem amet magnam. Necessitatibus nihil dolores eaque sed quaerat ducimus aliquid cupiditate impedit quam laboriosam odit sequi,
numquam fuga neque! Optio aut at, omnis quasi amet cum rem id fuga velit error cupiditate commodi neque.</div>
</details>
<details>
<summary>Drop down 3</summary>
<div class="info">THREE Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto ad saepe ex obcaecati expedita nulla, nihil laborum esse excepturi natus amet non eligendi atque sint. Tenetur molestias perspiciatis libero perferendis, autem earum et eius numquam
repellat commodi sint dignissimos veritatis eaque ratione voluptatum nam molestiae voluptatibus ipsum illum! Id dolor quos consequuntur vero cumque tenetur, quaerat quam odit non illum exercitationem voluptates! Minima, quia dolore? Accusamus libero?</div>
</details>
<details>
<summary>Drop down 4</summary>
<div class="info">FOUR Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias cupiditate nobis odio iusto, ratione laborum ipsa tempora eos porro repellat recusandae dolore quasi adipisci explicabo consequuntur omnis eveniet asperiores culpa!</div>
</details>
</details>
We can use Element.scrollIntoView() to bring element in view. Play with the method arguments to get desired results.

You can use html as an anchor tag
like for me a navbar:
html:
<nav class="navbar background h-nav-resp">
<ul class=" navlist v-class-resp">
<li>Home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
</ul>
<div class="rightNav v-class-resp">
<input type="text" name="search" id="search" />
<button class="btn btn-sm">search</button>
</div>
<div class="burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
and then I will just give the ID to every place as In I gave in my nav:
<section class="background firstSection" id="home">
<div class="box-main">
<div class="firsthalf">
<p class="text-big">The future of education is here!</p>
<p class="text-small">
In this country of 7 Billion we need to educate each and all of them
and we are proud to say that The future of education is here.
</p>
<div class="buttons">
<button class="btn">subscribe</button>
<button class="btn">watch video</button>
</div>
<div class="secondhalf">
<img src="img/Laptop.jpg" alt="laptop image" />
</div>
</div>
</div>
</section>
<section class="section" id="about">
<div class="paras">
<p class="SectionTag text-big">The end of your search is here.</p>
<p class="SectionSubTag text-small">
Education is about learning skills and knowledge. It also means
helping people to learn how to do things and support them to think
about what they learn. It's also important for educators to teach ways
to find and use information. Education needs research to find out how
to make it better. It helps people become better citizens, get a
better-paid job, shows the difference between good and bad. Education
shows us the importance of hard work and, at the same time, helps us
grow and develop. Thus, we are able to shape a better society to live
in by knowing and respecting rights, laws, and regulations.
</p>
</div>
<div class="thumbnail">
<img
src="https://source.unsplash.com/random/900×700/?Html"
alt="laptop image"
class="imgfluid"
/>
</div>
</section>
<hr />
<section class="section left" id="services">
<div class="paras">
<p class="SectionTag text-big">When coding meets children in India</p>
<p class="SectionSubTag text-small">
Through coding, students build essential literacy skills, gain an
understanding of logic and sequence, and learn the mechanics of
iteration. These tools support project-based learning and give
students the freedom to create, collaborate, hack, remix, and tinker
with their own unique designs.Coding classes are currently limited to
people with a laptop, internet connection, and paying capacity.
Further, very little content is available in the field which is
suitable for children and apt from the Indian context.
</p>
</div>
<div class="thumbnail">
<img
src="https://source.unsplash.com/random/900×700/?Javascript"
alt="laptop image"
class="imgfluid"
/>
</div>
</section>
<hr />
<section class="section">
<div class="paras">
<p class="SectionTag text-big">Why is programming useful?</p>
<p class="SectionSubTag text-small">
Programming also teaches them how software engineers use math in order
to solve problems in a logical and creative way. This is an important
reason that coding should be taught in schools, so children learn
these skills while they are young.Coding, to put it simply, is using
computer language to tell a computer what to do. The skills necessary
for coding include being able to analyze a problem, break it down,
engage critical thinking, and logic. This “thinking” element is often
referred to as computational thinking.
</p>
</div>
<div class="thumbnail">
<img
src="https://source.unsplash.com/random/900×700/?laptop"
alt="laptop image"
class="imgfluid"
/>
</div>
</section>
<section class="contact" >
<h1 class="text-center" id="contact">Contact Us</h1>
<div class="form">
<input
class="form-input"
type="name"
name="name"
id="name"
placeholder="enter your name"
/>
<input
class="form-input"
type="phone"
name="Phone"
id="phone"
placeholder="enter your phone"
/>
<input
class="form-input"
type="email"
name="email"
id="email"
placeholder="enter your email"
/>
<textarea class="form-input" name="text" id="text" cols="30" rows="10" maxlength="290" wrap="soft" placeholder="Elaborate your concern"></textarea>
<button class="btn btn-dark">Submit</button>
</div>
</section>
<footer class="background">
<p class="text-footer">
Copyright saraswati education-giving eduction online.com © 2022 - All rights reserved
</p>
<div class="designer"><p>Designed and developed by pranjal Rai</p></div>
</footer>
If you click on the link it will scroll at that position but!
add this
css:
html{
scroll-behavior: smooth;
}
It makes it good!

Testimonial slider with object constructor

I would like to have the first testimonial shown when you land on the page without hard coding it in the html. I want the page to land on the first customers object when run.
When this loops over the customers object it doesn't include the hard coded html elements. So I would like it to just have the object constructed shown when the code is run. Obviously I am having trouble forming this question and therefore finding a solution.
(function(){
const customerImage = document.querySelector('#customer-img')
const customerName = document.querySelector('#customer-name')
const customerText = document.querySelector('#customer-text')
const buttons = document.querySelectorAll('.btn')
let index = 0
const customers = []
//Create a new customer using a customer constructor
//Customer Constructor
function Customer(img, name, text) {
this.img = img
this.name = name
this.text = text
}
//Create new customer using the constructor function
function createCustomer(img, name, text) {
let fullImg = `./img/customer-${img}.jpg`
let customer = new Customer(fullImg, name, text)
customers.push(customer)
}
createCustomer(0, 'John', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?')
createCustomer(1, 'Sandy', 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock')
createCustomer(2, 'Amy', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable.')
createCustomer(3, 'Tyrell', 'If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text.')
createCustomer(4, 'Wanda', 'Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.')
buttons.forEach(function(button){
button.addEventListener('click', function(e){
if (e.target.parentElement.classList.contains('prevBtn')){
if(index === 0){
index = customers.length
}
index--
customerImage.src = customers[index].img
customerName.textContent = customers[index].name
customerText.textContent = customers[index].text
}
if (e.target.parentElement.classList.contains('nextBtn')){
index++
if(index === customers.length){
index = 0
}
customerImage.src = customers[index].img
customerName.textContent = customers[index].name
customerText.textContent = customers[index].text
}
})
})
})()
.max-height{
min-height: 100vh;
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) ,url('../img/questionBcg.jpeg')center/cover no-repeat fixed;
}
.title-heading{
color:#f15025;
}
.title-subheading{
color: white;
}
.customer-card{
background: transparent!important;
color:white;
border:0.05rem solid white;
padding-bottom: 1rem;
padding-left: 1rem;
padding-right: 1rem;
position: relative;
}
.img-card{
border-radius: 50%;
margin-bottom: 1rem;
margin-top: -3rem;
}
.star-icon{
color: #f15025;
}
.quote-icon{
font-size: 2rem;
color: #f15025;
}
.prevBtn,.nextBtn{
font-size: 1.5rem;
padding: 0.1rem;
color:#f15025;
border:0.1rem solid #f15025;
display: inline-block;
position: absolute;
padding: 0.4rem;
border-radius: 50%;
transition: all 1s ease-in-out;
}
.prevBtn:hover{
background: #f15025;
color: white;
}
.nextBtn:hover{
background: #f15025;
color: white;
}
.prevBtn{
top: 50%;
left: 0;
transform: translate(-120%,-50%);
}
.nextBtn{
top: 50%;
right: 0;
transform: translate(120%,-50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- main css -->
<link rel="stylesheet" href="css/main.css">
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<!-- font awesome -->
<script src="js/all.js"></script>
<title>Starter Template</title>
<style>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row max-height align-items-center">
<!-- col -->
<div class="col-10 mx-auto col-md-6">
<div class="row">
<div class="col text-center my-5">
<h4 class="title-heading text-uppercase">client</h4>
<h1 class="title-subheading text-uppercase">testimonials</h1>
</div>
</div>
<div class="card my-5 text-center customer-card ">
<img src="img/customer-0.jpg" width="150" id="customer-img" class="img-card mx-auto" alt="">
<h4 id="customer-name" class="text-uppercase">John</h4>
<div class="review-icons my-2">
<span class="star-icon">
<i class="fas fa-star"></i>
</span>
<span class="star-icon">
<i class="fas fa-star"></i>
</span>
<span class="star-icon">
<i class="fas fa-star"></i>
</span>
<span class="star-icon">
<i class="fas fa-star"></i>
</span>
<span class="star-icon">
<i class="fas fa-star-half"></i>
</span>
</div>
<p id="customer-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?</p>
<span class="quote-icon">
<i class="fas fa-quote-left"></i>
</span>
<i class="fas fa-chevron-left"></i>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<!-- end of col -->
</div>
</div>

I put this iffe function at the beginning to fix this problem.
(function(){
var img = document.getElementById('customer-img').src = 'img/customer-0.jpg';
var name = document.getElementById("customer-name")
name.innerHTML = "John";
var text = document.getElementById("customer-text")
text.innerHTML = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?";
})();

How to set a position that changes when the window size changes

I'm creating a web page for my grandpa, and I'm going to have this lil biker dude, that runs across the screen and when hovered over, stops and says"wear a helmet". I got him to move back and forth and it is fixed to the navbar, but the problem is that when the screen size changes, say it's on a smaller phone or computer, then the biker dude turns around at a different spot and it runs infront of the navbar stuff.
here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>CountrySideBycicling</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css">
<script src="https://kit.fontawesome.com/8333c8288f.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- lil dude -->
<h6 id="message"></h6>
<img src="../lil dude/riding.gif" alt="riding" id="riding">
<script>
let message = document.getElementById('message');
let speed = 5;
let lastspeed = 0;
let counter = 0;
let x = 50;
let y = 25;
let mX = 0;
let mY = 0;
//flipping and animating
function move() {
x += speed;
document.getElementById('riding').style.left=(x + "px");
if (x + document.getElementById('riding').style.width >= window.innerWidth - 550) {
speed = -5;
document.getElementById('riding').style.transform="rotateY(150deg)";
}
if (x <= 200) {
speed = 5;
document.getElementById('riding').style.transform="rotateY(0deg)";
}
if (speed == 0) {
document.getElementById('riding').src="../lil dude/stop.gif";
message.style.top = (y - 40 + "px");
message.style.left = (x + 50 + "px");
message.innerHTML = "Wear a Helmet!";
setTimeout(reset, 2000);console.log('hi');
}
else requestAnimationFrame(move);
}
//mouse move collision detection
window.addEventListener('mousemove', function(e) {
mX = e.clientX;
mY = e.clientY;
if (mX >= x && mX <= x + 50 && mY >= y && mY <= y + 40) {
lastspeed = speed || lastspeed;
if (counter == 0) {
slow();
counter = 1;
}
}
console.log(mX + " " + mY)
});
//braking it
function slow() {
document.getElementById('riding').src="../lil dude/brake.gif";
do {
if (speed > 0){
speed -= 0.1;
} else if(speed < 0) {
speed += 0.1;
}
}
while (Math.abs(speed)>0.01);
speed=0;
}
//reset
function reset() {
document.getElementById('riding').src="../lil dude/riding.gif";
message.innerHTML = "";
do {
if (lastspeed > 0) {
speed += 0.1;
} else if (lastspeed < 0) {
speed -= 0.1;
}console.log(lastspeed,speed);
}
while(5-Math.abs(speed) > 0.01);
move();
counter = 0;
}
move();
</script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<!-- logo -->
<img class = "navbar-brand" src="https://w7.pngwing.com/pngs/764/321/png-transparent-bicycle-shop-cycling-logo-fixed-gear-bicycle-cyclist-top-sport-bicycle-logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="brands.html.html">Brands</a>
</li>
</ul>
</div>
</div>
</nav>
<div style="height: 50;"></div>
<div class="jumbotron text-center">
<div class="container">
<div style="height: 25px;"></div>
<h1>CountrySideBycicling</h1>
<div style="height: 25px;"></div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam officiis aperiam temporibus exercitationem hic provident nesciunt,
quod officia neque quam sint dicta, mollitia commodi illo necessitatibus inventore blanditiis eveniet maiores.
</p>
<div style="height: 25px;"></div>
<button class="btn btn-primary">Read More</button>
</div>
</div>
<!-- Page Content -->
<div class="container">
<!-- Heading Row -->
<div class="row align-items-center my-5">
<div class="col-lg-7">
<img class="img-fluid rounded mb-4 mb-lg-0" src="http://placehold.it/900x400" alt="">
</div>
<!-- /.col-lg-8 -->
<div class="col-lg-5">
<h1 class="font-weight-light">Business Name or Tagline</h1>
<p>This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!</p>
<a class="btn btn-primary" href="#">Call to Action!</a>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->
<!-- Call to Action Well -->
<div class="card text-white bg-secondary my-5 py-4 text-center">
<div class="card-body">
<p class="text-white m-0">This call to action card is a great place to showcase some important information or display a clever tagline!</p>
</div>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Content section -->
<section class="py-5">
<div class="container">
<h1>Section Heading</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
</div>
</section>
<!-- Image Section - set the background image for the header in the line below -->
<section class="py-5 bg-image-full" style="background-image: url('https://unsplash.it/1900/1080?image=1081');">
<!-- Put anything you want here! There is just a spacer below for demo purposes! -->
<div style="height: 200px;"></div>
</section>
<!-- Content section -->
<section class="py-5">
<div class="container">
<h1>Section Heading</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
</div>
</section>
<!-- slider -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"></div>
<div id="target" class="carousel-item"></div>
<div class="carousel-item"></div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div style="height: 50px;"></div>
</div>
</div>
<div class="container">
<!-- Content Row -->
<div class="row">
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card One</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
</div>
<div class="card-footer">
More Info
</div>
</div>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card Two</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.</p>
</div>
<div class="card-footer">
More Info
</div>
</div>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card Three</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
</div>
<div class="card-footer">
More Info
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small mdb-color pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Footer links -->
<div class="row text-center text-md-left mt-3 pb-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">CountrySideBycicling</h6>
<p>Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet,
consectetur
adipisicing elit.</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Brand Sites</h6>
<p>
Bikesite
</p>
<p>
Bikesite
</p>
<p>
Bikesite
</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Useful links</h6>
<p>
Gallary
</p>
<p>
Brands
</p>
<p>
About
</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Contact</h6>
<p>
<i class="fas fa-home mr-3"></i> windsor, oh, cox road</p>
<p>
<i class="fas fa-envelope mr-3"></i> grandpa#gmail.com</p>
<p>
<i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
</div>
<!-- Grid column -->
</div>
<!-- Footer links -->
<hr>
<!-- Grid row -->
<div class="row d-flex align-items-center">
<!-- Grid column -->
<div class="col-md-7 col-lg-8">
<!--Copyright-->
<p class="text-center text-md-left">© 2020 Copyright:
<a href="http://www.countrysidebicycling.com/">
<strong>countrysidebicycling.com</strong>
</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-5 col-lg-4 ml-lg-0">
<!-- Social buttons -->
<div class="text-center text-md-right">
<ul class="list-unstyled list-inline">
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-facebook"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-instagram"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-twitter"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-pinterest"></span>
</a>
</li>
</ul>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
</footer>
<script src="jquery.slim.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
here is the css
margin: 0;
padding: 0;
}
div{
width: 100%;
height: 100%;
}
.navbar-default {
background: none;
}
.navbar{
position: fixed;
z-index: 10;
padding: 10px 0 10px 10px;
top: 0;
width: 100%;
}
footer{
background-color:#e6e6e6;
}
.jumbotron{
background-image: url('download.jpeg');
color: white;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
min-height: 400px;
margin-top: 0px;
margin-bottom: 8px;
}
a{
color:#2e5984;
}
.navbar-brand{
height: 60px;
width: 100px;
}
#aboutusimg{
background-size: 100%;
background-image: url(download.jpeg);
background-repeat:no-repeat;
height: 400px;
}
/* slider */
.carousel .carousel-item {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
}
.carousel .carousel-item:first-of-type {
background-image: url('download.jpeg');
}
.carousel .carousel-item:nth-of-type(2) {
background-image: url("download.jpeg");
}
.carousel .carousel-item:last-of-type {
background-image: url("download.jpeg");
}
.carousel-control-prev-icon, .carousel-control-next-icon {
width: 50px;
height: 50px;
}
/* partners slider, about page */
/* carousel */
h2{
text-align:center;
padding: 20px;
}
/* Slider */
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* lil dude */
#riding{
width: 50px;
height: 40px;
z-index: 30;
position: fixed;
top: 25px;
left: 0px;
transform: rotateY(0deg);
}
#message{
color: white;
position: fixed;
top: 0;
left: 0;
}
keep in mind that there are other files, this is just the index.html, so the css has other stuff in it, but the little dude is at the bottom of the css, and before the navbar in the html.

The hardcoded values of 200 and 550 will not work when the navbar dimensions are adjusted for diffeerent size screens. I've changed it to retrieve the offsetWidth and offsetLeft of the (.navbar-toggle button or .nav-item[0]) and .navbar-brand image to bounce back.
body {
margin: 0;
padding: 0;
}
div{
width: 100%;
height: 100%;
}
.navbar-default {
background: none;
}
.navbar{
position: fixed;
z-index: 10;
padding: 10px 0 10px 10px;
top: 0;
width: 100%;
}
footer{
background-color:#e6e6e6;
}
.jumbotron{
background-image: url('download.jpeg');
color: white;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
min-height: 400px;
margin-top: 0px;
margin-bottom: 8px;
}
a{
color:#2e5984;
}
.navbar-brand{
height: 60px;
width: 100px;
}
#aboutusimg{
background-size: 100%;
background-image: url(download.jpeg);
background-repeat:no-repeat;
height: 400px;
}
/* slider */
.carousel .carousel-item {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
}
.carousel .carousel-item:first-of-type {
background-image: url('download.jpeg');
}
.carousel .carousel-item:nth-of-type(2) {
background-image: url("download.jpeg");
}
.carousel .carousel-item:last-of-type {
background-image: url("download.jpeg");
}
.carousel-control-prev-icon, .carousel-control-next-icon {
width: 50px;
height: 50px;
}
/* partners slider, about page */
/* carousel */
h2{
text-align:center;
padding: 20px;
}
/* Slider */
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* lil dude */
#riding{
width: 50px;
height: 40px;
z-index: 30;
position: fixed;
top: 25px;
left: 0px;
transform: rotateY(0deg);
}
#message{
color: white;
position: fixed;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>CountrySideBycicling</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css">
<script src="https://kit.fontawesome.com/8333c8288f.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- lil dude -->
<h6 id="message"></h6>
<img src="../lil dude/riding.gif" alt="riding" id="riding">
<script>
let message = document.getElementById('message');
let speed = 5;
let lastspeed = 0;
let counter = 0;
let x = 50;
let y = 25;
let mX = 0;
let mY = 0;
//flipping and animating
function move() {
x += speed;
document.getElementById('riding').style.left=(x + "px");
var v=document.getElementsByClassName('navbar-toggler')[0];
if(v&&v.offsetLeft===0) v=document.getElementsByClassName('nav-item')[0];
var w=document.getElementsByClassName('navbar-brand')[0];
if (speed > 0 && x + document.getElementById('riding').style.width >= (v&&(v.offsetLeft-v.offsetWidth))) {
speed = -5;
document.getElementById('riding').style.transform="rotateY(150deg)";
}
if (speed < 0 && x <= (!w||(w.offsetLeft+w.offsetWidth))) {
speed = 5;
document.getElementById('riding').style.transform="rotateY(0deg)";
}
if (speed == 0) {
document.getElementById('riding').src="../lil dude/stop.gif";
message.style.top = (y - 40 + "px");
message.style.left = (x + 50 + "px");
message.innerHTML = "Wear a Helmet!";
setTimeout(reset, 2000);console.log('hi');
}
else requestAnimationFrame(move);
}
//mouse move collision detection
window.addEventListener('mousemove', function(e) {
mX = e.clientX;
mY = e.clientY;
if (mX >= x && mX <= x + 50 && mY >= y && mY <= y + 40) {
lastspeed = speed || lastspeed;
if (counter == 0) {
slow();
counter = 1;
}
}
console.log(mX + " " + mY)
});
//braking it
function slow() {
document.getElementById('riding').src="../lil dude/brake.gif";
do {
if (speed > 0){
speed -= 0.1;
} else if(speed < 0) {
speed += 0.1;
}
}
while (Math.abs(speed)>0.01);
speed=0;
}
//reset
function reset() {
document.getElementById('riding').src="../lil dude/riding.gif";
message.innerHTML = "";
do {
if (lastspeed > 0) {
speed += 0.1;
} else if (lastspeed < 0) {
speed -= 0.1;
}console.log(lastspeed,speed);
}
while(5-Math.abs(speed) > 0.01);
move();
counter = 0;
}
move();
</script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<!-- logo -->
<img class = "navbar-brand" src="https://w7.pngwing.com/pngs/764/321/png-transparent-bicycle-shop-cycling-logo-fixed-gear-bicycle-cyclist-top-sport-bicycle-logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="brands.html.html">Brands</a>
</li>
</ul>
</div>
</div>
</nav>
<div style="height: 50;"></div>
<div class="jumbotron text-center">
<div class="container">
<div style="height: 25px;"></div>
<h1>CountrySideBycicling</h1>
<div style="height: 25px;"></div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam officiis aperiam temporibus exercitationem hic provident nesciunt,
quod officia neque quam sint dicta, mollitia commodi illo necessitatibus inventore blanditiis eveniet maiores.
</p>
<div style="height: 25px;"></div>
<button class="btn btn-primary">Read More</button>
</div>
</div>
<!-- Page Content -->
<div class="container">
<!-- Heading Row -->
<div class="row align-items-center my-5">
<div class="col-lg-7">
<img class="img-fluid rounded mb-4 mb-lg-0" src="http://placehold.it/900x400" alt="">
</div>
<!-- /.col-lg-8 -->
<div class="col-lg-5">
<h1 class="font-weight-light">Business Name or Tagline</h1>
<p>This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!</p>
<a class="btn btn-primary" href="#">Call to Action!</a>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->
<!-- Call to Action Well -->
<div class="card text-white bg-secondary my-5 py-4 text-center">
<div class="card-body">
<p class="text-white m-0">This call to action card is a great place to showcase some important information or display a clever tagline!</p>
</div>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Content section -->
<section class="py-5">
<div class="container">
<h1>Section Heading</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
</div>
</section>
<!-- Image Section - set the background image for the header in the line below -->
<section class="py-5 bg-image-full" style="background-image: url('https://unsplash.it/1900/1080?image=1081');">
<!-- Put anything you want here! There is just a spacer below for demo purposes! -->
<div style="height: 200px;"></div>
</section>
<!-- Content section -->
<section class="py-5">
<div class="container">
<h1>Section Heading</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
</div>
</section>
<!-- slider -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"></div>
<div id="target" class="carousel-item"></div>
<div class="carousel-item"></div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div style="height: 50px;"></div>
</div>
</div>
<div class="container">
<!-- Content Row -->
<div class="row">
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card One</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
</div>
<div class="card-footer">
More Info
</div>
</div>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card Two</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.</p>
</div>
<div class="card-footer">
More Info
</div>
</div>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card Three</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
</div>
<div class="card-footer">
More Info
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small mdb-color pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Footer links -->
<div class="row text-center text-md-left mt-3 pb-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">CountrySideBycicling</h6>
<p>Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet,
consectetur
adipisicing elit.</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Brand Sites</h6>
<p>
Bikesite
</p>
<p>
Bikesite
</p>
<p>
Bikesite
</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Useful links</h6>
<p>
Gallary
</p>
<p>
Brands
</p>
<p>
About
</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Contact</h6>
<p>
<i class="fas fa-home mr-3"></i> windsor, oh, cox road</p>
<p>
<i class="fas fa-envelope mr-3"></i> grandpa#gmail.com</p>
<p>
<i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
</div>
<!-- Grid column -->
</div>
<!-- Footer links -->
<hr>
<!-- Grid row -->
<div class="row d-flex align-items-center">
<!-- Grid column -->
<div class="col-md-7 col-lg-8">
<!--Copyright-->
<p class="text-center text-md-left">© 2020 Copyright:
<a href="http://www.countrysidebicycling.com/">
<strong>countrysidebicycling.com</strong>
</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-5 col-lg-4 ml-lg-0">
<!-- Social buttons -->
<div class="text-center text-md-right">
<ul class="list-unstyled list-inline">
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-facebook"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-instagram"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-twitter"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-pinterest"></span>
</a>
</li>
</ul>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
</footer>
<script src="jquery.slim.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
here is the css

How to change the width of jQuery Skitter.js Slideshow?

I want to change the width and height of skitter jquery slider. I tried to override the default jquery.css by the width 100% with "important!
It is supposed to override the inline rules but i can't control the width and the height. What is the solution for this issue ?
$(function() {
$('#slider').skitter({
theme : 'square',
navigation : true,
label : false,
dots : false,
});
});
height: 600px;
position: relative;
color: #FFF;
overflow: hidden;
}
.skitter,.skitter-square{
width:1300px !important;
margin: 0
}
.container_skitter {
width:1300px !important;
}
.box_skitter {
width:1300px !important;
}
.box_skitter img {
width:1300px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/Normalize.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Poor+Story|Raleway" rel="stylesheet">
<!--
font-family: 'Montserrat', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Poor Story', cursive;
-->
<link href="css/skitter.css" type="text/css" media="all" rel="stylesheet" />
<link rel="stylesheet" href="css/app.css">
<title>Santa</title>
</head>
<body>
<header id="main-header">
<div class="skitter" id="slider">
<ul>
<li>
<a href="#cut">
<img src="images/slide_1.jpg" class="cut" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
<li>
<a href="#swapBlocks">
<img src="images/slide_2.jpg" class="swapBlocks" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
<li>
<a href="#swapBarsBack">
<img src="images/slide_3.jpg" class="swapBarsBack" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
</ul>
</div>
</header>
<!--Scripts-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.skitter.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
As you can see, I can't override the inline style.

You may just override the width of slider as well as corresponding image width.
Fiddle : http://jsfiddle.net/sumeshnu/5n9yz8tg/3/
.skitter,.skitter-square{
width:1300px !important;
margin: 0
}
.container_skitter {
width:1300px !important;
}
.box_skitter {
width:1300px !important;
}
.box_skitter img {
width:1300px !important;
}
#slider{
max-width: 400px !important;
height: 800px;
}
div#slider img {
max-width: 400px!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/skitter-slider#5.1.4/dist/jquery.skitter.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/Normalize.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Poor+Story|Raleway" rel="stylesheet">
<!--
font-family: 'Montserrat', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Poor Story', cursive;
-->
<link href="https://cdn.jsdelivr.net/npm/skitter-slider#5.1.4/dist/skitter.css" type="text/css" media="all" rel="stylesheet" />
<link rel="stylesheet" href="css/app.css">
<title>Santa</title>
<script>
$(document).ready(function(){
$('#slider').skitter({
theme : 'square',
navigation : true,
label : false,
dots : false,
});
});
</script>
</head>
<body>
<header id="main-header">
<div class="skitter" id="slider">
<ul>
<li>
<a href="#cut">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="cut" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
<li>
<a href="#swapBlocks">
<img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" class="swapBlocks" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
<li>
<a href="#swapBarsBack">
<img src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" class="swapBarsBack" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
</ul>
</div>
</header>
</body>
</html>

The use of !important is considered as bad practice. You can simply adjust the Sliders size by setting the desired width to its container.
Here is a working example, where the container element <header> has a size of 50%:
$(function() {
$('#slider').skitter({
theme: 'square',
navigation: true,
label: false,
dots: false,
});
});
header {
width: 50%;
}
<link href="https://cdn.jsdelivr.net/npm/skitter-slider#5.1.4/dist/skitter.css" rel="stylesheet" />
<header id="main-header">
<div class="skitter" id="slider">
<ul>
<li>
<a href="#cut">
<img src="https://www.placehold.it/300x200/023" class="cut" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
<li>
<a href="#swapBlocks">
<img src="https://www.placehold.it/300x200/a04" class="swapBlocks" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
<li>
<a href="#swapBarsBack">
<img src="https://www.placehold.it/300x200/4a0" class="swapBarsBack" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
</ul>
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/thiagosf/SkitterSlideshow#5.1.4/dist/jquery.skitter.min.js"></script>
As suggested in the comments, you can also adjust the sliders width by setting a new max-width. Try to avoid the use of !important and overwrite existing rules with a higher specificity.
Here is a working example using #main-header > .skitter as selector:
$(function() {
$('#slider').skitter({
theme: 'square',
navigation: true,
label: false,
dots: false,
});
});
#main-header > .skitter {
max-width: 50%;
}
<link href="https://cdn.jsdelivr.net/npm/skitter-slider#5.1.4/dist/skitter.css" rel="stylesheet" />
<header id="main-header">
<div class="skitter" id="slider">
<ul>
<li>
<a href="#cut">
<img src="https://www.placehold.it/300x200/023" class="cut" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
<li>
<a href="#swapBlocks">
<img src="https://www.placehold.it/300x200/a04" class="swapBlocks" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
<li>
<a href="#swapBarsBack">
<img src="https://www.placehold.it/300x200/4a0" class="swapBarsBack" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
</ul>
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/thiagosf/SkitterSlideshow#5.1.4/dist/jquery.skitter.min.js"></script>

Adding a custom navbar to an specific section in Fullpage.js

Using Fullpage.js I added a Bootstrap custom navbar inside section 1 for achieving a "our features effect" and when you click on a tab the text inside that section changes.
The Bootstrap code works but I want to set the navbar on the bottom on section 1, but it keeps adding itself to section 0.
What would be the best way to achieve this?
CSS:
#section0 {
background:url("images/vd48-main.jpg") center top no-repeat;
background-image: url("images/vd48-main.jpg");
background-position: fixed;
background-color: #000000;
}
#section1 {
background:url("images/vd48-main.jpg") center top no-repeat;
background-image: url("images/vd48-main.jpg");
background-position: fixed;
}
#section2 img{
margin: 20px 0 0 52px;
background-image: url(images/vd48-main.jpg);
padding: 30% 0 0 0;
}
#section3 img{
bottom: 0px;
position: absolute;
margin-left: -420px;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.twitter-share-button{
position: absolute;
z-index: 99;
right: 149px;
top: 9px;
}
.fp-tooltip{
color: #AAA;
}
#fp-nav span, .fp-slidesNav span{
border-color: #AAA;
}
#fp-nav li .active span, .fp-slidesNav .active span{
background: #AAA;
}
.nav-tabs{
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
}
.bg-inverse{
z-index: 999;
}
HTML:
<ul id="menu">
<li data-menuanchor="firstPage">Visit Counter</li>
<li data-menuanchor="secondPage">Feature Image</li>
<li data-menuanchor="3rdPage">Big Image</li>
<li data-menuanchor="4thpage">Product Specs 1</li>
<li data-menuanchor="4thpage">Product Specs 2</li>
<li data-menuanchor="4thpage">Product Specs 3</li>
<li data-menuanchor="4thpage">Customer Care</li>
<li data-menuanchor="4thpage">Our App</li>
<li data-menuanchor="4thpage">Reservation/Contact</li>
</ul>
<div id="fullpage">
<!-- Section 0 -->
<div class="section" id="section0">
<h1>Van Dutch</h1>
<p>Visit Counter lorem ipsum </p>
</div>
<!--Section 1 -->
<div class="section" id="section1">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="container">
<h2>Dynamic Tabs</h2>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
<!--Section 2 -->
<div class="section" id="section2">
<div class="intro">
<h1>Example</h1>
<p>HTML markup example to define 4 sections.</p>
<img src="imgs/example2.png" alt="example" />
</div>
</div>
<!--Section 3 -->
<div class="section" id="section3">
<div class="intro">
<h1>Working On Tablets</h1>
<p>
Designed to fit to different screen sizes as well as tablet and mobile devices.
<br /><br /><br /><br /><br /><br />
</p>
</div>
<img src="imgs/tablets.png" alt="tablets" />
</div>
<!--Left Sidebar -->
<div id="fp-nav" class="left" style="margin-top: -43.5px;">
<ul>
<li>
<span></span>
<div class="fp-tooltip left">fullPage.js</div>
</li>
<li>
<span></span>
<div class="fp-tooltip left">Powerful</div>
</li>
<li>
<span></span><div class="fp-tooltip left">Amazing</div>
</li>
<li>
<span></span><div class="fp-tooltip left">Simple</div>
</li>
</ul>
</div>

I managed to fix my issue using CSS.
#section1 .nav-tabs{
width: 100%;
position: absolute;
bottom: 0;
}