I made my first responsive navbar and everything is good but when it comes to mobile, when I click on the span I'm unable to view the navbar elements like HOME, ABOUT, etc...
I used HTML , CSS , JavaScript
Now, The problem is with the CSS media query!!
So please help me in fixing this!!!
Here are my codes...
HTML
<!doctype html>
<html lang="en">
<!-- HEAD OF HTML -->
<head>
<!-- Required Meta-tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="theme-color" content="#1C1C1C">
<meta name="description" content="">
<meta name="robots" content="index, follow">
<!-- External CSS files -->
<link rel="stylesheet" href="index_p.css">
<!-- External JavaScript files
<script src="index_p.js"></script> -->
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/5e64d08a4d.js"></script>
<!-- JQuery
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
JQuery Ajax
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<!-- Title -->
<title>Pytheo</title>
<!-- Logo (Favicon) -->
<link rel="icon" href="Logo.png" type="image/x-icon">
</head>
<body>
<!-- HEADER -->
<header>
<!-- NAVBAR -->
<div class="navbar">
<div class="logo">
<h3>Pytheo</h3>
</div>
<a class="span-btn">
<span></span>
<span></span>
<span></span>
</a>
<div class="navBar">
<a class="active" href="#">Home</a>
About
Contact
Author
<span>
<a class="spec" href="#">Articles</a>
</span>
</div>
</div>
</header>
<!-- JAVASCRIPT FILES -->
<!-- JQuery -->
<!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->
<!-- JQuery Ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- External JavaScript files -->
<script src="index_p.js"></script>
</body>
</html>
CSS
/* IMPORTS */
#import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css?family=Alex+Brush|Oleo+Script+Swash+Caps&display=swap');
#import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital#0;1&family=IBM+Plex+Sans+Condensed:ital#0;1&family=IBM+Plex+Sans:ital,wght#0,100;0,400;0,700;1,100;1,400;1,700&family=IBM+Plex+Serif:ital#0;1&display=swap');
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght#0,500;0,600;0,700;1,500;1,600;1,700&display=swap');
/* VARIABLES */
:root {
/* COLORS */
/*Pure Mono*/
--light: #FFFFFF;
--black: #000000;
/*White*/
--primary: #FCFAFF;
--light-primary: #F7F5FA;
--dark-primary: #E4E1E7;
/*Secondary*/
--secondary: #F8FAF5;
--light-secondary: #F3F5F0;
--dark-secondary: #EEF0EB;
/*Grey*/
--light-grey: #D7D9D4;
--dark-grey: #C1BFC4;
/*Dark*/
--dark: #121212;
--light-dark: #505050;
--mid-dark: #323232;
/*Gradient*/
--grad-cyan: #00C6FF;
--grad-blue: #0072FF;
/*Accent*/
--ac-cyan: #00C6FF;
--ac-ltcyan: #52d8ff;
--ac-dkcyan: #007091;
--ac-blue: #0072FF;
--ac-ltblue: #308cff;
--ac-dkblue: #004191;
}
/*___________________________________________________________
HTML Style Configuration
__________________________________________________________*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { scroll-behavior: smooth; }
body {
background: var(--primary);
width: 100%;
/*overflow-wrap: break-word;*/
}
/*___________________________________________________________
Navbar Styling
_____________________________________________________________*/
.navbar {
position: relative;
height: 70px;
top: 0;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
background: var(--light-primary);
}
.logo {
margin-left: 90px;
font-size: 25px;
/*font-family: 'Oleo Script Swash Caps', cursive;*/
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
color: var(--grad-blue);
float: left;
cursor: pointer;
}
.navBar {
position: absolute;
float: right;
right: 80px;
}
.navbar .navBar .active {
background: linear-gradient(to bottom right, #00C6FF, #0072FF);
padding: 6px;
color: var(--light);
/*box-shadow: 0.5px 0.5px 1px var(--ac-cyan);*/
box-shadow: 1px 1px 1px var(--ac-cyan);
}
.navbar .navBar .active:hover {
background: linear-gradient(to bottom right, #00C6FF, #0072FF);
padding: 6px;
color: var(--light);
}
.navbar .navBar span {
margin-left: 8px;
}
.navbar .navBar .spec {
color: var(--light);
/*background: linear-gradient(to bottom right, var(--ac-ltblue), var(--ac-ltcyan));*/
background: var(--ac-blue);
border: none;
border-radius: 10px;
font-size: 14px;
padding: 11px;
margin-left: 16px;
text-transform: uppercase;
box-shadow: 1px 1px 2px var(--ac-cyan);
}
.navbar .navBar .spec:hover {
background: linear-gradient(to bottom right, var(--ac-ltcyan), var(--ac-ltblue));
transition: 0.6s;
}
.navbar .navBar .spec:active {
background: linear-gradient(45deg, var(--ac-dkcyan), var(--ac-dkblue));
}
.navBar a {
color: var(--ac-blue);
margin-left: 20px;
font-size: 0.9em;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
padding: 6px;
}
.navBar a:hover {
background: linear-gradient(to bottom right, var(--grad-cyan), var(--grad-blue));
transition: 0.1s linear;
color: var(--light);
box-shadow: 1px 1px 1px var(--ac-cyan);
}
.navBar a:active {
background: linear-gradient(45deg, var(--ac-ltcyan), var(--ac-ltblue));
/*transition: 0.1s linear;*/
}
.span-btn {
display: none;
position: absolute;
right: 20px;
}
.span-btn:hover > span {
background: var(--ac-ltcyan);
}
.span-btn span {
display: block;
margin: 7px;
width: 40px;
height: 3px;
background: var(--ac-ltblue);
}
#media only screen and (max-width: 840px)
{ .logo {
margin-left: 20px;
margin-right: 50px;
font-size: 30px;
font-family: 'Oleo Script Swash Caps', cursive;
float: left;
cursor: pointer;
}
.navbar {
overflow: auto;
height: 70px;
top: 0;
width: 100%;
margin-left: 3px;
margin-right: 10px;
margin-top: 10px;
display: flex;
align-items: center;
background: var(--secondary);
border-radius: 4px;
}
.navBar {
width: 100%;
right: 0;
top: 80px;
background: var(--secondary);
overflow: hidden;
max-height: 0;
}
.navBar a {
display: block;
text-align: center;
padding: 12px;
margin: 0;
}
.span-btn {
display: block;
cursor: pointer;
}
.show {
max-height: 510px;
}
}
JavaScript
$(".span-btn").on("click", function() {
$('.navbar').toggleClass("show");
});
Your JavaScript is referencing $(".span-button") which doesn't exist in the HTML.
Rename $(".span-button") to $(".span-btn") in your JavaScript.
You are loading 'index_p.js' before your JQuery. JQuery must be loaded first.
"$ is not defined" that means $ is either a variable or a method which you are trying to use before declaring it using var keyword.
you should link jQuery before linking your external js file because if u did the opposite "Which you have done on your code" that will cause "$ is not defined" problem and I recommend you to add the js files at the end of the body so u don't face that error but if u didnt add the files at the end of the body u can use that code :
Try this html code :
<!doctype html>
<html lang="en">
<head>
<!-- Required Meta-tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="theme-color" content="#1C1C1C">
<meta name="description" content="">
<meta name="robots" content="index, follow">
<!-- External CSS files -->
<link rel="stylesheet" href="index_p.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/5e64d08a4d.js"></script>
<!-- Title -->
<title>Pytheo</title>
<!-- Logo (Favicon) -->
<link rel="icon" href="#" type="image/x-icon">
</head>
<body>
<header>
<div class="navbar">
<div class="logo">
<h3>Pytheo</h3>
</div>
<a class="span-btn">
<span></span>
<span></span>
<span></span>
</a>
<div class="navBar">
<a class="active" href="#">Home</a>
About
Contact
Author
<span>
<a class="spec" href="#">Articles</a>
</span>
</div>
</div>
</header>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- JQuery Ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- External JavaScript files -->
<script src="index_p.js"></script>
</body>
</html>
you should use this if u imported your external JS at the header:
$(document).ready(function(){
$(".span-button").on("click", function() {
$('.navbar').toggleClass("show");
});
});
For your CSS error try this code :
$(".span-btn").on("click", function() {
$('.navBar').toggleClass("show");
});
/* IMPORTS */
#import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css?family=Alex+Brush|Oleo+Script+Swash+Caps&display=swap');
#import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital#0;1&family=IBM+Plex+Sans+Condensed:ital#0;1&family=IBM+Plex+Sans:ital,wght#0,100;0,400;0,700;1,100;1,400;1,700&family=IBM+Plex+Serif:ital#0;1&display=swap');
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght#0,500;0,600;0,700;1,500;1,600;1,700&display=swap');
/* VARIABLES */
:root {
/* COLORS */
/*Pure Mono*/
--light: #FFFFFF;
--black: #000000;
/*White*/
--primary: #FCFAFF;
--light-primary: #F7F5FA;
--dark-primary: #E4E1E7;
/*Secondary*/
--secondary: #F8FAF5;
--light-secondary: #F3F5F0;
--dark-secondary: #EEF0EB;
/*Grey*/
--light-grey: #D7D9D4;
--dark-grey: #C1BFC4;
/*Dark*/
--dark: #121212;
--light-dark: #505050;
--mid-dark: #323232;
/*Gradient*/
--grad-cyan: #00C6FF;
--grad-blue: #0072FF;
/*Accent*/
--ac-cyan: #00C6FF;
--ac-ltcyan: #52d8ff;
--ac-dkcyan: #007091;
--ac-blue: #0072FF;
--ac-ltblue: #308cff;
--ac-dkblue: #004191;
}
/*___________________________________________________________
HTML Style Configuration
__________________________________________________________*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { scroll-behavior: smooth; }
body {
background: var(--primary);
width: 100%;
/*overflow-wrap: break-word;*/
}
/*___________________________________________________________
Navbar Styling
_____________________________________________________________*/
.navbar {
position: relative;
height: 70px;
top: 0;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
background: var(--light-primary);
}
.logo {
margin-left: 90px;
font-size: 25px;
/*font-family: 'Oleo Script Swash Caps', cursive;*/
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
color: var(--grad-blue);
float: left;
cursor: pointer;
}
.navBar {
position: absolute;
float: right;
right: 80px;
}
.navbar .navBar .active {
background: linear-gradient(to bottom right, #00C6FF, #0072FF);
padding: 6px;
color: var(--light);
/*box-shadow: 0.5px 0.5px 1px var(--ac-cyan);*/
box-shadow: 1px 1px 1px var(--ac-cyan);
}
.navbar .navBar .active:hover {
background: linear-gradient(to bottom right, #00C6FF, #0072FF);
padding: 6px;
color: var(--light);
}
.navbar .navBar span {
margin-left: 8px;
}
.navbar .navBar .spec {
color: var(--light);
/*background: linear-gradient(to bottom right, var(--ac-ltblue), var(--ac-ltcyan));*/
background: var(--ac-blue);
border: none;
border-radius: 10px;
font-size: 14px;
padding: 11px;
margin-left: 16px;
text-transform: uppercase;
box-shadow: 1px 1px 2px var(--ac-cyan);
}
.navbar .navBar .spec:hover {
background: linear-gradient(to bottom right, var(--ac-ltcyan), var(--ac-ltblue));
transition: 0.6s;
}
.navbar .navBar .spec:active {
background: linear-gradient(45deg, var(--ac-dkcyan), var(--ac-dkblue));
}
.navBar a {
color: var(--ac-blue);
margin-left: 20px;
font-size: 0.9em;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
padding: 6px;
}
.navBar a:hover {
background: linear-gradient(to bottom right, var(--grad-cyan), var(--grad-blue));
transition: 0.1s linear;
color: var(--light);
box-shadow: 1px 1px 1px var(--ac-cyan);
}
.navBar a:active {
background: linear-gradient(45deg, var(--ac-ltcyan), var(--ac-ltblue));
/*transition: 0.1s linear;*/
}
.span-btn {
display: none;
position: absolute;
right: 20px;
}
.span-btn:hover > span {
background: var(--ac-ltcyan);
}
.span-btn span {
display: block;
margin: 7px;
width: 40px;
height: 3px;
background: var(--ac-ltblue);
}
#media only screen and (max-width: 840px)
{ .logo {
margin-left: 20px;
margin-right: 50px;
font-size: 30px;
font-family: 'Oleo Script Swash Caps', cursive;
float: left;
cursor: pointer;
}
.navbar {
overflow:visible;
height: 70px;
top: 0;
width: 100%;
margin-left: 3px;
margin-right: 10px;
margin-top: 10px;
display: flex;
align-items: center;
background: var(--secondary);
border-radius: 4px;
}
.navBar {
display:none;
width: 100%;
right: 0;
top: 80px;
background: var(--secondary);
/* max-height: 0;
*/ }
.navBar a {
display: block;
text-align: center;
padding: 12px;
margin: 0;
}
.span-btn {
display: block;
cursor: pointer;
}
.show {
max-height: 510px;
display:block;
}
}
<html lang="en">
<head>
<!-- Required Meta-tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="theme-color" content="#1C1C1C">
<meta name="description" content="">
<meta name="robots" content="index, follow">
<!-- External CSS files -->
<link rel="stylesheet" href="index_p.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/5e64d08a4d.js"></script>
<!-- Title -->
<title>Pytheo</title>
<!-- Logo (Favicon) -->
<link rel="icon" href="#" type="image/x-icon">
</head>
<body>
<header>
<div class="navbar">
<div class="logo">
<h3>Pytheo</h3>
</div>
<a class="span-btn">
<span></span>
<span></span>
<span></span>
</a>
<div class="navBar">
<a class="active" href="#">Home</a>
About
Contact
Author
<span>
<a class="spec" href="#">Articles</a>
</span>
</div>
</div>
</header>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- JQuery Ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- External JavaScript files -->
<script src="index_p.js"></script>
</body>
</html>
The error was here :
.navbar {
overflow: auto;
.navbar {
position: fixed; .
You opened two selectors with the same name and didn't close it.
Related
I'm attempting to implement a simple hamburger icon nav menu for a website I'm developing, but I'm having issues where the contents of the navigation menu are opening/appearing within the navigation menu and not below the nav bar.
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<title>Buck's Farmstand</title>
<link rel="icon" type="image/x-icon" href="G:\webDev\bucks_farmstand\images\tomatoFaviconRounded.ico">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="G:\webDev\bucks_farmstand\css\bucksMobileIndexStyles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="mainPageBody">
<header class="navHeader">
<div class=buttonContainer>
<a class="cta" href="G:\webDev\bucks_farmstand\html\bucksContact.html"><button>Contact</button></a>
</div>
<div class=logoContainer>
<img class="logo" src="G:\webDev\bucks_farmstand\logos\newBucksLogo.jpg" alt="logo">
</div>
<div id="myLinks">
Produce
Online-Order
About
Contact
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="hamIcon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</header>
<br>
</body>
</html>
CSS:
/*overrides everything for specifc page*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
/*background-color: #FFDAB9;*/
overflow: auto;
}
/*referring to all of these categories not specifc to a class/ID*/
li, a, button {
font-family: "cursive", cursive;
font-weight: 500;
font-size: 16px;
color: #000000;
text-decoration: none;
}
/*Bucks Nav CSS*/
/*Can add an href tag/ref here for logo to direct to*/
.logo{
object-fit: cover;
position: relative;
height: 60px;
width: 100%;
cursor: pointer;
}
.logoContainer{
margin: auto;
position: relative;
right: 35px;
}
.navHeader{
position: fixed;
width: 100%;
background: #deb887;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 2%;
height: 65px;
overflow: hidden;
z-index: 950;
}
.navHeader #myLinks{
display: none;
position: relative;
top: 5px;
}
/* Style the hamburger menu */
.hamIcon {
overflow: auto;
background: none;
display: block;
position: fixed;
right: 20px;
top: 23px;
}
.cta{
background: #deb887;
overflow: hidden;
width: 15%;
}
.buttonContainer{
overflow: hidden;
}
button{
padding: 9px 5px;
background-color: rgba(35,255,0,0.5);
border: 2px solid;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: yellow;
}
The issue here is that your <header> class .navHeader is using display: flex; therefore items within that element will act as flex elements. You can read more about those Here
There are a few ways you could go about this.
I think your best solution is to move the <div id="myLinks"></div> block below the header.
Then in your CSS: remove the overflow: auto from *.
Remove the class .navHeader before #myLinks, and add a few more properties to make sure the block is below your header #myLinks{top: 65px; padding: 10px; text-align: center;}
here is the full code:
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<title>Buck's Farmstand</title>
<link rel="icon" type="image/x-icon" href="G:\webDev\bucks_farmstand\images\tomatoFaviconRounded.ico">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="G:\webDev\bucks_farmstand\css\bucksMobileIndexStyles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="mainPageBody">
<header class="navHeader">
<div class=buttonContainer>
<a class="cta" href="G:\webDev\bucks_farmstand\html\bucksContact.html"><button>Contact</button></a>
</div>
<div class=logoContainer>
<img class="logo" src="G:\webDev\bucks_farmstand\logos\newBucksLogo.jpg" alt="logo">
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="hamIcon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</header>
<div id="myLinks">
Produce
Online-Order
About
Contact
</div>
<br>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</body>
</html>
CSS
/*overrides everything for specifc page*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
/*background-color: #FFDAB9;*/
/* overflow: auto; */
}
/*referring to all of these categories not specifc to a class/ID*/
li,
a,
button {
font-family: "cursive", cursive;
font-weight: 500;
font-size: 16px;
color: #000000;
text-decoration: none;
}
/*Bucks Nav CSS*/
/*Can add an href tag/ref here for logo to direct to*/
.logo {
object-fit: cover;
position: relative;
height: 60px;
width: 100%;
cursor: pointer;
}
.logoContainer {
margin: auto;
position: relative;
right: 35px;
}
.navHeader {
position: fixed;
width: 100%;
background: #deb887;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 2%;
height: 65px;
overflow: hidden;
z-index: 950;
}
#myLinks {
display: none;
position: relative;
top: 65px;
text-align: center;
padding: 10px;
width: 100%;
background: #deb887;
}
/* Style the hamburger menu */
.hamIcon {
overflow: auto;
background: none;
display: block;
position: fixed;
right: 20px;
top: 23px;
}
.cta {
background: #deb887;
overflow: hidden;
width: 15%;
}
.buttonContainer {
overflow: hidden;
}
button {
padding: 9px 5px;
background-color: rgba(35, 255, 0, 0.5);
border: 2px solid;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: yellow;
}
I made this "Get Started" button. I want to put it below the title "All memories in one film". I tried aligning it, but it won't work.
* {
margin: 0;
padding: 0;
}
body{
height: 100vh;
width: 50vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(58, 58, 58, 0.75)), url(4kcamera.jpg);
background-size: cover;
background-position: center;
}
nav{
width: 100%;
height: 80px;
position: fixed;
}
.logo{
float: left;
padding: 0 30px;
margin-left: 55px;
margin-right: 30px;
width: 50px;
margin-top: 20px;
}
ul li{
list-style: none;
display: inline-block;
line-height: 90px;
padding: 0 31px;
}
ul{
margin-left: 840px;
}
ul li a{
text-decoration: none;
font-size: 20px;
font-family: 'Roboto Condensed', sans-serif;
color: rgb(250, 250, 250);
}
ul li a:hover {
color: rgb(102, 151, 241);
transition-duration: 0.5s;
}
#text{
transform: uppercase;
color: white;
font-family: 'Poppins', sans-serif;
text-align: center;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 60px;
}
#button1{
background-color: rgb(30, 109, 255);
border: none;
border-radius: 15px 50px;
color: white;
padding: 35px;
margin: 22px;
text-align: center;
font-size: 13px;
font-family: 'Poppins', Helvetica;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PRODUX NA</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel = "stylesheet" type = "text/css" href = "reset.css"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#600&family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#1,300&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<a href="index.html">
<img class="logo" src="1 NA.png" width="50" height="50">
</a>
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li>
Contacts
</li>
<li>
Portfolio
</li>
</ul>
</nav>
<div id="text">
</div>
<script type = "text/javascript">
var i = 0,text;
text = "All your favorite memories in one film."
function typing(){
if(i < text.length){
document.getElementById("text").innerHTML += text.charAt(i);
i++
setTimeout(typing, 50);
}
}
typing();
</script>
<div class="container">
<button id="button1">Get Started</button>
</div>
</body>
</html>
The button is below the javascript function. The id is "button1" and the container's id is just "container". As you can see in the CSS file, I used the text-align command.
In addition, I also tried justifying the content to the center and aligning all the items to the center below the title (uses Javascript function). Help would be appreciated.
I am doing my best to keep the changes true to your project without restructuring your html. Depending on how you are using this, there are better ways to structure your html.
The first thing I did was create a container for the text and button to be nested inside. Then I moved both your text div, and your container div with the button inside this other container. Then, I moved many of your absolute positioning to the #textAndButtonContainer from your #text styling. Then, I used display: flex to allow flexbox styling / centering as I find it is the easiest way to center things.
Hopefully this helps!
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 50vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(58, 58, 58, 0.75)), url(4kcamera.jpg);
background-size: cover;
background-position: center;
}
nav {
width: 100%;
height: 80px;
position: fixed;
}
.logo{
float: left;
padding: 0 30px;
margin-left: 55px;
margin-right: 30px;
width: 50px;
margin-top: 20px;
}
ul li{
list-style: none;
display: inline-block;
line-height: 90px;
padding: 0 31px;
}
ul{
margin-left: 840px;
}
ul li a{
text-decoration: none;
font-size: 20px;
font-family: 'Roboto Condensed', sans-serif;
color: rgb(250, 250, 250);
}
ul li a:hover {
color: rgb(102, 151, 241);
transition-duration: 0.5s;
}
#text{
transform: uppercase;
color: white;
font-family: 'Poppins', sans-serif;
text-align: center;
margin: 0;
font-size: 60px;
}
#textAndButtonContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid red;
}
.container {
display: flex;
justify-content: center;
}
#button1{
background-color: rgb(30, 109, 255);
border: none;
border-radius: 15px 50px;
color: white;
padding: 35px;
margin: 22px;
text-align: center;
font-size: 13px;
font-family: 'Poppins', Helvetica;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PRODUX NA</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel = "stylesheet" type = "text/css" href = "reset.css"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#600&family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#1,300&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<a href="index.html">
<img class="logo" src="1 NA.png" width="50" height="50">
</a>
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li>
Contacts
</li>
<li>
Portfolio
</li>
</ul>
</nav>
<div id="textAndButtonContainer">
<div id="text">
</div>
<div class="container">
<button id="button1">Get Started</button>
</div>
</div>
<script type = "text/javascript">
var i = 0,text;
text = "All your favorite memories in one film."
function typing(){
if(i < text.length){
document.getElementById("text").innerHTML += text.charAt(i);
i++
setTimeout(typing, 50);
}
}
typing();
</script>
</body>
</html>
The main issue is the text which has the position absolute. To position the button below the text, the container which is holding the button must also be positioned absolute. This will in turn align the button as well.
Add this to the style:
.container {
position: absolute;
bottom: -25px;/*give enough space to the text above*/
left: 50%;/*to horizontally center it*/
transform: translateX(-50%);/*to horizontally center it*/
}
This positions the button at the bottom of the text.
Try changing the button's parent div to have a class of text-center, and add a .text-center to your CSS.
So you would have HTML:
<div class="text-center">
<button id="button1">Get Started</button>
</div>
And for your CSS:
.text-center {
text-align: center;
}
I`m trying to add an scroll event listener in JavaScript based on this: https://github.com/Godsont/Animated-Sticky-Header.
But for some reason it isn´t working, when I scroll nothing happens. Can anyone help me pls? I´m new to JavaScript so I want to keep things as simple as possible.
I´m using Google Chrome btw.
I want to add an event on the id = "mainHeader" from Header. When the user scrolls down I want the background to change color, the logo img and the itens from the ul to get a little bit smaller. I also want the height from the header to get a little smaller. (the changes that I want are in the css and have ".is-crolling").
Thanks!
window.addEventListener("scroll", scrollHeader() );
function scrollHeader() {
var mainHeader = document.getElementByID("mainHeader");
if (window.pageYOffset > 0) {
mainHeader.classList.add("is-scrolling");
} else {
mainHeader.classList.remove("is-scrolling");
}
};
#mainHeader {
background-color: white;
position: fixed;
width: 100%;
height: 80px;
z-index: 3;
transition: background 0.4s;
}
#mainHeader.is-scrolling {
background: #333;
}
#mainHeader.is-scrolling a {
color: #eee;
font-size: 13px;
}
#mainHeader.is-scrolling .header-logo img {
width: 60px;
height: 40px;
border-radius: 5px;
}
.page-logo-nav {
margin: 15px 115px 15px 115px;
}
.header-logo img {
float: left;
width: 70px;
height: 50px;
transition: height 0.4s;
}
.header-nav {
float: right;
height: 50px;
display: flex;
align-items: center;
}
.header-nav li {
display: inline;
}
.header-nav .list-1:after {
content: "★";
}
.header-nav a {
color: black;
padding: 20px;
text-decoration: none;
font-weight: 900;
font-size: 15px;
transition: font-size 0.4s;
}
.header-nav a:hover {
color: #6ebbd3;
border-top: 1px solid #266a7e;
border-bottom: 1px solid #266a7e;
transition: 0.3s;
}
<!DOCTYPE html>
<html>
<head>
<title>Stuff</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton%7CMontserrat%7COpen+Sans%3A300%2C300i%2C400%2C400i%2C600%2C600i%2C700%2C700i%2C800%2C800i%7CPT+Sans%3A400%2C700&ver=4.0.31" type="text/css" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="JS/main.js"></script>
</head>
<body>
<header id="mainHeader">
<div class="page-logo-nav">
<div class="header-logo">
<a href="index.html">
<img src="img/logo.jpg">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li class="list-1">SOBRE</li>
<li class="list-2">CONTACTOS</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
I am working on a personal website.
In this site I would like to have the navigation links become active when I scroll to the part of the page relating to that navigation link, all other active links should then have the nav-active class removed.
I have it working partially, the navigation links are highlighting correctly. I do not understand why the active highlighting is not removed when the scrolling moves into the links that are under a div dropdown button.
Can anyone point me in the right direction and also point me to some tutorials/reading (not too advanced) on the relevant information about this issue?
My pen is here:
https://codepen.io/pjsmyth/pen/ZvaZBO/
Thanks in advance
Pete
Code below:
$(document).ready(function() {
var scrollLink = $('.scroll');
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000 );
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
if ( sectionOffset <= scrollbarLocation ) {
$(this).addClass('nav-active');
$(this).siblings().removeClass('nav-active');
$(this).children().removeClass('nav-active');
}
})
})
});
/*
Fonts used in this site
font-family: 'Indie Flower', cursive;
font-family: 'Petit Formal Script', cursive;
font-family: 'Raleway', sans-serif;
font-family: 'Farsan', cursive;
font-family: 'Oleo Script', cursive;
font-family: 'Yeseva One', cursive;
*/
/* CSS custom properties (variables) */
:root {
--orange: #F9A828;
--lightGrey: #ECECEB;
--teal: #07617D;
--darkGreyBlue: #2E383F;
--darkGreyBlueTint: #718A9B;
}
* {
margin: 0px;
padding: 0;
border: none;
font-size: 1em;
/*border: 1px red solid;*/
}
.hidden {
display: none;
}
/*--------- Navigation Area ---------*/
body nav {
height: 5vh;
width: 100%;
font-family: 'Raleway', sans-serif;
position: fixed;
background-color: var(--darkGreyBlue);
color: var(--lightGrey);
z-index: 10;
}
.nav-active {
color: var(--orange) !important;
height: 5vh;
/*border-width: 0;
padding: 0 10px;
float: right;*/
}
/*--------- Navigation Branding Area ---------*/
.branding {
line-height: 5vh;
float: left;
height: 5vh;
padding-left: 5%;
}
.branding i {
float: left;
padding-top: 1.6vh;
color: var(--orange);
}
.branding div {
display: inline;
padding-left: 5px;
}
/*--------- Navigation Links Area ---------*/
.navLinks {
padding-right: 5%;
float: right;
}
.navLinks a {
line-height: 5vh;
float: none;
color: var(--lightGrey);
padding: 0px 10px;
text-decoration: none;
display: inline-block;
text-align: left;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
border: none;
outline: none;
color: var(--lightGrey);
line-height: 5vh;
text-align: left;
background-color: inherit;
min-width: 75px;
padding: 0 10px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: var(--orange);
padding: 0px 10px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: var(--darkGreyBlue);
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown a {
float: none;
height: 5vh;
line-height: 5vh;
text-decoration: none;
background-color: var(--darkGreyBlue);
border-width: 0;
color: var(--lightGrey);
padding: 0 10px;
}
.navLinks a:hover, .dropdown:hover .dropbtn {
color: var(--orange);
/*color: var(--darkGreyBlue);*/
}
/*--------- Splashscreen Area ---------*/
body div.splashScreen {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Raleway', sans-serif;
color: var(--lightGrey);
text-align: center;
}
body div.splashScreen div.splashText {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
body div.splashScreen div.splashText h1 {
font-family: 'Oleo Script', cursive;
font-size: 7em;
padding-bottom: 10px;
}
body div.splashScreen div.splashText a button {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
border: 1px solid var(--lightGrey);
color: var(--lightGrey);
transition: all 0.5s ease-in;
}
body div.splashScreen div.splashText a button:hover {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--lightGrey);
border-radius: 20px;
border: 1px solid var(--darkGreyBlueTint);
color: var(--darkGreyBlueTint);
}
body div.splashScreen div.splashText a button:active {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
color: var(--lightGrey);
}
/*--------- About Area ---------*/
body div.aboutPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.aboutPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Experience Area ---------*/
body div.experiencePage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.experiencePage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Skills Area ---------*/
body div.skillsPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.skillsPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Portfolio Area ---------*/
body div.portfolioPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.portfolioPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Photography Area ---------*/
body div.photographyPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.photographyPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Favourites Area ---------*/
body div.favouritesPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.favouritesPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Personal Website of Pete</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Farsan|Indie+Flower|Oleo+Script:700|Petit+Formal+Script|Raleway|Yeseva+One" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<script src="https://use.fontawesome.com/71da83f6b4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
<!-- Start Navigation Section -->
<nav>
<span class="branding">
<i class="fa fa-hand-peace-o" aria-hidden="true"></i>
<div>Pete Smyth</div>
</span>
<div class="navLinks">
<div class="dropdown">
<button class="dropbtn">Interests <i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-photography">Photography</a>
<a class="scroll" href="#bk-favourites">Favourites</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Resume <i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-resume-experience">Experience</a>
<a class="scroll" href="#bk-resume-skills">Skills</a>
<a class="scroll" href="#bk-resume-portfolio">Portfolio</a>
</div>
</div>
<a class="scroll nav-active" href="#bk-splash">Home</a>
<a class="scroll" href="#bk-about">About</a>
</div>
</nav>
<!-- End Navigation Section -->
<!-- Start Splashscreen Section -->
<div id="bk-splash" class="splashScreen">
<div class="splashText">
<h1>
Pete Smyth
</h1>
<button>Learn More</button>
</div>
<!-- end of splashText class -->
</div>
<!-- End Splashscreen Section -->
<!-- Start About Section -->
<div id="bk-about" class="aboutPage">
<header>
<h1>Here's the Goss</h1>
</header>
</div>
<!-- End About Section -->
<!-- Start Resume Experience Section -->
<div id="bk-resume-experience" class="experiencePage">
<header>
<h1>Pete's Experiences</h1>
</header>
</div>
<!-- End Resume Experience Section -->
<!-- Start Resume Skills Section -->
<div id="bk-resume-skills" class="skillsPage">
<header>
<h1>Pete's Skills</h1>
</header>
</div>
<!-- End Resume Skills Section -->
<!-- Start Portfolio Section -->
<div id="bk-resume-portfolio" class="portfolioPage">
<header>
<h1>Pete's Portfolio</h1>
</header>
</div>
<!-- End Portfolio Section -->
<!-- Start Photography Section -->
<div id="bk-photography" class="photographyPage">
<header>
<h1>Pete's Photography</h1>
</header>
</div>
<!-- End Photography Section -->
<!-- Start Favourites Section -->
<div id="bk-favourites" class="favouritesPage">
<header>
<h1>Pete's Favourites</h1>
</header>
</div>
<!-- End Favourites Section -->
</body>
I think you wish the .dropbtn to highlight when a .scroll under it is highlighted...
There could be a couple ways to do it.
But since the sections (div) have fixed offsets, you can get them all in an array, on load... And then compare them with the scrolled position.
When we have a "match", get its id from another array holding the ids and quit that loop right away.
Here is the script:
$(document).ready(function() {
var scrollLink = $('.scroll');
var dropbtn = $(".dropbtn");
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000 );
});
// Get all section position and id
var sectionArr = [];
var sectionId = [];
$("body>div").each(function(){
console.log($(this).attr("id") + " " + $(this).offset().top);
sectionArr.push($(this).offset().top-20);
sectionId.push($(this).attr("id"));
});
// Add the full page height to the array for the comparison of the last section
sectionArr.push($("body").height());
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
// Remove the class everywhere
scrollLink.removeClass('nav-active');
dropbtn.removeClass('nav-active');
// Compare the scrolled position with the offsets stored in array until we find.
for(i=0;i<sectionArr.length;i++){
var target = $(".scroll[href='#"+sectionId[i]+"']");
// if the scrolled position is more than a section position, BUT less than the next
if(scrollbarLocation>sectionArr[i] && scrollbarLocation<sectionArr[i+1]){
// add the highlight class
target.addClass("nav-active");
if(target.parent().is(".dropdown-content")){
// add the highlight class to the dropdown button
target.closest(".dropdown").find(".dropbtn").addClass('nav-active');
}
break; // Exit the loop on match
}
} // End for loop
}); // End on scroll
}); // End ready
CodePen
Note that you could adjust the "trigger point" so the menu highlighting occurs when more than the half of the section is displayed, which I really think would be nicer!
Just update this line:
sectionArr.push($(this).offset().top-20 - ($(this).height()/2));
That's because your DOM is in the incorrect order. In your DOM, "About" is the last DOM element with .scroll, and since About is also valid for sectionOffset <= scrollbarLocation and is the last item to be processed it overwrites the class manipulation for the other navigation elements that are on screen.
I partially fixed it in this demo here.
Your conditional selection logic is a little confused. The way you have it set up now, if the sectionOffset is less than the scrollbarLocation then you try to set the nav-active class on the current link and remove it from the siblings, children and parent links.
The problem is that if the current link is itself a child link, then the links you want to unset are going to be siblings of the link, siblings of the parent of the link or children of the siblings of the parent link.
You could cover all of those cases manually, but then your code becomes convoluted and brittle. What if, at some point in the future, you want to add additional layers of link nesting? You'd have to manually account for that.
Luckily, since you're already looping through all of your links on a scroll event, there's an easier way. Just check to see if a section has scrolled off of the screen and remove the nav-active class of it's associated link by changing your each callback:
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
var sectionBottom = sectionOffset + $(this.hash).height();
if ( sectionOffset <= scrollbarLocation && sectionBottom >= scrollbarLocation) {
$(this).addClass('nav-active');
} else {
$(this).removeClass('nav-active');
}
})
Updated CodePen
Here it is as a snippet:
$(document).ready(function() {
var scrollLink = $('.scroll');
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000 );
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
var sectionBottom = sectionOffset + $(this.hash).height();
if ( sectionOffset <= scrollbarLocation && sectionBottom >= scrollbarLocation) {
$(this).addClass('nav-active');
} else {
$(this).removeClass('nav-active');
}
})
})
});
/*
Fonts used in this site
font-family: 'Indie Flower', cursive;
font-family: 'Petit Formal Script', cursive;
font-family: 'Raleway', sans-serif;
font-family: 'Farsan', cursive;
font-family: 'Oleo Script', cursive;
font-family: 'Yeseva One', cursive;
*/
/* CSS custom properties (variables) */
:root {
--orange: #F9A828;
--lightGrey: #ECECEB;
--teal: #07617D;
--darkGreyBlue: #2E383F;
--darkGreyBlueTint: #718A9B;
}
* {
margin: 0px;
padding: 0;
border: none;
font-size: 1em;
/*border: 1px red solid;*/
}
.hidden {
display: none;
}
/*--------- Navigation Area ---------*/
body nav {
height: 5vh;
width: 100%;
font-family: 'Raleway', sans-serif;
position: fixed;
background-color: var(--darkGreyBlue);
color: var(--lightGrey);
z-index: 10;
}
.nav-active {
color: var(--orange) !important;
height: 5vh;
/*border-width: 0;
padding: 0 10px;
float: right;*/
}
/*--------- Navigation Branding Area ---------*/
.branding {
line-height: 5vh;
float: left;
height: 5vh;
padding-left: 5%;
}
.branding i {
float: left;
padding-top: 1.6vh;
color: var(--orange);
}
.branding div {
display: inline;
padding-left: 5px;
}
/*--------- Navigation Links Area ---------*/
.navLinks {
padding-right: 5%;
float: right;
}
.navLinks a {
line-height: 5vh;
float: none;
color: var(--lightGrey);
padding: 0px 10px;
text-decoration: none;
display: inline-block;
text-align: left;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
border: none;
outline: none;
color: var(--lightGrey);
line-height: 5vh;
text-align: left;
background-color: inherit;
min-width: 75px;
padding: 0 10px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: var(--orange);
padding: 0px 10px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: var(--darkGreyBlue);
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown a {
float: none;
height: 5vh;
line-height: 5vh;
text-decoration: none;
background-color: var(--darkGreyBlue);
border-width: 0;
color: var(--lightGrey);
padding: 0 10px;
}
.navLinks a:hover, .dropdown:hover .dropbtn {
color: var(--orange);
/*color: var(--darkGreyBlue);*/
}
/*--------- Splashscreen Area ---------*/
body div.splashScreen {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Raleway', sans-serif;
color: var(--lightGrey);
text-align: center;
}
body div.splashScreen div.splashText {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
body div.splashScreen div.splashText h1 {
font-family: 'Oleo Script', cursive;
font-size: 7em;
padding-bottom: 10px;
}
body div.splashScreen div.splashText a button {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
border: 1px solid var(--lightGrey);
color: var(--lightGrey);
transition: all 0.5s ease-in;
}
body div.splashScreen div.splashText a button:hover {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--lightGrey);
border-radius: 20px;
border: 1px solid var(--darkGreyBlueTint);
color: var(--darkGreyBlueTint);
}
body div.splashScreen div.splashText a button:active {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
color: var(--lightGrey);
}
/*--------- About Area ---------*/
body div.aboutPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.aboutPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Experience Area ---------*/
body div.experiencePage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.experiencePage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Skills Area ---------*/
body div.skillsPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.skillsPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Portfolio Area ---------*/
body div.portfolioPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.portfolioPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Photography Area ---------*/
body div.photographyPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.photographyPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Favourites Area ---------*/
body div.favouritesPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.favouritesPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Personal Website of Pete</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Farsan|Indie+Flower|Oleo+Script:700|Petit+Formal+Script|Raleway|Yeseva+One" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<script src="https://use.fontawesome.com/71da83f6b4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
<!-- Start Navigation Section -->
<nav>
<span class="branding">
<i class="fa fa-hand-peace-o" aria-hidden="true"></i>
<div>Pete Smyth</div>
</span>
<div class="navLinks">
<div class="dropdown">
<button class="dropbtn">Interests <i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-photography">Photography</a>
<a class="scroll" href="#bk-favourites">Favourites</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Resume <i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-resume-experience">Experience</a>
<a class="scroll" href="#bk-resume-skills">Skills</a>
<a class="scroll" href="#bk-resume-portfolio">Portfolio</a>
</div>
</div>
<a class="scroll nav-active" href="#bk-splash">Home</a>
<a class="scroll" href="#bk-about">About</a>
</div>
</nav>
<!-- End Navigation Section -->
<!-- Start Splashscreen Section -->
<div id="bk-splash" class="splashScreen">
<div class="splashText">
<h1>
Pete Smyth
</h1>
<button>Learn More</button>
</div>
<!-- end of splashText class -->
</div>
<!-- End Splashscreen Section -->
<!-- Start About Section -->
<div id="bk-about" class="aboutPage">
<header>
<h1>Here's the Goss</h1>
</header>
</div>
<!-- End About Section -->
<!-- Start Resume Experience Section -->
<div id="bk-resume-experience" class="experiencePage">
<header>
<h1>Pete's Experiences</h1>
</header>
</div>
<!-- End Resume Experience Section -->
<!-- Start Resume Skills Section -->
<div id="bk-resume-skills" class="skillsPage">
<header>
<h1>Pete's Skills</h1>
</header>
</div>
<!-- End Resume Skills Section -->
<!-- Start Portfolio Section -->
<div id="bk-resume-portfolio" class="portfolioPage">
<header>
<h1>Pete's Portfolio</h1>
</header>
</div>
<!-- End Portfolio Section -->
<!-- Start Photography Section -->
<div id="bk-photography" class="photographyPage">
<header>
<h1>Pete's Photography</h1>
</header>
</div>
<!-- End Photography Section -->
<!-- Start Favourites Section -->
<div id="bk-favourites" class="favouritesPage">
<header>
<h1>Pete's Favourites</h1>
</header>
</div>
<!-- End Favourites Section -->
</body>
Sample Design -i want to create the video carousel with prev and next arrow slides along with vertical carousel thumbnail slides, I can able to create the video with thumbnail, but couldn't find the option for prev and next arrow. Please help me out.Sample code here.
Thanks in advance,
.template-container{
width: 100%;
height: 100%;
display: block;
position: relative;
margin: 0;
/*background-color: #1a1a1a;*/
overflow-y: hidden;
}
.video-js {
height: 430px;
width: 710px;
float: left;
margin-right: 50px;
}
.myplayer {
width: 70%;
position: relative;
}
.playlist-wrapper {
width: 31%;
height: 100%;
overflow-x: scroll;
}
.vjs-playlist .vjs-playlist-item {
min-height: 130px;
border-bottom: 1px solid #ccc;
margin-bottom: 5px;
}
.vjs-playlist-item.vjs-selected {
background: rgb(89, 44, 54);
}
.vjs-mouse.vjs-playlist .vjs-playlist-description {
white-space: normal;
min-height: 99px;
}
.vjs-mouse.vjs-playlist .vjs-playlist-thumbnail {
height: 68px;
font-size: 13px;
margin-right: 17px;
width: 121px;
}
.vjs-mouse.vjs-playlist {
color: #000000; /* darker blue */
background-color: #fff; /* gray */
}
.vjs-mouse.vjs-playlist .vjs-playlist-description {
color: #466675; /* darker blue */
}
li.vjs-playlist-item {
background-color: #ffffff; /* lighter blue */
}
li.vjs-playlist-item.vjs-selected {
background-color: #FAC8BF; /* pink */
}
/*PLuggin Customiozed code*/
.vjs-playlist{
font-family:"CernLight", Helvetica, Arial,Serif;
}
.vjs-playlist .vjs-selected, .vjs-playlist.vjs-mouse .vjs-selected {
background-color: #e5e5e5;
}
.vjs-mouse.vjs-playlist .vjs-playlist-title-container{
text-shadow: none;
}
.vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-thumbnail img {
opacity: 1;
}
.vjs-playlist img, .vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-thumbnail img {
margin-left: 12px;
margin-top: 40px;
}
.vjs-playlist img {
min-height: 77px;
}
.vjs-playlist-title-container{
top: 0px;
}
.vjs-playlist .vjs-playlist-name{
font-size: 18px;
}
.vjs-playlist-duration, .vjs-mouse.vjs-playlist .vjs-up-next .vjs-up-next-text{
display: none;
}
.vjs-mouse.vjs-playlist .vjs-playlist-thumbnail .vjs-playlist-now-playing-text{
top: 40px;
left: 12px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Video Carousel</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/videojs-bc-playlist-ui.css">
<link rel="stylesheet" href="css/hi-videocarousel.css" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.template-container{
width: 100%;
height: 100%;
display: block;
position: relative;
margin: 0;
/*background-color: #1a1a1a;*/
overflow-y: hidden;
}
.video-js {
height: 430px;
width: 710px;
float: left;
margin-right: 50px;
}
.myplayer {
width: 70%;
position: relative;
}
.playlist-wrapper {
width: 31%;
height: 100%;
overflow-x: scroll;
}
.vjs-playlist .vjs-playlist-item {
min-height: 130px;
border-bottom: 1px solid #ccc;
margin-bottom: 5px;
}
.vjs-playlist-item.vjs-selected {
background: rgb(89, 44, 54);
}
.vjs-mouse.vjs-playlist .vjs-playlist-description {
white-space: normal;
min-height: 99px;
}
.vjs-mouse.vjs-playlist .vjs-playlist-thumbnail {
height: 68px;
font-size: 13px;
margin-right: 17px;
width: 121px;
}
.vjs-mouse.vjs-playlist {
color: #000000; /* darker blue */
background-color: #fff; /* gray */
}
.vjs-mouse.vjs-playlist .vjs-playlist-description {
color: #466675; /* darker blue */
}
li.vjs-playlist-item {
background-color: #ffffff; /* lighter blue */
}
li.vjs-playlist-item.vjs-selected {
background-color: #FAC8BF; /* pink */
}
/*PLuggin Customiozed code*/
.vjs-playlist{
font-family:"CernLight", Helvetica, Arial,Serif;
}
.vjs-playlist .vjs-selected, .vjs-playlist.vjs-mouse .vjs-selected {
background-color: #e5e5e5;
}
.vjs-mouse.vjs-playlist .vjs-playlist-title-container{
text-shadow: none;
}
.vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-thumbnail img {
opacity: 1;
}
.vjs-playlist img, .vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-thumbnail img {
margin-left: 12px;
margin-top: 40px;
}
.vjs-playlist img {
min-height: 77px;
}
.vjs-playlist-title-container{
top: 0px;
}
.vjs-playlist .vjs-playlist-name{
font-size: 18px;
}
.vjs-playlist-duration, .vjs-mouse.vjs-playlist .vjs-up-next .vjs-up-next-text{
display: none;
}
.vjs-mouse.vjs-playlist .vjs-playlist-thumbnail .vjs-playlist-now-playing-text{
top: 40px;
left: 12px
}
</style>
</head>
<body>
<section>
<div class="template-container" style="background-color: ">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="template-container">
<!-- ###################Modal popup Code to implement in the componenet starts Here-->
<div class="myplayer">
<h2 class="text-center">Video</h2>
<div id="carousel-outer-container">
<div id="feature-carousel-container" class="well well-small">
<div id="feature-carousel" class="carousel"></div>
<div id="carousel-left">
<img src="http://solutions.brightcove.com/bcls/scripts/jQuery-Feature-Carousel/images/arrow-left.png" />
</div>
<div id="carousel-right">
<img src="http://solutions.brightcove.com/bcls/scripts/jQuery-Feature-Carousel/images/arrow-right.png" />
</div>
</div>
</div>
<video id="myPlayerID"
data-playlist-id="5455901760001"
data-account="1507807800001"
data-player="SyMOsyA-W"
data-embed="default"
data-application-id
class="video-js"
controls></video>
<script src="https://players.brightcove.net/1507807800001/SyMOsyA-W_default/index.min.js"></script>
<script type="text/javascript">
videojs('myPlayerID').ready(function(){
var myPlayer = this;
myPlayer.playlist.repeat(true);
console.log('myPlayer.repeat()',myPlayer.playlist.repeat());
});
</script>
</div>
<div class="playlist-wrapper">
<h4>Other Videos</h4>
<ol class="vjs-playlist vjs-csspointerevents vjs-mouse"></ol>
</div>
<!-- ###################Modal popup Code Ends Here-->
</div>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Prabhu Shanmugamenter code here