The webpage, when in mobile view, is getting stuck when I attempt to scroll vertically. In #media screen and (max-width: 952px) {} I have overflow-x: hidden;, width: 100%;, and position: absolute; set in order to prevent horizontal scrolling because the mobile nav bar is hidden to the right. I've attempted to add overflow-y: scroll; and overflow-y: auto; to the code and even added !important and I am still experience vertical scroll issues.
You can view a live version of the webpage at jacpel5.dreamhosters.com
HTML for the 'Photography' page:
<!DOCTYPE html>
<html>
<head>
<title>Jacki Leigh - Photography</title>
<!-- title appears in browser tab -->
<link href="myStyleSheet.css" rel="stylesheet" type="text/css">
<!-- linking to myStyleSheet.css file for styling -->
<link rel="stylesheet" href="https://use.typekit.net/swe6opx.css">
<!-- font family "Operetta 8" -->
<link rel="stylesheet" href="https://use.typekit.net/opw2jnd.css">
<!-- font family "Relation Two" -->
<link href="photos/favicon.png" rel="icon" type="image/gif" sizes="16x16">
<!-- linking to the favicon -->
<meta charset="UTF-8">
<!-- UTF-8 is the default character set for HTML5 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- viewport gives browser instructions on how to control the page's dimensions and scaling -->
<!-- width=device-width sets the width of the page to follow the screen-width of the device --->
<!-- 1.0 scale sets the initial zoon level when the page is first loaded by the browser -->
<meta name="robots" content="index, follow">
<!-- allows the spider of a search engine to index the whole website -->
<meta name="keywords" content="Jacki Leigh, photography, light painting, long exposure, music, music photography, portrait photography, portraits, panasonic, camera, photos, live music photography, live music, freelance photographer, freelance, photographer, freelance photography">
<meta name="description" content="Jacki Leigh is an LA based freelance photographer. She specializes in concert photography and light painting.">
<!-- Use no more than 200 characters. This is the description that appears in the search results on search engines -->
<meta name="author" content="Jacki Leigh Designs">
</head>
<body>
<header>
<div class="container">
<a href="index.html">
<img src="photos/logo.png" alt="Jacki Leigh Logo" class="headerLogo">
</a>
<nav>
<ul class="nav-links">
<!-- <li>Home</li> -->
<li>Photography</li>
<li>Graphic Design</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</header>
<br />
<div class="section">
<ul class="grid">
<li>
<div class="box p-cov1">
<a href="concert-photography.html">
<div class="info">
<h3>Concert Photography</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov2">
<a href="light-painting.html">
<div class="info">
<h3>Light Painting</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov3">
<a href="portraits-people.html">
<div class="info">
<h3>Portraits & People</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov4">
<a href="nature.html">
<div class="info">
<h3>Nature</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov5">
<a href="animals.html">
<div class="info">
<h3>Animals</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov6">
<a href="special-events.html">
<div class="info">
<h3>Special Events</h3>
</div></a>
</div>
</li>
</ul>
</div>
<br />
<br />
<footer>
<a href="https://www.facebook.com/JackiLeighDesigns/" target="_blank">
<img src="photos/fbicon.png" alt="Facebook Icon" class="fbIcon">
</a>
<a href="https://www.instagram.com/jacki_leigh/" target="_blank">
<img src="photos/instaicon.png" alt="Instagram Icon" class="instaIcon">
</a>
<br />
<small>copyright © <script type="text/javascript">document.write(new Date().getFullYear());</script> Jacki Leigh Designs</small>
</style>
</footer>
<script src="javascript/app.js"></script>
</body>
</html>
CSS:
body {
margin: 0;
background-color: #FCFCFC;
font-family: "operetta 8", serif;
font-weight: 300;
font-style: normal;
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
position: absolute;
}
.container { /* logo and text/links in navigation bar */
width: 90%;
margin: 0 auto;
}
.headerLogo { /* logo in navigation bar */
/* floating logo to the left */
/* full canvas photo is 2057px wide & 643px in height */
float: left;
padding: 10px 0; /* gives a little space on top and bottom of the logo */
width: 164.56px; /* 8% of the full size (2057px) */
height: 51.44px; /* 8% of the full size (643px) */
}
header {
background: #E9E9E9;
opacity: 1;
}
header::after {
/* used because .logo and nav are float left/right, shrinking the container to 0px, this fixes that */
content: '';
display: table;
clear: both;
}
nav {
/* floating list (menu) items to the right */
float: right;
}
nav ul {
margin: 0; /* takes space off top and bottom header background */
padding: 0; /* takes space off the sides */
list-style: none; /* removes bullet point styling */
}
nav li {
display: inline-block; /* places list horizontal, not vertical */
margin-left: 30px; /* specifies the spacd between the list items */
padding-top: 25px; /* not required - used for the hover effect for this particular nav bar */
position: relative; /* allows the nav a::before to keep the hover line relative to the text length */
}
nav ul li a {
color: #7F7887;
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
}
nav ul li a:hover {
color: #3f003c;
}
nav ul li a::before {
content: '';
display: block;
height: 2px;
width: 100%;
background-color: #3f003c;
position: absolute; /* absolute width 100% shoots this to 100% of the screen size (they run together) */
top: 0;
width: 0%;
transition: all ease-in-out 250ms; /* slows down the way the hover bar appears */
}
nav ul li a:hover::before {
width: 100%;
}
a {
text-decoration: none;
}
.burger {
display: none;
cursor: pointer;
display: static;
z-index: 200;
}
.burger div {
width: 25px;
height: 3px;
background-color: #3f003c;
margin: 5px;
transition: all 0.5s ease; /* adds transition to Burger turning into an X */
}
.mainLogo {
/* class for logo/image on index page */
width: 75%;
height: 60%;
opacity: 0.9;
}
.mainLogoDiv {
/* class for the div containing the logo/image on index page */
text-align: center;
}
.section {
max-width: 1920px;
margin: 0 auto;
padding: 1% 2%;
}
.grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.grid:after {
clear: both;
}
.grid:after, .grid:before {
content: '';
display: table;
}
.grid li {
width: 200px;
height: 200px;
display: inline-block;
margin: 20px;
}
.box {
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
border-radius: 5px;
-webkit-transition: 0.3s ease-in-out,
-webkit-transform 0.3 ease-in-out;
-moz-transition: 0.3s ease-in-out,
-moz-transform 0.3 ease-in-out;
transition: 0.3s ease-in-out,
transform 0.3s ease-in-out;
}
.box:hover {
transform: scale(1.05);
}
.p-cov1 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/mj-cover.jpg);
}
.p-cov2 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/lp-cover.jpg);
}
.p-cov3 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/pp-cover.jpg);
}
.p-cov4 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/la-cover.jpg);
}
.p-cov5 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/an-cover.jpg);
}
.p-cov6 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/se-cover.jpg);
}
.g-cov1 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/graphic/covers/dc-cover.jpg);
}
.g-cov2 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/graphic/covers/ww-cover.jpg);
}
.info {
position: absolute;
width: 100%;
height: 100%;
}
.info h3 {
font-family: "Operetta 8", serif;
font-weight: 400;
color: #e0e0e0;
text-shadow: 1px 1px black;
font-size: 20px;
margin: 0 auto;
padding: 85px 0px 0 0px;
text-align: center;
text-transform: uppercase;
width: 100%;
}
.photoGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minMax(250px, 1fr));
grid-gap: 5px 5px;
width: 90%;
margin: auto;
}
.photoColumn {
display: block;
}
.contact {
margin: 0 auto;
}
.contact-me {
text-align: center;
}
.contact-me img {
width: 60%;
max-width: 450px;
padding: 10px 0 20px 0;
}
form {
text-align: left;
font-size: 13.5px;
padding: 0px 20px 20px 20px; /* gives space on all text contained within border */
margin: 0 auto;
line-height: 30px;
height: 80%;
width: 70%;
max-width: 500px;
overflow: auto;
text-transform: uppercase;
color: #3f003c;
}
input[type=submit] {
background-color: #3f003c;
color: #E9E9E9;
border-radius: 5px;
height: 35px;
width: 100px;
font-size: 15px;
text-transform: uppercase;
}
/* the below syntax removes the blue border in the input boxes when selected */
input:focus, textarea:focus, select:focus {
outline-offset: 0px !important;
outline: none !important;
}
/* the two syntaxes below change the color of highlighted text */
::selection {
background: #E9E9E9; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #E9E9E9; /* Gecko Browsers */
}
/* the below set of syntaxes removes the background color when autofill is used */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
#name {
height: 30px;
width: 100%;
}
#email {
height: 30px;
width: 100%;
}
#message {
height: 60px;
width: 100%;
}
footer {
color: #7F7887;
text-align: center;
text-decoration: none;
}
.fbIcon {
/* class for the facebook icon in the footer */
padding: 0 2px 8px 0;
width: 25px;
height: 25px;
opacity: .7;
}
.instaIcon {
/* class for the instagram icon in the footer */
padding: 0 0 8px 0;
width: 25px;
height: 25px;
opacity: 0.7;
}
#media screen and (max-width: 952px) {
.nav-links {
position: absolute;
right: 0px;
height: 100%;
top: 70px;
background-color: #E9E9E9;
opacity: .95;
display: flex;
flex-direction: column;
align-items: center;
width: 35%;
transform: translateX(100vw);
transition: transform 0.5s ease-in;
z-index: 100;
}
.nav-links li {
margin-left: 0px;
opacity: 0;
padding: 45px 0px 0px 0px;
}
.nav-links li a {
color: #7F7887;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
.nav-links li a:hover {
color: #3f003c;
}
nav ul li a::before {
display: none;
}
.burger {
display: block;
padding: 20px;
z-index: 150;
position: static;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/* 3 code blocks below are to set up the hamburger menu to turn into an X once it's been clicked and the menu slides in from the right */
/* this takes the top hamburger line and turns it -45 degrees to form one part of the X */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
/* this takes the middle hamburger line and turns it to 0 opacity */
.toggle .line2 {
opacity: 0;
}
/* this takes the bottom hamburger line and turns it 45 degrees to form the second part of the X */
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
}
JavaScript:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
I think your problem is that you're targeting both the html and body elements with your scroll settings #media screen and (max-width: 952px) - this causes a scroll within a scroll effect, which can be buggy in mobile views.
I was able to fix this in the inspector by removing html moving the body styles outside of the media query and changing the transform line in the .nav-links styles from 100% to 100vw. They should work the same in this scenario but vw (viewport width) seems to work better.
body {
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
#media screen and (max-width: 952px) {
.nav-links {
transform: translateX(100vw);
}
}
Related
so I'm having issues with closing my mobile nav hamburger menu when a link is clicked. Only my top link is clickable right now just FYI.
The answer is on the tip of my tongue but I'm not quite there. I think mainly it's a syntax issue on my end. So yes the menu on mobile opens and closes when clicking the menu, but it doesn't close when a link is clicked.
I've looked all over, but all I could find were jQuery answers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css\style.css">
<title>eddiepearsonUX</title>
</head>
<body>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li>Audio UX Study</li>
<li>Web App UX</li>
<li>Contact</li>
</ul>
</nav>
<section class="intro-section">
<h1 class="name">
<span>eddie</span>
<span>Pearson</span>
</h1>
<h3 class="intro">
<p>Audio<br>and Visual</p>
<p>UX</p>
</h3>
</section>
<h3 class="content-title">
<p>Audio UX Study</p>
</h3>
<ul style="list-style-type: none" id="Audio-UX-Study"class="content">
<li class="main-img"><img src="https://www.dl.dropboxusercontent.com/s/rktj2nhj07l2ne7/20191206-Screenshot%20%28223%29.jpg?dl=0" alt="Ableton screen with wavforms and effects stack"></li>
<li class="second-img"><img src="https://www.dl.dropboxusercontent.com/s/j1aipb71ccj3o64/Screenshot%20%28225%29.png?dl=0" alt="Wavforms from audio"></li>
<li class="copy">
</li>
<li class="main-img"></li>
<li class="second-img"></li>
<li class="copy">
</li>
</ul>
<script src="js\app.js"></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css?family=Merriweather:300,700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Merriweather', serif;
}
body {
font-family: sans-serif;
background-color: #e6e6e0;
}
/* NAVIGATION */
nav {
height: 10vh;
background: #e6e6e0;
/* position: sticky; */
}
.name-div {
position: absolute;
width: 50%;
top: 1.8rem;
left: 2rem;
}
.name {
color: rgb(82, 82, 56);
font-size: calc(0.2rem + 1.1rem);
}
.nav-links {
display: flex;
position: relative;
list-style: none;
max-width: 75vw;
height: 100%;
justify-content: end;
align-items: center;
margin: auto;
}
.nav-links li a {
color:rgb(82, 82, 56);
font-weight: bold;
text-decoration: none;
font-size: 18px;
padding-left: 1em;
}
#media screen and (max-width: 768px) {
.nav-links {
position: fixed;
background: #e6e6e0;
height: 100vh;
width: 100%;
flex-direction: column;
justify-content: space-around;
margin-left: auto;
clip-path: circle(100px at 90% -20%);
-webkit-clip-path: circle(100px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1100px at 90% -10%);
-webkit-clip-path: circle(1100px at 90% -10%);
pointer-events: all;
max-width: 95%;
}
.line {
width: 30px;
height: 3px;
background: rgb(82, 82, 56);
margin: 5px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.nav-links li {
opacity: 0;
}
.nav-links a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.1s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.3s;
}
.nav-links li:nth-child(4) {
transition: all 0.5s ease 0.4s;
}
li.fade {
opacity: 1;
}
}
/* INTRO SECTION */
.intro-section {
max-width: 75vw;
margin: auto;
/* background-color: #fff; */
}
.intro-section .name {
padding: 2rem 0 2rem 0rem;
font-size: calc(0.8rem + 3vw);
}
.intro-section .name span:nth-of-type(1) {
color: rgb(174, 177, 156);
}
.intro {
color:rgb(174, 177, 156);
font-size: calc(0.6rem + 2vw);
}
.intro p:nth-of-type(2) {
font-size: calc(0.6rem + 3vw);
color:rgb(82, 82, 56);
}
/* CONTENT SECTION */
.content-title {
display: block;
margin: auto;
margin-top: 5rem;
margin-bottom: 2rem;
max-width: 75vw;
font-size: calc(0.6rem + 1vw);
color:rgb(82, 82, 56);
}
.content {
max-width: 75vw;
margin: 3rem auto;
display: grid;
width: 100%;
height: auto;
display: grid;
margin-bottom: 3em;
grid-gap: 1em;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.main-img {
grid-column: 1 / 2;
}
.content > li > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
const whatever = document.querySelectorAll('.nav-links li a');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
links.forEach(link => {
link.classList.toggle('fade');
});
});
The only thing you're listening for clicks on is the hamburger element.
Try adding a listener on the navLinks element, like so:
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
const whatever = document.querySelectorAll('.nav-links li a');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
links.forEach(link => {
link.classList.toggle('fade');
});
});
navLinks.addEventListener('click', () => {
navLinks.classList.toggle('open')
links.forEach(link => {
link.classList.toggle('fade');
});
})
There might be more tweaks you need to make, but this should get you started.
This is my html and JavaScript code I want help in this task, After I go back and forth into the submenus several times, the padding gets messed up for the elements and the icons get cut off.
Some times it work properly but when I click back arrow very quickly Its messed the paddings.
I am sharing screenshot also.
$(document).ready(function() {
// Variable declaration...
var left, width, newLeft;
// Add the "top-menu" class to the top level ul...
$('.mobile-menu').children('ul').addClass('top-menu');
// Add buttons to items that have submenus...
$('.has_child_menu').append('<button class="arrow"><i class="fa fa-chevron-right"></i></button>');
// Mobile menu toggle functionality
$('.menu-toggle').on('click', function() {
// Detect whether the mobile menu is being displayed...
display = $('.mobile-menu').css("display");
if (display === 'none') {
// Display the menu...
$('.mobile-menu').css("display", "block");
} else {
// Hide the mobile menu...
$('.mobile-menu').css("display", "none");
// and reset the mobile menu...
$('.current-menu').removeClass('current-menu');
$('.top-menu').css("left", "0");
$('.back-button').css("display", "none");
}
});
// Functionality to reveal the submenus...
$('.arrow').on('click', function() {
// The .current-menu will no longer be current, so remove that class...
$('.current-menu').removeClass('current-menu');
// Turn on the display property of the child menu
$(this).siblings('ul').css("display", "block").addClass('current-menu');
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left - width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Also display the "back button" (if it is hidden)...
if ($('.back-button').css("display") === "none") {
$('.back-button').css("display", "flex");
}
});
// Functionality to return to parent menus...
$('.back-button').on('click', function() {
// Hide the back button (if the current menu is the top menu)...
if ($('.current-menu').parent().parent().hasClass('top-menu')) {
$('.back-button').css("display", "none");
}
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left + width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Allow 0.25 seconds for the css transition to finish...
window.setTimeout(function() {
// Hide the out-going .current-menu...
$('.current-menu').css("display", "none");
// Add the .current-menu to the new current menu...
$('.current-menu').parent().parent().addClass('current-menu');
// Remove the .current-menu class from the out-going submenu...
$('.current-menu .current-menu').removeClass('current-menu');
}, 250);
});
});
body {
margin: 0px;
padding: 0px;
font-family: 'Segoe UI';
}
.smart-list-container {
max-width: 95%;
margin: 10px auto;
}
.smart-list-header {
background: #265a88;
padding: 10px 0px;
}
.current-page-title {
text-align: center;
}
.current-page-title h3 {
color: #fff;
margin: 0px;
}
.smart-row {}
.smart-list-icon {
float: left;
width: 60px;
}
.smart-list-icon .fa {
font-size: 35px;
padding-right: 20px;
}
.smart-descrption {
float: right;
width: calc(100% - 60px);
}
.smart-text {
float: left;
}
.smart-text h3 {
margin: 0;
}
.smart-right-btn {
float: right;
}
.smart-right-btn .fa {
font-size: 28px;
}
.sub-list {
display: none;
}
.slide-smart-page {
left: -100%;
position: absolute;
transition: 0.5s all ease;
}
body .slide-smart-sub-page {
display: block;
}
.sub-list {
background: #2196F3;
height: 300px;
}
/*******switch-btn*******/
.smart-right-btn .switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-bottom: 0px;
}
.smart-right-btn .switch input {
display: none;
}
.smart-right-btn .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn input:checked+.slider {
background-color: #2196F3;
}
.smart-right-btn input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
.smart-right-btn input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.smart-right-btn .slider.round {
border-radius: 34px;
}
.smart-right-btn .slider.round:before {
border-radius: 50%;
}
/*******switch-btn-end*******/
.smart-list-container .mobile {
background: #fff;
overflow: hidden;
/* NB: Remove this overflow property if you want to get a better idea of what is happening "under the hood" */
position: relative;
}
.smart-list-container .mobile-controls {
background: #337ab7;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: 10px;
}
.smart-list-container .mobile-controls button {
background: none;
border: none;
border-radius: 8px;
color: #fff;
height: 40px;
padding: 0 15px;
outline: none;
font-size: 18px;
}
.smart-list-container button:hover {
cursor: pointer;
}
.smart-list-container .mobile-controls .back-button {
display: none;
}
.smart-list-container .mobile-menu {
background: #fff;
display: none;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 10;
}
.smart-list-container ul {
margin: 0;
padding: 0;
width: 100%;
position: absolute;
transition: 0.25s;
}
.smart-list-container li {
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
list-style: none;
}
.smart-list-container li a {
color: #000;
flex: 3;
padding: 10px 10px;
text-decoration: none;
}
.smart-list-container li button {
background: none;
border: 0;
flex: 1;
text-align: right;
padding: 10px;
}
.smart-list-container div>ul {
top: 0;
left: 0;
}
.smart-list-container div>ul ul {
display: none;
top: 0;
left: 100%;
}
/* Content styles below here */
.smart-list-container section {
line-height: 1.5;
padding: 20px;
}
.smart-list-container h1 {
font-size: 1.5rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smart-list-container">
<div class="mobile">
<div class="mobile-controls">
<button class="menu-toggle">Page Name</button>
<button class="back-button"><i class="fa fa-chevron-left"></i></button>
</div>
<div class="mobile-menu">
<ul>
<li>
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="smart-right-btn">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
</li>
<li class="has_child_menu">
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
<ul>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<section>
<article>
<h1>Mobile menu demo</h1>
<p>Click the button above to see the mobile menu in action!</p>
<p>The menu functionality was inspired by the Settings app in iOS.</p>
<p>This implementation uses some jQuery and flexbox. The orginal code was written for a WordPress theme, so absolute positioning was used (rather than fixed positioning - which is easier) to avoid conflicts with the admin bar (when the user is logged-in).</p>
</article>
</section>
</div>
</div>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Do transition: 0.15s; instead of transition: 0.25s; in css file.
I'm having an issue with some text that I want to put in a container below a slider always appearing behind the slider. I've tried different options in CSS but I can't seem to get the text moving.
Here is the example of the project: Example
Below you can find the html/css on jsfiddle
The text should appear in the div A3L_slogan. I've tried using margins, but that doesn't make it responsive am I right?
To say it in short. The text should appear below the carousel in the center of the page.
Hope anyone can point me in the right direction or help me out
body {
width: 100%;
margin: 0;
font-family: 'open sans', sans-serif;
zoom: 1;
}
header {
padding: 20px 0;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0,0,0,.2);
}
.container {
padding: 0 20px;
margin: 0 auto;
}
.logo-box {
float: left;
margin-right: 20px;
}
.logo-box a {
outline: none;
display: block;
}
.logo-box img {display: block;}
nav {
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0px 10px 0px 0px;
float: right;
}
nav li {
display: inline-block;
margin-left: 25px;
height: 70px;
line-height: 70px;
transition: .5s linear;
}
nav a {
text-decoration: none;
display: block;
position: relative;
color: #868686;
text-transform: uppercase;
}
nav a:after {
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 15px;
background: #868686;
transition: width .5s linear;
}
nav a:hover:after {width: 100%;}
#media screen and (max-width: 660px) {
header {text-align: center;}
.logo-box {
float: none;
display: inline-block;
margin: 0 0 16px 0;
}
ul {float: none;}
nav li:first-of-type {margin-left: 0;}
}
#media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
display: block;
margin: 0;
height: 40px;
line-height: 40px;
}
nav li:hover {background: rgba(0,0,0,.1);}
nav a:after {content: none;}
}
#slide {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
height:600px;
}
.slide1 {
background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg) no-repeat center center fixed;
}
.slide2 {
background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-160434.png) no-repeat center center fixed;
}
.slide3 {
background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-150988.jpg) no-repeat center center fixed;
}
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
$('.fadein div:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut().next('div').fadeIn().end().appendTo('.fadein');
}, 3500);
});
</script>
</head>
<body>
<header>
<div class="container">
<div class="logo-box">
<a href="/">
<img src="images/logo.png">
</a>
</div>
<nav>
<ul>
<li>Forums</li>
<li>Rules</li>
<li>Monetization</li>
<li>Sign-up</li>
<li>Staff</li>
</ul>
</nav>
</div>
</header>
<div class="fadein">
<div id="slide"class="slide1"></div>
<div id="slide"class="slide2"></div>
<div id="slide"class="slide3"></div>
</div>
<div class="A3L_Slogan">
<div class="slogan_title">
Hardcore Roleplay Community
</div>
</div>
</body>
</html>
#slide {
position: fixed;
}
to
#slide{
position: relative;
}
and the flow of the markup styling will be fixed. and you shouldn't use multiple ids slide with the same name in your markup it's very bad and will cause a hell of problems in the nearest future.
update:
As discussed in the comments, a better solution is to remove the duplicated divs and using img tags plus applying changes on js and css to avoid flickering and overflow-x. https://codepen.io/anon/pen/eeymgo
I'm trying to make a sidebar when you open the bar it will fade out the rest of the page.
<!DOCTYPE html>
<html>
<head>
<title>Westfield Technical Academy</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="Script.js"></script>
</head>
<div id="f8">
<!-- Sidenavigation bar START -->
<div id="UI" class="sidenav">
×
Home
<a href=#>Why Choose WTA?</a>
Curriculum
Calendar
Location (Works)
</div>
<!-- Pushes site to the right -->
<div id="main">
<span style="font-size:20px;cursor:pointer" onclick="openNav()">☰ More Info</span>
</div>
<body id="bg">
<div class="pootis"></div>
<p class="maintext">We are Committed to Excellence, and we work hard to make the site a primary source for timely information for all users, and a main gateway for improved communication between parents, teachers, students and other members of our community. Westfield Technical Academy provides a quality education through shared responsibility in a safe supportive environment for all students to meet the challenges of a global society.</p>
</body>
<!-- Sidenavigation bar END -->
</div>
</html>
CSS:
/* Purple Background */
#bg {background-color:#c58414;
background-image:url(wta.jpg);
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
}
/* Sidenav Menu (ClassIs: UI) */
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left; 0;
background-color: #111;
overflow-x: hidden;
padding: 0px;
transition: 0.5s;
}
/* Sidenav Nav UI Links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #313131;
display: block;
transition: 0.4s;
}
/* When u mouse over link, change color */
.sidenav a:hover, offcanvas a:focus{
color: #f1f1f1
}
/* Position and Style the close button (TRC) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size; 36px;
margin-left: 50px;
}
/* Style page content - use this if u want to push content to right when u open sidenav */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* Smaller Screens */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidemav a {font-size 18px;}
}
.moar {
padding-right: 65em
}
.pootis {
background-image: url(z2.png);
height: 425px;
background-repeat: no-repeat;
position: relative;
width: 590px;
margin: auto;
}
.maintext {
background-color:white;
font-size: 19px;
width: 700px;
text-align: center;
position: relative;
margin-left: 550px;
}
.f8 {
height: 100%;
background-size: cover;
}
.text1 {
background-color: whitesmoke;
}
JS:
/* Set the width of the side nav to 250px */
function openNav() {
document.getElementById("UI").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
document.getElementsByTagName("body")[0];
}
/* Set the width of Sidenav to 0 and left Margin of PC to 0 and bgc 2 fffff */
function closeNav() {
document.getElementById("UI").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "fffff";
}
Help would be greatly appreciated, as It is a school project where we recreate the school landing page. Ofcourse I want to try to do advanced stuff :p, and try to make a nice looking sidebar, Only it's not working. Help?
Edit: I messed up the pasting first so i edited the post to be more readable.
here you go, I got rid of the script tags, just keep the script in your html file.
html:
<!DOCTYPE html>
<html>
<head>
<title>Westfield Technical Academy</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body id="bg">
<div id="mySidenav" class="sidenav">
×
Home
<a href=#>Why Choose WTA?</a>
Curriculum
Calendar
Location (Works)
</div>
<div id="main">
<span style="font-size:20px;cursor:pointer" onclick="openNav()">☰ More Info</span>
</div>
<div class="pootis">
<p class="maintext">We are Committed to Excellence, and we work hard to make the site a primary source for timely information for all users, and a main gateway for improved communication between parents, teachers, students and other members of our community. Westfield Technical Academy provides a quality education through shared responsibility in a safe supportive environment for all students to meet the challenges of a global society.</p>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
}
</script>
</body>
</html>
css you provided:
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* Purple Background */
#bg {background-color:#c58414;
background-image:url(wta.jpg);
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
}
/* Sidenav Menu (ClassIs: UI) */
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left; 0;
background-color: #111;
overflow-x: hidden;
padding: 0px;
transition: 0.5s;
}
/* Sidenav Nav UI Links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #313131;
display: block;
transition: 0.4s;
}
/* When u mouse over link, change color */
.sidenav a:hover, offcanvas a:focus{
color: #f1f1f1
}
/* Position and Style the close button (TRC) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size; 36px;
margin-left: 50px;
}
/* Style page content - use this if u want to push content to right when u open sidenav */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* Smaller Screens */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidemav a {font-size 18px;}
}
.moar {
padding-right: 65em
}
.pootis {
background-image: url(z2.png);
height: 425px;
background-repeat: no-repeat;
position: relative;
width: 590px;
margin: auto;
}
.maintext {
background-color:white;
font-size: 19px;
width: 700px;
text-align: center;
position: relative;
margin-left: 550px;
}
.f8 {
height: 100%;
background-size: cover;
}
.text1 {
background-color: whitesmoke;
}
heres a jsfiddle of it working
Put your whole side navigation into a div section with some opacity.
Hey so I'm working on this website and I learned how to do this thing with the Navbar so the color fades in, I can't get any of the links to work after it starts to work. From what I understand it has to do with e.preventDefault(), but I'm not sure how to fix this.
here is my code
$(window).scroll(function() {
// 100 = The point you would like to fade the nav in.
if ($(window).scrollTop() > 100 ){
$('.bg').stop().animate({
opacity : 0.5
}, 10 );
} else {
$('.bg').stop().animate({
opacity : 0.0
}, 200 );
};
});
$('.scroll').on('click', function(e){
e.preventDefault()
$('html, body,').animate({
scrollTop : $(this.hash).offset().top
}, 1500);
});
/****NAV*****/
body{
background-color: #000;
font-family: 'Trebuchet Ms';
}
.container {
width: 100%;
height: 2000px;
position: relative;
/* font-family: 'Trebuchet Ms';*/
}
.bg {
background: #777;
width: 100%;
height: 100px;
opacity: 1;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
ul {
height: 100px;
margin: -70px auto 0 auto;
width: 500px;
}
li {
float: left;
list-style: none;
margin: 10px 20px;
text-transform: uppercase;
/* letter-spacing: 0px;*/
color: wheat;
}
li a {
/* height: 100px;*/
text-transform: uppercase;
color: wheat;
font-family: 'Trebuchet Ms';
font-size:
}
/*
a {
text-align: center;
font-size: 50px;
color: #bdbdbd;
font-weight: bold;
text-decoration: none;
letter-spacing: 5px;
text-shadow: 1px 1px 1px #949494;
position: relative;
z-index: 1;
margin: 0 auto;
display: block;
}
a:hover {
color: #a6a6a6;
text-shadow: 1px 1px 1px #C9C9C9;
}
*/
a {
border-style: none;
}
a:link {
text-decoration: none;
}
a:hover {
color:wheat;
}
a:active {
color: #2c9d91;
text-decoration: inherit;
}
.down {
top: 150px;
}
.up {
top: 1800px;
}
/*******OVERLAY*******/
#writingoverlay {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
opacity: .5;
/* background: radial-gradient( coral, gray, darkslategray);*/
/* background: radial-gradien( coral,darkslategray, gray);*/
/* background: radial-gradient(darkslategray 35%, dimgray, gray);*/
background: radial-gradient(lightgray, gray, dimgray);
color: crimson
}
/*
#video-overlay {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
background: linear-gradient(to bottom left, crimson, coral);
opacity: 0.2;
}
*/
/*****VIDEO FULL SCREEN*****/
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
/*****FOOTER******/
footer {
color: wheat;
text-align: center;
font-size: 20px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="top" class="container">
<div class="fixed">
<div class="bg"></div>
<ul class="navBar">
<li>home
</li>
<li>photography
</li>
<li>film
</li>
<li>contact
</li>
</ul>
</div>
</div>
<footer>Contact info.</footer>
<div id="writingoverlay"></div>
<!-- <div id="video-overlay"></div> -->
<div class="vidOverlay">
<video id="video" autoplay controls loop muted>
<source src="/Img/8.mp4" type="video/mp4">
<source src="/Img/8.webm" type="video/webm">
</video>
</div>
</body>
</html>
This is actually not related to your e.preventDefault, it's related to your opacity animation. Basically, you are bringing an opacity tag to the div which is covering your link. If you want to test this, you can run your entire code and just use a different animation instead of opacity, such as
height: '150px'
You can also see this effect if you just edit the css style tag to remove opacity in the developer console.
I think if you change this logic to use navbar instead of bg, you will get it to work. I believe the problem is that you have a div covering another div, so you can't click the div underneath.
This works for me, but obviously you'll have to change your css to match what you need:
if ($(window).scrollTop() > 100 ){
$('.navBar').stop().animate({
opacity : 0.5
}, 10);
} else {
$('.navBar').stop().animate({
opacity : 0.0
}, 200 );
};
i think your missed a /, try to put /index.html , the / is for your to redirect your path.
<ul class="navBar">
<li>home
</li>
<li>photography
</li>
<li>film
</li>
<li>contact
</li>
</ul>
</div>