I am currently in the process of making an old website responsive. I have now installed a tabbed image gallery with which I can display an image in a section with a click-action.
However, I now have the problem that if no image was clicked beforehand, no image is displayed.
I would like to have a placeholder img but I don't know how to do it with a JS function.
I also have some bugs when I change the window size.
From width: 469px and below height: 481px I have the problem that my hidden sidebar is displayed behind my pictures.
Unfortunately, I'm not sure how I can set exactly that with breakpoints so that this error is not displayed between the mobile version of the site and the desktop version.
I'm grateful for any help!
with kind regards
And sorry for the long code...
Unfortunately, I wasn't sure what might and might not be relevant.
I'm quite willing to make a small payment if these bugs can be fixed if allowed on this site.
body {
margin: 60px;
width: auto;
}
p {
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-decoration: underline;
}
a:hover {
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-decoration: none;
}
.sidebar {
margin: 0;
padding: 0;
text-align: left;
width: 100%;
background-color: transparent;
position: fixed;
height: 100%;
overflow: auto;
list-style-type: none;
font-size: 14px !important;
}
.sidebar a {
display: block;
color: #999999;
padding: 8px;
text-decoration: none;
list-style-type: none;
line-height: 0.7em;
font-weight: 500;
}
.sidebar li {
list-style: none;
text-decoration: none;
}
.sidebar a.active {
background-color: transparent;
color: #4d4d4d;
list-style-type: none;
}
.sidebar a:hover:not(.active) {
background-color: transparent;
color: rgb(49, 49, 49);
}
.figure {
margin: 0;
}
.figure img {}
.figure figcaption {
margin-left: 10px;
}
.figure figcaption a {
background-color: transparent;
color: #4d4d4d;
list-style-type: none;
}
.caption p {
color: #999999;
font-size: 13px;
text-decoration: none;
}
caption {
text-decoration: none;
}
#media screen and (max-width: 768px) {
body {
margin: 20px;
}
div.content {
margin-left: 0;
}
div.preview {
margin-left: 0;
}
.caption {
text-align: center !important;
}
.containerCarousel {
margin-top: 0px;
margin-bottom: 150px;
width: 1fr;
}
}
#LP_img {
align-content: center;
margin: 0 auto;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 10%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 15px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 40px;
}
#media screen and (max-height: 480px) {
body {
margin: 20px;
}
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 20px;
top: 15px;
right: 35px;
}
.content {
margin-top: 10px !important;
}
.preview {
margin-top: 10px !important;
}
.caption {
text-align: center !important;
}
}
::-moz-selection {
color: white;
background: rgb(236, 101, 159);
;
}
::selection {
color: white;
background: rgb(236, 101, 159);
;
}
/* TEST gallery */
.column {
float: left;
width: 25%;
padding: 20px;
margin-top: 300px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
.img-thumbnail-desktop {
width: 70px;
}
.img-thumbnail-mobile {
max-width: 40px;
}
#expandedImg {
max-height: 800px;
margin: auto 0;
}
<!doctype html>
<html lang="en">
<head>
<title>Christoph Urwalek</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<!-- START Mobile Nav-->
<div id="myNav" class="overlay">
×
<div class="overlay-content">
painting
drawing
collage
video
current
text
biography
contact
</div>
</div>
<!-- END Mobile Nav-->
<span class="d-xl-none" style="font-size:30px;cursor:pointer; color: #4d4d4d;" onclick="openNav()">☰ <font size="-1"><b>Christoph Urwalek</b></font></span>
<!--START Wrapper-->
<div class="container-fluid my-container align-items-center">
<!--START Sidebar -->
<div class="row my-row">
<div class="col-md-3 ">
<nav class="sidebar-header sidebar">
<li><a class="active" href="./../index.html"><b>Christoph Urwalek</b></a></li>
<li>painting</li>
<li>drawing</li>
<li>collage</li>
<li>video</li>
<li>
<a> </a>
</li>
<li>current</li>
<li>text</li>
<li>biography</li>
<li>contact</li>
<br>
<br>
<!--START Thumbnaill Navbar-->
<img src="../../assets/img/thumbnails/Apelles_230x177cm_2020__.jpg" alt="apelles" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">
<img src="../../assets/img/thumbnails/Psychologische-Raumforschung-02_.jpg" alt="apelles" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">
<br>
<img src="../../assets/img/thumbnails/Auge_IV_33x33cm_2019_.jpg" alt="apelles" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">
<img src="../../assets/img/thumbnails/Rote_Flagge_Wand_2019.jpg" alt="apelles" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">
<!--END Thumbnaill Navbar-->
<div>
</nav>
</div>
<!--END Sidebar -->
<!--START Wandcollage-->
<div class="col-md-9 ">
<!--main content-->
<div class="container expandedImgSize justify-content-center">
<span onclick="this.parentElement.style.display='none'"></span>
<img id="expandedImg">
<div id="imgtext">
<!--TEXT EINFÜGEN-->
</div>
</div>
</div>
<!--col-md-9-->
</div>
</div>
<!--END Wrapper-->
<script type="">
function openNav() { document.getElementById("myNav").style.width = "100%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; } function myFunction(imgs) { var expandImg = document.getElementById("expandedImg"); var imgText
= document.getElementById("imgtext"); expandImg.src = imgs.src; //imgText.innerHTML = imgs.alt; expandImg.parentElement.style.display = "block"; }
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>
Related
I would like to have a thumbnail with a caption on the right side when the screen is over X px.
I tried it with and figcaption, but I didn't manage it yet..
here is my attempt:
<style type="text/css">
body {
margin: 30px;
}
.my-container {
border: 1 px solid green;
}
.my-row {
position: relative;
align-content: center;
}
.my-col {
border: 3px dotted blue;
}
.sidebar {
margin: 0;
padding: 0;
text-align: left;
width: 100%;
background-color: transparent;
position: fixed;
height: 100%;
overflow: auto;
list-style-type: none;
font-size: 14px !important;
}
.sidebar a {
display: block;
color: #666666;
padding: 8px;
text-decoration: none;
list-style-type: none;
}
.sidebar li {
list-style: none;
text-decoration: none;
}
.sidebar a.active {
background-color: transparent;
color: #4d4d4d;
list-style-type: none;
}
.sidebar a:hover:not(.active) {
background-color: transparent;
color: rgb(49, 49, 49);
}
#media screen and (min-width: 768px) {
.d-xl-none {
display: none;
}
}
#media screen and (max-width: 768px) {
div.content {
margin-left: 0;
}
div.preview {
margin-left: 0;
}
.sidebar {
height: 100%;
position: relative;
text-align: center;
margin-bottom: 0px !important;
display: none;
}
.sidebar a {
float: left;
align-items: center;
}
.caption {
text-align: center !important;
}
.containerCarousel {
margin-top: 0px;
margin-bottom: 150px;
width: 1fr;
}
}
#LP_img {
align-content: center;
margin: 0 auto;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 10%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 15px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 40px;
}
#media screen and (max-height: 480px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 20px;
top: 15px;
right: 35px;
}
.sidebar a {
text-align: center;
float: none;
}
.sidebar {
display: none;
}
.content {
margin-top: 10px !important;
}
.preview {
margin-top: 10px !important;
}
.caption {
text-align: center !important;
}
}
.PreviewImg {}
</style>
<!doctype html>
<html lang="en">
<head>
<title>Christoph Urwalek</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- START Mobile Nav-->
<div id="myNav" class="overlay">
×
<div class="overlay-content">
painting
drawing
collage
video
current
text
biography
contact
</div>
</div>
<!-- END Mobile Nav-->
<span class="d-xl-none" style="font-size:30px;cursor:pointer; color: #4d4d4d;" onclick="openNav()">☰ <font
size="-1"><b>Christoph Urwalek</b></font></span>
<!--START Wrapper-->
<div class="container-fluid my-container align-items-center">
<!--START Sidebar -->
<div class="row my-row">
<div class="col-md-3 ">
<nav class="sidebar-header sidebar">
<li><a class="active" href="./hungabunga.html"><b>Christoph Urwalek</b></a></li>
<li>painting</li>
<li>drawing</li>
<li>collage</li>
<li>video</li>
<li><a> </a></li>
<li>current</li>
<li>text</li>
<li>biography</li>
<li>contact</li>
</nav>
</div>
<!--END Sidebar -->
<!--START Wandcollage-->
<div class="col-md-9 ">
<figure class="figure">
<img src="http://christophurwalek.at/index/Wandcollage.jpg"
class="img-thumbnail figure-img img-fluid rounded" alt="wandcollage">
<figcaption class="figure-caption">wandcollage 100x100</figcaption>
</figure>
<figure class="figure">
<img src="http://www.christophurwalek.at/canvaswork/2020_Apelles/image_2020_Apelles/Apelles_230x177cm_2020__.jpg"
class="img-thumbnail figure-img img-fluid rounded" alt="wandcollage">
<figcaption class="figure-caption">wandcollage 100x100</figcaption>
</figure>
</div>
</div>
</div>
<!--END Wrapper-->
<script type="">
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>
It would be ideal if the captions of the thumbnails on the desktop look like this:
Screenshot
and if the user uses a mobile device the caption should be on the bottom of the image centered horizontally.
I'll try to solve this on my own but would be glad if someone could help me :)
Thanks in advance,
Below is the code for my website. I am working on it to make the navbar responsive. But in the small screen size, the navbar button acts weirdly, as soon as I click on it it redirects to the top instead of showing the list items. Instead what I want it to do is to expand and show all the other list items of the navbar. But I am unable to do so. Can someone help me with this?
function responsiveNavbar() {
let navItems = document.querySelectorAll(".navbar li");
if (navItems[1].classList == "responsive-navbar") {
navItems.forEach(function(navItem) {
navItem.classList.remove(" responsive-navbar");
});
} else {
navItems.forEach(function(navItem) {
navItem.classList.add("responsive-navbar");
});
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
body {
box-sizing: inherit;
color: #777;
background-color: #E0E2DB;
font-family: 'Roboto', sans-serif;
font-size: 1.8rem;
font-weight: 400;
line-height: 1.5;
scroll-behavior: inherit;
}
.clearfix {zoom: 1;}
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* ------------------------------------- */
/* THE REUSABLE CONTENT */
/* ------------------------------------- */
/* Grids */
.row {
width: 80%;
margin: 0 auto;
}
.span-1-of-2 {
width: 48%;
float: left;
}
/* HTML contents */
h1, h2.header-heading, h2, h3, h5 {
margin: 0;
text-transform: uppercase;
}
h1 {
font-size: 4.5rem;
color: #E0E2DB;
letter-spacing: .4rem;
word-spacing: .5rem;
font-weight: 300;
}
h2 {
font-size: 3.5rem;
color: #3D348B;
letter-spacing: .3rem;
}
h3 {
font-size: 2.6rem;
color: #000;
}
h4 {
font-size: 2.2rem;
color: #E0E2DB;
}
h5 {
font-size: 2rem;
margin-bottom: .5rem;
color: #191716;
}
/* Links */
a {
text-decoration: none;
display: inline-block;
}
/* Icons */
.icon-small {
font-size: 2rem;
color: #3D348B;
margin-right: 1rem;
}
/* Buttons */
.btn {
border: 1px solid #E6AF2E;
border-radius: .3rem;
font-size: 1.6rem;
padding: 1.2rem 3.5rem;
text-transform: uppercase;
color: #E0E2DB;
background-color: transparent;
font-weight: bold;
letter-spacing: .3rem;
transition: all .3s;
}
.btn:hover {
background-color: #E6AF2E;
color: #191716;
}
.btn2 {
background-color: #3D348B;
color: #E0E2DB;
border: 1px solid #3D348B;
border-radius: .3rem;
font-size: 1.6rem;
padding: 1.2rem 3.5rem;
text-transform: uppercase;
font-weight: bold;
letter-spacing: .3rem;
transition: all .3s;
}
.btn2:hover {
background-color: #E0E2DB;
color: #191716;
}
/* Utility classes */
.u-margin-top-small {
margin-top: 2.5rem;
}
.u-margin-top-medium {
margin-top: 5rem;
}
.u-margin-top-big {
margin-top: 7.5rem;
}
.u-margin-bottom-small {
margin-bottom: 2rem;
}
.u-margin-bottom-medium {
margin-bottom: 4rem;
}
.u-text-align-center {
text-align: center;
}
.u-inline-block {
display: inline-block;
}
/* ------------------------------------- */
/* THE HEADER SECTION */
/* ------------------------------------- */
header {
background-color: #3D348B;
height: 100vh;
}
.hero-text-box {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
h2.header-heading {
font-size: 3.5rem;
margin-top: 2rem;
color: #E6AF2E;
font-weight: 400;
}
h2.slogan {
color: #E6AF2E;
font-size: 2.8rem;
font-weight: 400;
}
/* ------------------------------------- */
/* THE NAVBAR */
/* ------------------------------------- */
.navigation {
position: relative;
border-bottom: .5px solid #777;
transition: all .5s;
}
.logo-box {
float: left;
}
.logo img {
width: 6rem;
height: auto;
margin-left: 2rem;
border-radius: 50%;
}
nav {
padding: .5rem;
}
.navbar {
float: right;
list-style: none;
margin-right: 10rem;
margin-top: 1.5rem;
}
.navbar li {
display: inline-block;
}
.navbar li a {
margin: 0 1rem;
padding: .2rem .6rem;
color: black;
text-transform: uppercase;
border-bottom: 2px solid transparent;
transition: all .3s;
}
.navbar li a:hover {
border-bottom: 2px solid #E6AF2E;
transition: all .3s;
}
.navbar .nav-icon {
display: none;
transition: all .3s;
}
/* The sticky navbar */
.sticky {
position: fixed;
background-color: #3D348B;
top: 0;
width: 100%;
box-shadow: 0 .2rem .3rem rgba(0, 0, 0, .5);
}
.sticky .navbar-lists {
color: #E0E2DB;
}
.sticky .logo {
color: #E0E2DB;
}
/* Responsive navbar */
.responsive-navbar {
display: block;
text-align: right;
}
/* ------------------------------------- */
section {
padding: 8rem;
}
/* ------------------------------------- */
/* ------------------------------------- */
/* THE ABOUT SECTION */
/* ------------------------------------- */
.about-section {
padding: 0;
margin-top: 12rem;
}
.long-text {
width: 70%;
margin: 2.5rem auto 0;
}
.profile-image {
height: 35rem;
width: auto;
}
.my-info-img {
text-align: right;
padding-right: 15rem;
}
.my-info-list {
list-style: none;
}
.my-info-list > li {
margin-bottom: 1.2rem;
}
/* ------------------------------------- */
/* MEDIA QUERIES SECTION */
/* ------------------------------------- */
#media only screen and (max-width: 720px) {
html {
font-size: 50%;
}
.remove-heading {
display: none;
}
.logo img {
width: 5rem;
margin-top: 1rem;
}
/* Responsive navbar */
.navbar li {
display: none;
}
.navbar .nav-icon {
color: #000;
display: block;
font-size: 20px;
}
.sticky .navbar .nav-icon {
display: block;
color: #fff;
font-size: 20px;
}
.navbar .nav-icon:hover {
color: #2f2f2f;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Favicon link -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Icons link -->
<script src="https://kit.fontawesome.com/4e3ab997f9.js" crossorigin="anonymous"></script>
<!-- Rubik font link -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;700&display=swap" rel="stylesheet">
<!-- CSS links -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<title>Arun Bohra - Design Business Solutions</title>
</head>
<body>
<header id="header">
<div class="hero-text-box u-text-align-center u-inline-block">
<h1><span class="remove-heading">Hello</span> I'm Arun</h1>
<h2 class="header-heading u-margin-top-small">I'm a front-end developer</h2>
<h2 class="slogan u-margin-top-small">Design business solutions</h2>
Who am I
</div>
</header>
<div class="navigation">
<nav class="clearfix">
<div class="logo-box">
<a href="#header" class="logo">
<img src="img/logo.png" alt="logo">
</a>
</div>
<ul class="navbar">
<i class="fas fa-bars" id="responsive-nav-btn"></i>
<li>Home</li>
<li>About me</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="about-section" id="about">
<h2 class="u-text-align-center">Who am I</h2>
<p class="long-text u-text-align-center">I am a web designer and web developer. I design the webiste according to the needs of today's businesses. I do care a lot about the designs with a modern look and feel.</p>
<div class="row clearfix u-margin-top-big my-info-box">
<div class="span-1-of-2 my-info-img">
<img src="img/profile.png" alt="Profile image" class="profile-image">
</div>
<div class="span-1-of-2 my-info-text">
<h3 class="u-margin-bottom-medium">I design awesome websites</h3>
<ul class="my-info-list u-margin-bottom-medium">
<li><i class="fas fa-check-circle icon-small"></i>I can design awesome websites.</li>
<li><i class="fas fa-check-circle icon-small"></i>I can code the designed websites.</li>
<li><i class="fas fa-check-circle icon-small"></i>I deliver the work very fast.</li>
<li><i class="fas fa-check-circle icon-small"></i>I make very precise revisions.</li>
</ul>
Download CV
</div>
</div>
</section>
</body>
</html>
You can use onclick(event) to help locate the clicked item, and find its all siblings.
classList is a list, which can't be compared with ==, but with contains().
My snippet can switch the "responsive-navbar" class for the li elements, but the css classes may be missing some properties. I'm not sure.
function responsiveNavbar(e) {
e.preventDefault();
let navItem = e.target.parentNode.nextElementSibling;
while(navItem && navItem.tagName.toLowerCase() == 'li'){
if (navItem.classList.contains("responsive-navbar")) {
navItem.classList.remove("responsive-navbar");
} else {
navItem.classList.add("responsive-navbar");
}
navItem = navItem.nextElementSibling;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
body {
box-sizing: inherit;
color: #777;
background-color: #E0E2DB;
font-family: 'Roboto', sans-serif;
font-size: 1.8rem;
font-weight: 400;
line-height: 1.5;
scroll-behavior: inherit;
}
.clearfix {zoom: 1;}
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* ------------------------------------- */
/* THE REUSABLE CONTENT */
/* ------------------------------------- */
/* Grids */
.row {
width: 80%;
margin: 0 auto;
}
.span-1-of-2 {
width: 48%;
float: left;
}
/* HTML contents */
h1, h2.header-heading, h2, h3, h5 {
margin: 0;
text-transform: uppercase;
}
h1 {
font-size: 4.5rem;
color: #E0E2DB;
letter-spacing: .4rem;
word-spacing: .5rem;
font-weight: 300;
}
h2 {
font-size: 3.5rem;
color: #3D348B;
letter-spacing: .3rem;
}
h3 {
font-size: 2.6rem;
color: #000;
}
h4 {
font-size: 2.2rem;
color: #E0E2DB;
}
h5 {
font-size: 2rem;
margin-bottom: .5rem;
color: #191716;
}
/* Links */
a {
text-decoration: none;
display: inline-block;
}
/* Icons */
.icon-small {
font-size: 2rem;
color: #3D348B;
margin-right: 1rem;
}
/* Buttons */
.btn {
border: 1px solid #E6AF2E;
border-radius: .3rem;
font-size: 1.6rem;
padding: 1.2rem 3.5rem;
text-transform: uppercase;
color: #E0E2DB;
background-color: transparent;
font-weight: bold;
letter-spacing: .3rem;
transition: all .3s;
}
.btn:hover {
background-color: #E6AF2E;
color: #191716;
}
.btn2 {
background-color: #3D348B;
color: #E0E2DB;
border: 1px solid #3D348B;
border-radius: .3rem;
font-size: 1.6rem;
padding: 1.2rem 3.5rem;
text-transform: uppercase;
font-weight: bold;
letter-spacing: .3rem;
transition: all .3s;
}
.btn2:hover {
background-color: #E0E2DB;
color: #191716;
}
/* Utility classes */
.u-margin-top-small {
margin-top: 2.5rem;
}
.u-margin-top-medium {
margin-top: 5rem;
}
.u-margin-top-big {
margin-top: 7.5rem;
}
.u-margin-bottom-small {
margin-bottom: 2rem;
}
.u-margin-bottom-medium {
margin-bottom: 4rem;
}
.u-text-align-center {
text-align: center;
}
.u-inline-block {
display: inline-block;
}
/* ------------------------------------- */
/* THE HEADER SECTION */
/* ------------------------------------- */
header {
background-color: #3D348B;
height: 100vh;
}
.hero-text-box {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
h2.header-heading {
font-size: 3.5rem;
margin-top: 2rem;
color: #E6AF2E;
font-weight: 400;
}
h2.slogan {
color: #E6AF2E;
font-size: 2.8rem;
font-weight: 400;
}
/* ------------------------------------- */
/* THE NAVBAR */
/* ------------------------------------- */
.navigation {
position: relative;
border-bottom: .5px solid #777;
transition: all .5s;
}
.logo-box {
float: left;
}
.logo img {
width: 6rem;
height: auto;
margin-left: 2rem;
border-radius: 50%;
}
nav {
padding: .5rem;
}
.navbar {
float: right;
list-style: none;
margin-right: 10rem;
margin-top: 1.5rem;
}
.navbar li {
display: inline-block;
}
.navbar li a {
margin: 0 1rem;
padding: .2rem .6rem;
color: black;
text-transform: uppercase;
border-bottom: 2px solid transparent;
transition: all .3s;
}
.navbar li a:hover {
border-bottom: 2px solid #E6AF2E;
transition: all .3s;
}
.navbar .nav-icon {
display: none;
transition: all .3s;
}
/* The sticky navbar */
.sticky {
position: fixed;
background-color: #3D348B;
top: 0;
width: 100%;
box-shadow: 0 .2rem .3rem rgba(0, 0, 0, .5);
}
.sticky .navbar-lists {
color: #E0E2DB;
}
.sticky .logo {
color: #E0E2DB;
}
/* Responsive navbar */
.responsive-navbar {
display: block;
text-align: right;
}
/* ------------------------------------- */
section {
padding: 8rem;
}
/* ------------------------------------- */
/* ------------------------------------- */
/* THE ABOUT SECTION */
/* ------------------------------------- */
.about-section {
padding: 0;
margin-top: 12rem;
}
.long-text {
width: 70%;
margin: 2.5rem auto 0;
}
.profile-image {
height: 35rem;
width: auto;
}
.my-info-img {
text-align: right;
padding-right: 15rem;
}
.my-info-list {
list-style: none;
}
.my-info-list > li {
margin-bottom: 1.2rem;
}
/* ------------------------------------- */
/* MEDIA QUERIES SECTION */
/* ------------------------------------- */
#media only screen and (max-width: 720px) {
html {
font-size: 50%;
}
.remove-heading {
display: none;
}
.logo img {
width: 5rem;
margin-top: 1rem;
}
/* Responsive navbar */
.navbar li {
display: none;
}
.navbar .nav-icon {
color: #000;
display: block;
font-size: 20px;
}
.sticky .navbar .nav-icon {
display: block;
color: #fff;
font-size: 20px;
}
.navbar .nav-icon:hover {
color: #2f2f2f;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Favicon link -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Icons link -->
<script src="https://kit.fontawesome.com/4e3ab997f9.js" crossorigin="anonymous"></script>
<!-- Rubik font link -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;700&display=swap" rel="stylesheet">
<!-- CSS links -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<title>Arun Bohra - Design Business Solutions</title>
</head>
<body>
<header id="header">
<div class="hero-text-box u-text-align-center u-inline-block">
<h1><span class="remove-heading">Hello</span> I'm Arun</h1>
<h2 class="header-heading u-margin-top-small">I'm a front-end developer</h2>
<h2 class="slogan u-margin-top-small">Design business solutions</h2>
Who am I
</div>
</header>
<div class="navigation">
<nav class="clearfix">
<div class="logo-box">
<a href="#header" class="logo">
<img src="img/logo.png" alt="logo">
</a>
</div>
<ul class="navbar">
<i class="fas fa-bars" id="responsive-nav-btn"></i>
<li>Home</li>
<li>About me</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="about-section" id="about">
<h2 class="u-text-align-center">Who am I</h2>
<p class="long-text u-text-align-center">I am a web designer and web developer. I design the webiste according to the needs of today's businesses. I do care a lot about the designs with a modern look and feel.</p>
<div class="row clearfix u-margin-top-big my-info-box">
<div class="span-1-of-2 my-info-img">
<img src="img/profile.png" alt="Profile image" class="profile-image">
</div>
<div class="span-1-of-2 my-info-text">
<h3 class="u-margin-bottom-medium">I design awesome websites</h3>
<ul class="my-info-list u-margin-bottom-medium">
<li><i class="fas fa-check-circle icon-small"></i>I can design awesome websites.</li>
<li><i class="fas fa-check-circle icon-small"></i>I can code the designed websites.</li>
<li><i class="fas fa-check-circle icon-small"></i>I deliver the work very fast.</li>
<li><i class="fas fa-check-circle icon-small"></i>I make very precise revisions.</li>
</ul>
Download CV
</div>
</div>
</section>
</body>
</html>
From an inline event handler, you need to pass the event yourself like onclick="responsiveNavbar(event)" then you can call event.preventDefault(); to stop the movement.
The class responsive-navbar gets added and removed correctly with code below.
function responsiveNavbar(event) {
event.preventDefault();
let navItems = document.querySelectorAll(".navbar li");
navItems.forEach(function(navItem) {
navItem.classList.toggle("responsive-navbar");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
body {
box-sizing: inherit;
color: #777;
background-color: #E0E2DB;
font-family: 'Roboto', sans-serif;
font-size: 1.8rem;
font-weight: 400;
line-height: 1.5;
scroll-behavior: inherit;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* ------------------------------------- */
/* THE REUSABLE CONTENT */
/* ------------------------------------- */
/* Grids */
.row {
width: 80%;
margin: 0 auto;
}
.span-1-of-2 {
width: 48%;
float: left;
}
/* HTML contents */
h1,
h2.header-heading,
h2,
h3,
h5 {
margin: 0;
text-transform: uppercase;
}
h1 {
font-size: 4.5rem;
color: #E0E2DB;
letter-spacing: .4rem;
word-spacing: .5rem;
font-weight: 300;
}
h2 {
font-size: 3.5rem;
color: #3D348B;
letter-spacing: .3rem;
}
h3 {
font-size: 2.6rem;
color: #000;
}
h4 {
font-size: 2.2rem;
color: #E0E2DB;
}
h5 {
font-size: 2rem;
margin-bottom: .5rem;
color: #191716;
}
/* Links */
a {
text-decoration: none;
display: inline-block;
}
/* Icons */
.icon-small {
font-size: 2rem;
color: #3D348B;
margin-right: 1rem;
}
/* Buttons */
.btn {
border: 1px solid #E6AF2E;
border-radius: .3rem;
font-size: 1.6rem;
padding: 1.2rem 3.5rem;
text-transform: uppercase;
color: #E0E2DB;
background-color: transparent;
font-weight: bold;
letter-spacing: .3rem;
transition: all .3s;
}
.btn:hover {
background-color: #E6AF2E;
color: #191716;
}
.btn2 {
background-color: #3D348B;
color: #E0E2DB;
border: 1px solid #3D348B;
border-radius: .3rem;
font-size: 1.6rem;
padding: 1.2rem 3.5rem;
text-transform: uppercase;
font-weight: bold;
letter-spacing: .3rem;
transition: all .3s;
}
.btn2:hover {
background-color: #E0E2DB;
color: #191716;
}
/* Utility classes */
.u-margin-top-small {
margin-top: 2.5rem;
}
.u-margin-top-medium {
margin-top: 5rem;
}
.u-margin-top-big {
margin-top: 7.5rem;
}
.u-margin-bottom-small {
margin-bottom: 2rem;
}
.u-margin-bottom-medium {
margin-bottom: 4rem;
}
.u-text-align-center {
text-align: center;
}
.u-inline-block {
display: inline-block;
}
/* ------------------------------------- */
/* THE HEADER SECTION */
/* ------------------------------------- */
header {
background-color: #3D348B;
height: 100vh;
}
.hero-text-box {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
h2.header-heading {
font-size: 3.5rem;
margin-top: 2rem;
color: #E6AF2E;
font-weight: 400;
}
h2.slogan {
color: #E6AF2E;
font-size: 2.8rem;
font-weight: 400;
}
/* ------------------------------------- */
/* THE NAVBAR */
/* ------------------------------------- */
.navigation {
position: relative;
border-bottom: .5px solid #777;
transition: all .5s;
}
.logo-box {
float: left;
}
.logo img {
width: 6rem;
height: auto;
margin-left: 2rem;
border-radius: 50%;
}
nav {
padding: .5rem;
}
.navbar {
float: right;
list-style: none;
margin-right: 10rem;
margin-top: 1.5rem;
}
.navbar li {
display: inline-block;
}
.navbar li a {
margin: 0 1rem;
padding: .2rem .6rem;
color: black;
text-transform: uppercase;
border-bottom: 2px solid transparent;
transition: all .3s;
}
.navbar li a:hover {
border-bottom: 2px solid #E6AF2E;
transition: all .3s;
}
.navbar .nav-icon {
display: none;
transition: all .3s;
}
/* The sticky navbar */
.sticky {
position: fixed;
background-color: #3D348B;
top: 0;
width: 100%;
box-shadow: 0 .2rem .3rem rgba(0, 0, 0, .5);
}
.sticky .navbar-lists {
color: #E0E2DB;
}
.sticky .logo {
color: #E0E2DB;
}
/* Responsive navbar */
.responsive-navbar {
display: block;
text-align: right;
}
/* ------------------------------------- */
section {
padding: 8rem;
}
/* ------------------------------------- */
/* ------------------------------------- */
/* THE ABOUT SECTION */
/* ------------------------------------- */
.about-section {
padding: 0;
margin-top: 12rem;
}
.long-text {
width: 70%;
margin: 2.5rem auto 0;
}
.profile-image {
height: 35rem;
width: auto;
}
.my-info-img {
text-align: right;
padding-right: 15rem;
}
.my-info-list {
list-style: none;
}
.my-info-list>li {
margin-bottom: 1.2rem;
}
/* ------------------------------------- */
/* MEDIA QUERIES SECTION */
/* ------------------------------------- */
#media only screen and (max-width: 720px) {
html {
font-size: 50%;
}
.remove-heading {
display: none;
}
.logo img {
width: 5rem;
margin-top: 1rem;
}
/* Responsive navbar */
.navbar li {
display: none;
}
.navbar .nav-icon {
color: #000;
display: block;
font-size: 20px;
}
.sticky .navbar .nav-icon {
display: block;
color: #fff;
font-size: 20px;
}
.navbar .nav-icon:hover {
color: #2f2f2f;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Favicon link -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Icons link -->
<script src="https://kit.fontawesome.com/4e3ab997f9.js" crossorigin="anonymous"></script>
<!-- Rubik font link -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;700&display=swap" rel="stylesheet">
<!-- CSS links -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<title>Arun Bohra - Design Business Solutions</title>
</head>
<body>
<header id="header">
<div class="hero-text-box u-text-align-center u-inline-block">
<h1><span class="remove-heading">Hello</span> I'm Arun</h1>
<h2 class="header-heading u-margin-top-small">I'm a front-end developer</h2>
<h2 class="slogan u-margin-top-small">Design business solutions</h2>
Who am I
</div>
</header>
<div class="navigation">
<nav class="clearfix">
<div class="logo-box">
<a href="#header" class="logo">
<img src="img/logo.png" alt="logo">
</a>
</div>
<ul class="navbar">
<i class="fas fa-bars" id="responsive-nav-btn"></i>
<li>Home</li>
<li>About me</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="about-section" id="about">
<h2 class="u-text-align-center">Who am I</h2>
<p class="long-text u-text-align-center">I am a web designer and web developer. I design the webiste according to the needs of today's businesses. I do care a lot about the designs with a modern look and feel.</p>
<div class="row clearfix u-margin-top-big my-info-box">
<div class="span-1-of-2 my-info-img">
<img src="img/profile.png" alt="Profile image" class="profile-image">
</div>
<div class="span-1-of-2 my-info-text">
<h3 class="u-margin-bottom-medium">I design awesome websites</h3>
<ul class="my-info-list u-margin-bottom-medium">
<li><i class="fas fa-check-circle icon-small"></i>I can design awesome websites.</li>
<li><i class="fas fa-check-circle icon-small"></i>I can code the designed websites.</li>
<li><i class="fas fa-check-circle icon-small"></i>I deliver the work very fast.</li>
<li><i class="fas fa-check-circle icon-small"></i>I make very precise revisions.</li>
</ul>
Download CV
</div>
</div>
</section>
</body>
</html>
Below are the HTML, CSS, and JS code in which I am facing the problem, and not able to attain the functionality that I am supposed to.
//This is where I think the prblem is but I am not able to figure out how to correct it
window(function() {
$(window).scroll(function() {
if (this.scrollY > 20) {
$('.navbar').addClass('sticky');
} else {
}
})
});
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
position: fixed;
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
padding: 80px 0;
*background: #ffffff;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="src=" https://code.jquery.com/jquery-3.5.1.min.js ""></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
While scrolling down the background of the nav-bar should turn white but it's not behaving in that way it should be behaving. What would be the easier way to attain this functionality if I am not supposed to do it this way.
Is there any problem if the navbar is always fixed?
Add background-color: white; to the .navbar class and check if that is satisfactory. This allows you to make the navbar background white and the page text goes behind the navbar on scrolling. If that satisfies you, then you can even remove the jquery code.
Try like this:
//This is where I think the prblem is but I am not able to figure out how to correct it
(function() {
$(window).scroll(function() {
if (this.scrollY > 20) {
$('.navbar').addClass('sticky');
} else {
$('.navbar').removeClass('sticky');
}
})
})();
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
padding: 80px 0;
background: #ffffff;
position: fixed;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
Fixed HTML syntax (<script> src), JavaScript syntax (})()) and CSS syntax (background without *)
In the JavaScript, remove the class again when the condition is not met
In the CSS, set position: fixed; when the .sticky class is present, not the other way around
Look at position: sticky for a pure CSS way to do this, e.g.:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
background: #ffffff;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0px;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar sticky">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
On the right side you can a see few pixels of space:
Does anyone know how to remove it? I think it's because of animations I have added with "aos" library. I have already had this error without animations, but I fixed it with this code:
*, *::before, *::after {
box-sizing: border-box;
}
This is the link for the code so you can preview the page:
https://jsfiddle.net/5rq8grcL/
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font-family: 'IBM Plex Sans Condensed', sans-serif;
background-image: url("/assets/images/masaze.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
scroll-behavior: smooth;
animation: fadeEffect 1s;
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#navbar-list {
list-style-type: none;
text-align: center;
margin: 0;
overflow: hidden;
background-color: #000;
width: 100%;
opacity: 0.9;
position: fixed;
z-index: 1;
}
#navbar-list li {
text-align: justify;
display: inline;
}
#navbar-list li a {
color: white;
text-decoration: none;
display: inline-block;
}
#navbar-list li a:hover {
color: #a0c2d5;
transition: .5s;
}
.pocetna {
font-size: 1.7rem;
padding: 25px 20px;
float: left;
}
.linkovi {
padding: 35px 20px;
position: relative;
right: 180px;
}
.linkovi:active {
color: black;
background-color: white;
}
#main {
text-align: center;
padding-top: 15%;
}
#main h1 {
font-size: 4.5em;
text-shadow: 1px 1px 1px #000000;
}
#main h3 {
font-size: 17pt;
}
hr {
width: 615px;
opacity: .2;
}
.button {
height: 50px;
font-size: 20px;
margin-top: 20px;
cursor: pointer;
padding: 10px;
outline: none;
text-decoration: none;
border: none;
border-radius: 3%;
}
.button a {
color: black;
text-decoration: none;
}
.button:hover {
background-color: #a0c2d5;
transition: .5s;
}
section {
position: relative;
margin-top: -5px;
}
#video {
background-color: rgba(20, 25, 25, 0.5);
min-width: 100%;
min-height: 100%;
margin-top: 580px;
z-index: 0;
position: relative;
}
#section1 {
position: absolute;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 200px;
bottom: 0;
left: 0;
}
#section1 h3 {
font-size: 25pt;
}
#section1 p {
font-size: 18pt;
letter-spacing: 1px;
text-shadow: 1px 1px gray;
}
#contact {
background: rgba(0, 0, 0, 0.2);
position: absolute;
width: 100%;
height: 500px;
display: table;
table-layout: fixed;
border-spacing: 10px;
margin-top: 50px;
}
#section2 {
font-size: 25pt;
text-align: center;
background: rgba(0, 0, 0, 0.2);
height: 100%;
background-image: url("/assets/images/masaze.jpg");
}
#section2 h3 {
margin: 0;
padding: 20px 0;
}
.sectionc {
display: table-cell;
}
.sectionc a {
color: black;
text-decoration: none;
padding: 5px;
}
.sectionc a:hover {
transition: 0.5s;
color: #a0c2d5;
}
#map {
width: 700px;
height: 400px;
margin: 50px auto;
}
#section3 {
text-align: center;
font-size: 25pt;
background: rgba(0, 0, 0, 0.5);
background-image: url("/assets/images/proba.jpg");
height: 705px;
}
.kdn {
margin: 0;
padding: 20px;
color: white;
}
#footer {
background-color: black;
color: white;
height: 80px;
}
#footer p {
margin: -5px;
text-align: center;
padding: 30px;
}
#footer p a {
color: white;
text-decoration: none;
padding-left: 10px;
}
#footer p a:hover {
color: #a0c2d5;
transition: .5s;
}
span {
color: black;
transition: 1.5s;
}
span:hover {
color: white;
transition: 1.5s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Masaže Gligorijević</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/main.css">
<link rel="icon" href="/assets/images/logo.png">
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<script src="/assets/js/main.js"></script>
</head>
<body>
<nav>
<div id="navbar">
<ul id="navbar-list">
<li>
<a class="pocetna" href="#"><img src="/assets/images/logo icon.ico" width="40" height="30" style="padding-right:10px;">Masaže Gligorijević</a>
</li>
<li class="linkovil"><a class="linkovi" href="#">Početna</a></li>
<li class="linkovil"><a class="linkovi" href="#section1">O nama</a></li>
<li><a class="linkovi m" href="#section2">Kontakt</a></li>
<li><a class="linkovi" href="#section3">Kako do nas</a></li>
</ul>
</div>
</nav>
<header>
<div id="main">
<h1>Masaže Gligorijević</h1>
<h3>Ulaganjem u svoje zdravlje, ulažete u kvalitet sopstvenog života.</h3>
<hr>
<button class="button"><i class="fas fa-play"></i> Rezervišite Odmah</button>
</div>
</header>
<section>
<video autoplay muted loop id="video">
<source src="/assets/images/klip.mp4" type="video/mp4">
</video>
<div id="section1" data-aos="fade-right" data-aos-duration="1500" data-aos-easing="linear">
<h3>O nama</h3>
<p>
Profesionalni maser i specijalno usavršeni fizioterapeut čija veština pokazuje odlične rezultate kod klijenata. <br><br> Naš salon je opremljen profesionalnom opremom. Masaže se obavljaju na stolovima za masažu.<br><br>Kompletnom uživanju doprinose
prijatni zvuci muzike i mirisi aromatičnih ulja.<br> NAŠI klijenti odlaze uz pravilo: NAKON MASAŽE OPET IMAM OSMEH!
</p>
</div>
</section>
<section id="section2">
<h3>Kontakt</h3>
<div id="contact">
<div id="sectionc" data-aos="fade-right" data-aos-duration="1500" data-aos-easing="linear">
<h4>Zakažite vaš termin već sada!</h4>
<p><i class="fas fa-location-arrow"></i> Adresa: Ljubiše Uroševića 6/21, Jagodina</p>
<p><i class="fas fa-mobile"></i> Tel: 060 078 2880</p>
<p><i class="fas fa-at"></i> Email: milosgliga92#gmail.com</a>
</p>
</div>
<div class="sectionc" data-aos="fade-left" data-aos-duration="1500" data-aos-easing="linear">
<h4>Pratite nas na društvenim mrežama!</h4>
<p><i class="fab fa-facebook-f"></i> Facebook</p>
<p><i class="fab fa-instagram"></i>Instagram</p>
</div>
</div>
</section>
<div id="section3" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear">
<h3 class="kdn">Kako do nas</h3>
<div id="map">
</div>
</div>
<footer>
<div id="footer">
<p>
© 2018 <span> Đorđe Gligorijević </span> All Rights Reserved
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in"></i>
</p>
</div>
</footer>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvHllMfDUDEVM_GtdkQ6_hyj4wMJ2vVxM&callback=initMap"></script>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
On #footer p, remove margin: -5px; or at least change it to margin: -5px 0px;. The negative left and right margins are what's causing the gap.
100% work. Try this
<script>$('[data-aos]').parent().addClass('hideOverflowOnMobile');</script>
<style>
#media (max-width: 768px) {
.hideOverflowOnMobile {
overflow: hidden;
}
}
</style>
I ran into a problem. I've been trying to implement this "hamburger" mobile sliding menu into my website. The javascript is working, but the menu is not showing.
Anyone know of this? http://www.ymc.ch/en/how-to-make-a-hamburger-a-menu-for-mobile-websites
I've made my css and HTML code a bit different, but the jQuery is the same.
I've looked through this and I figured it might be a css conflict but I don't know what exactly. I have another stylesheet that uses .container, but I also don't know if that's the reason.
Here's my link: http://thestripedphoenix.com/
I wanted my website to be responsive while having the hamburger menu tool.
Please, help. I've spent days on this, and I don't think I'd be able to do this alone.
Thanks!!!!!
My HTML markup is here (index.html)
<!-- Mobile Page Layout
================================================== -->
<!--This wrapping container is used to get the width of the whole content-->
<div id="container">
<!--The Hamburger Button in the Header-->
<header>
<div id="logo"><img src="images/tsp+design-header-mobile.png" width="271" height="78"/>
</div>
<div id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
</header>
<!--The mobile navigation Markup hidden via css-->
<nav class="mobileNav">
<ul>
<li>home</li>
<li>about</li>
<li>photography</li>
<li>illustration</li>
<li>animation</li>
<li>web design</li>
<li>resume</li>
<li>contact</li>
</ul>
</nav>
<!--The Layer that will be layed over the content
so that the content is unclickable while menu is shown-->
<div id="contentLayer"></div>
<!-- Primary Page Layout
================================================== -->
<div id="content">
<div class="container">
<div class="six columns">
<div id="header"><img src="images/tsp+design-header.png"/></div>
</div>
<div class="two columns" id="navigation">
<nav id="d-nav">
<dl>
<dt id="about">about</dt>
<dt id="portfolio">portfolio</dt>
<dt id="resume">resume</dt>
<dt id="contact">contact</dt>
</dl>
</nav>
</div>
<div id="space">
</div>
<div class="eight columns">
<div class="slider-wrapper">
<div id="slider1" class="nivoSlider theme-default">
<img src="images/gallery/image2-cropped.jpg"/>
<img src="images/gallery/image3-cropped.jpg"/>
<img src="images/gallery/image4-cropped.jpg"/>
<img src="images/gallery/image5-cropped.jpg"/>
<img src="images/gallery/image7-cropped.jpg"/>
</div>
</div>
</div>
<div class="eight columns">
<div class="slider-wrapper theme-default">
<div id="slider2" class="nivoSlider">
<img src="images/gallery/image8-cropped.png"/>
<img src="images/gallery/image10-cropped.png"/>
<img src="images/gallery/image12-cropped.png"/>
<img src="images/gallery/image13-cropped.png"/>
<img src="images/gallery/image15-cropped.png"/>
</div>
</div>
</div>
<div class="eight columns">
<div class="slider-wrapper theme-default">
<div id="slider3" class="nivoSlider">
<img src="images/gallery/image18-cropped.png"/>
<img src="images/gallery/image19-cropped.png"/>
<img src="images/gallery/image20-cropped.png"/>
</div>
</div>
</div>
<div class="eight columns">
<div class="slider-wrapper theme-default">
<div id="slider4" class="nivoSlider">
<img src="images/gallery/image21-cropped.png"/>
<img src="images/gallery/image22-cropped.png"/>
<img src="images/gallery/image24-cropped.png"/>
</div>
</div>
</div>
<div class="slider-wrapper theme-default">
<div id="slider5" class="nivoSlider">
<img src="images/gallery/image2-cropped.jpg"/>
<img src="images/gallery/image3-cropped.jpg"/>
<img src="images/gallery/image4-cropped.jpg"/>
<img src="images/gallery/image5-cropped.jpg"/>
<img src="images/gallery/image7-cropped.jpg"/>
<img src="images/gallery/image8-cropped.png"/>
<img src="images/gallery/image10-cropped.png"/>
<img src="images/gallery/image12-cropped.png"/>
<img src="images/gallery/image13-cropped.png"/>
<img src="images/gallery/image15-cropped.png"/>
<img src="images/gallery/image18-cropped.png"/>
<img src="images/gallery/image19-cropped.png"/>
<img src="images/gallery/image20-cropped.png"/>
<img src="images/gallery/image21-cropped.png"/>
<img src="images/gallery/image22-cropped.png"/>
<img src="images/gallery/image24-cropped.png"/>
</div>
</div>
<div id="space">
</div>
<div id="footer">
<img src="images/footer-line.png" width="960" height="25"></a>
about<span>|</span>portfolio<span>|</span>resume<span>|</span>contact
<p></p>
</div>
<div id="social">
<img src="images/behance-icon.png" width="30" height="30"></a><img src="images/dribbble-icon.png" width="30" height="30"></a><img src="images/linkedin-icon.png" width="30" height="30"></a><img src="images/youtube-icon.png" width="30" height="30"></a><img src="images/zazzle-icon.png" width="30" height="30"></a>
</div>
<div id="copyright">
<p>Copyright Michelle Shean, 2014</p>
</div>
</div><!-- .container-->
</div><!-- content -->
Part of my CSS (for mobile size)
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
/*
Setup a basic body
*/
body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: Helvetica; Arial; sans-serif;
font-size: 12px;
}
/*
Header is relative so z-index: 1 guarantees always displayed on top
*/
header {
background-color: #000000;
padding: 10px;
padding-bottom: 0px;
text-decoration: none;
position: fixed;
width: 100%;
z-index: 1;
-webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}
#logo {
display: inline;
}
/*
using background color is important to cover the menu
position absolute isset to cover the whole viewport
*/
#content {
background-color: #000000;
font-family: 'league_gothicregular'; Helvetica; Arial; Sans-serif;
padding: 52px 10px 10px 10px;
position: relative;
max-width: 480px;
height: auto;
overflow-x: hidden;
-webkit-box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
}
/*
the hamburger button with a little gradient effekt
*/
#hamburger {
border-radius: 3px 3px 3px 3px;
cursor: pointer;
display: block;
float: right;
margin-right: 50px;
margin-top: 23px;
height: 24px;
padding: 3px 4px 3px;
position: relative;
width: 25px;
background: #4569b2;
background: -moz-linear-gradient(top, #000000 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000)color- stop(100%,#000000));
background: -webkit-linear-gradient(top, #000000 0%,#000000 100%);
background: -o-linear-gradient(top, #000000 0%,#000000 100%);
background: -ms-linear-gradient(top, #000000 0%,#000000 100%);
background: linear-gradient(to bottom, #000000 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
}
/*
The white stripes in the hamburger button
*/
#hamburger div {
background-color: #fff;
border: 1px solid #eee;
border-radius: 2px 2px 2px 2px;
height: 2px;
margin-top: 3px;
width: 90%;
}
/*
The navigation container in the background
*/
nav {
left: 0px;
top: 0px;
position: fixed;
z-index: 0;
width: 70%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-x:hidden;
overflow-y:auto ;
background: #3e3c3d;
background: -moz-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e3c3d), color-stop(100%,#2d2c2d));
background: -webkit-linear-gradient(top, #3e3c3d 0%,#2d2c2d 100%);
background: -o-linear-gradient(top, #3e3c3d 0%,#2d2c2d 100%);
background: -ms-linear-gradient(top, #3e3c3d 0%,#2d2c2d 100%);
background: linear-gradient(to bottom, #3e3c3d 0%,#2d2c2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e3c3d', endColorstr='#2d2c2d',GradientType=0 );
}
/*
Style the navigation menu
*/
nav ul {
list-style: none;
margin: 0;
width: 100%;
padding: 0;
}
nav li {
position: relative;
font-size: 1em;
font-weight: bold;
border-bottom: 1px solid #222222;
border-top: 1px solid #444444;
padding: 15px;
}
nav li a {
color: #fff;
text-decoration: none;
}
/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/
#contentLayer {
display: none;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
right: 0;
top: 0;
width: 30%;
z-index: 5;
min-height: 1062px;
}
#header {
display: none;
}
#logo {
display: inline;
}
#slider1 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
margin-top: 50px;
margin-bottom: 30px;
}
#slider2 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
margin-top: 50px;
}
#slider3 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
}
#slider4 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
}
#slider5 {
display: inline;
position: relative;
width: auto;
float: left;
clear: both;
}
#about-pic {
position: relative;
margin-left: 10px;
margin-top: 10px;
min-width: 220px;
max-width: 220px;
float: left;
}
#section-title-blue {
position: relative;
clear: both;
margin-left: 10px;
width: 800px;
min-width: 480px;
height: 60px;
float: left;
font-size: 2em;
color: #00CBD4;
}
#section-title-green {
position: relative;
clear: both;
margin-top: 5px;
margin-left: 10px;
width: 800px;
min-width: 480px;
height: 60px;
float: left;
font-size: 2em;
color: #2AFF38;
}
#about-pic img {
width: 100%;
}
#about-text {
position: relative;
margin-top: 30px;
float: right;
width: 100%;
font-size: 1.1em;
font-family: Helvetica, Arial, Sans-serif;
}
#signature {
font-family: Helvetica, Arial, Sans-serif;
float: left;
margin-top: 40px;
max-width: 120px;
max-height: 120px;
}
#portfolio-gallery {
display: none;
}
#portfolio-nav {
display: none;
}
#mobile-gallery {
display: inline-block;
position: relative;
margin-top: 50px;
clear: both;
padding: 20px;
padding-right: 30px;
padding-top: 10px
max-width: 480px;
max-height: 720px;
}
#mobile-gallery img {
width: auto;
}
/* line 180, ../sass/screen.sass */
.image-row {
*zoom: 1;
margin-bottom: 20px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass /stylesheets/compass/utilities/general/_clearfix.scss */
.image-row:after {
content: "";
display: table;
clear: both;
}
/* line 184, ../sass/screen.sass */
.example-image-link {
display: inline-block;
margin: 0 10px 20px 10px;
line-height: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
border: 2px solid #5e5e5e;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
/* line 191, ../sass/screen.sass */
.example-image-link:hover {
border: 2px solid #2AFF38;
}
/* line 194, ../sass/screen.sass */
.example-image {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
#subheading {
position: relative;
clear: both;
max-width: 360px;
min-width: 430px;
height: 40px;
margin-top: 20px;
margin-left: 10px;
float: left;
font-size: 1.5em;
}
#resume-text {
position: relative;
max-width: 360px;
max-height: 130px;
margin-top: 20px;
margin-left: 10px;
float: left;
font-family: Helvetica, Arial, Sans-serif;
}
#resume-note {
position: relative;
clear: both;
float: left;
margin-left: 70px;
margin-top: 30px;
margin-bottom: 30px;
width: 600px;
height: 30px;
font-family: Helvetica, Arial, Sans-serif;
font-size: 1.2em;
}
#resume-note {
position: relative;
clear: both;
float: left;
margin-left: 10px;
margin-top: 30px;
margin-bottom: 30px;
width: 600px;
height: 30px;
font-family: Helvetica, Arial, Sans-serif;
font-size: 1em;
}
#form {
position: relative;
max-width: 450px;
min-width: 460px;
height: 820px;
margin-top: 20px;
margin-left: 10px;
margin-bottom: 40px;
float: left;
clear: both;
font-size: 1.2em;
padding: 20px;
border: none;
}
input, textarea {
padding: 5px;
margin: 10px;
font-family: Helvetica, Arial, Sans-serif;
font-size: medium;
font-weight: bold;
outline: none;
}
input[type=text], textarea {
width: 220px;
background-color: #FFFFFF;
}
input[type=submit] {
width: 100px;
background-color: #2AFF38;
border: 1px solid #000000;
font-size: large;
color: #FFFFFF;
margin-bottom: 30px;
}
input[submit]:active {
background-color: #00CBD4;
}
h1 {
font-family: 'league_gothicregular', Arial, sans-serif;
font-size: 2.1em;
}
#footer {
position: relative;
margin-top: 10px;
max-width: 960px;
max-height: 80px;
float: left;
text-align: center;
font-size: 1.5em;
}
#footer img {
width: 100%;
}
#social {
position: relative;
clear: both;
max-width: 200px;
height: 40px;
margin: auto;
padding-bottom: 10px;
}
#social img {
margin: 5px;
display: inline-block;
}
#copyright {
position: relative;
clear: both;
text-align: center;
margin: auto;
min-width: 30px;
padding-bottom: 15px;
font-size: 1.2em;
}
a:link {
color: #FFFFFF;
}
a:active {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
span {
margin: 5px;
}
}
Here is the head of my HTML markup:
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>the striped phoenix | Michelle Shean</title>
<meta name="description" content="portfolio">
<meta name="author" content="portfolio">
<body oncontextmenu="return false;">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
<!--Using jQuery and jQuery UI for display effects
================================================== -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--Using the hamburger menu display code
=================================================== -->
<script src="javascripts/hamburger.js"></script>
<!-- CSS
================================================== -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet" href="stylesheets/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="stylesheets/slider-themes/default/default.css" type="text/css" media="screen" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
The jQuery code is the same as from your demo.
jQuery(document).ready(function() {
//Open the menu
jQuery("#hamburger").click(function() {
//set the width of primary content container -> content should not scale while animating
var contentWidth = jQuery('#content').width();
//set the content with the width that it has originally
jQuery('#content').css('width', contentWidth);
//display a layer to disable clicking and scrolling on the content while menu is shown
jQuery('#contentLayer').css('display', 'block');
//disable all scrolling on mobile devices while menu is shown
jQuery('#container').bind('touchmove', function(e){e.preventDefault()});
//set margin for the whole container with a jquery UI animation
jQuery("#container").animate({"marginLeft": ["70%", 'easeOutExpo']}, {
duration: 700
});
});
//close the menu
jQuery("#contentLayer").click(function() {
//enable all scrolling on mobile devices when menu is closed
jQuery('#container').unbind('touchmove');
//set margin for the whole container back to original state with a jquery UI animation
jQuery("#container").animate({"marginLeft": ["0", 'easeOutExpo']}, {
duration: 700,
complete: function() {
jQuery('#content').css('width', 'auto');
jQuery('#contentLayer').css('display', 'none');
}
});
});
});
did you use the jQuery part for this like the onclick animation to show the menu.
please see here:
demo
fiddle