I'm trying to make an animated menu, I would like to do it with CSS, but if not possible also javascript or Jquery.
.nav {
text-align: right;
height: 100%;
width: 17%;
position: absolute;
box-shadow: -1px 4px 28px 0px rgba(0, 0, 0, 0.75);
background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
}
.menu {
margin: 0;
width: 100%;
height: 95%;
text-align: left;
overflow: auto;
background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
}
.menu a {
font-family: Georgia, "Times New Roman", serif;
text-shadow: 2px 2px 5px black;
line-height: 26px;
padding: 5px;
border-left: 4px solid;
margin: 0 0 0 0;
margin-top: 5%;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .1s;
transition: all .1s;
cursor: pointer;
white-space: nowrap;
display: -webkit-box;
-webkit-box-align: center;
align-items: center;
color: white;
}
/**** */
a:hover {
border-left: 5px solid #b93632;
color: #b93632;
}
span:hover {
color: yellow;
}
/**** */
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media screen and (max-width:800px),
screen and (max-height: 500px) {
.nav {
text-align: right;
height: 70px;
width: 100%;
line-height: 70px;
position: relative;
z-index: 1;
}
.menu {
text-align: center;
width: 100%;
display: none;
overflow: auto;
}
#toggle:checked+.menu {
display: block;
height: 400px;
}
}
<div class="nav">
<label for="toggle"><i class="fas fa-users"></i></label>
<input type="checkbox" id="toggle" />
<div class="menu" id="users">
<center><span>Utenti online: </span><span id="n_utenti"> 0</span></center>
<input type="text" id="cerca_utenti" onkeyup="Cerca()" placeholder="Cerca un utente">
<ul id="utenti_lista">
</ul>
</div>
</div>
I just can't get it to become animated, this is how it works, but it doesn't have ANIMATIONS, it has no transitions, how to do it?
I changed now, because CSS was not well understood. there is both the media quieres and the regular menu.
You can refer to the mdn documentation on css animation at https://developer.mozilla.org/en-US/docs/Web/CSS/transition.
In your case you cannot apply animation to display property, however you can add a animation to opacity, which practically looks like a fade-in/out animation.
This is the fiddle https://jsfiddle.net/e90dL586/ I've updated with opacity for you.
#toggle + .menu {
text-align: center;
width: 100%;
opacity: 0;
overflow: auto;
}
#toggle:checked + .menu {
opacity: 1;
transition: opacity 1s;
height:400px;
}
For more effects, refer the mdn docs.
Related
I'm very new to coding and have been following tutorials to learn coding. I have very successfully created a hamburger menu after following a tutorial and I'm totally chuffed!
My happiness soon faded away when I realised that the mobile menu doesn't disappear if I forget to click the X and expand the screen. The Menu remains. I have attached the Code and HTML and CSS. Please can someone help me write the correct code to make it disappear?
I have tried to do this with CSS by adding 'display: none' to the mobile_menu and mobile_menu bottom' ... and also tried moving it with the transitionX(100%) but to no luck.
So I'm guessing this a JS related issue which I have 0 knowledge at the moment.
sadly I can't post images because I don't have 10 reputations. sad. so I'll try and paste it here.
hamburger
<div>
<button type="button" class="hamburger" id="menu-btn" >
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</button>
</div>
<div class="mobile-menu hidden" id="menu">
<ul>
<li>worship and music</li>
<li>visit us</li>
<li>support us</li>
</ul>
<div class="mobile-menu-bottom">
<button class="btn donate">donate</button>
<a href="#"><img src="images/pin.png" alt="locator">
<span>locate us</span></a>
</div>
</div>
</div>
CSS Code:
.navbar{
width: 100%;
height: auto;
background-color: #F6F6F4;
padding:20px;
box-shadow: 0 1px 3px rgb(0 0 0 / 10%),
0 2px 2px rgb(0 0 0 / 6%),
0 0 2px rgb(0 0 0 / 7%);
}
.navbar-container{
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar ul {
display: flex;
align-items: center;
}
.navbar li {
margin: 0 20px;
}
.navbar-brand img{
width: 320px;
height:113px;
margin: auto 0;
margin-left: 25px;
}
.navbar-nav-left{
text-transform: uppercase;
font-size: .9rem;
}
.navbar-nav-right img
{
height: 20px;
width: 20px;
margin-right: 20px;
}
.navbar-nav-right li:first-child a
{
display: flex;
align-items: center;
}
.btn {
cursor: pointer;
display: inline-block;
background: none;
border: 1px #000 solid;
border-radius: 50px;
padding: 7px 16px;
line-height: 1.2;
text-align: center;
text-decoration: none;
}
.donate {
background-color: var(--Purple);
border: none;
font-size: 1rem;
}
.donate:hover {
background-color:white;
font-size: 1rem;
color: #000000;}
.donate_button{
color: white;
}
.hamburger {
cursor: pointer;
width: 24px;
height: 24px;
position: relative;
background: none;
border: none;
z-index: 10;
transition: all 0.25s;
padding: 0 25px;
display: none;
}
.top, .middle, .bottom {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 2px;
background: #000000;
transform: rotate(0);
transition: all 0.5s;
}
.middle {
transform: translateY(7px);
}
.bottom {
transform: translateY(14px);
}
.open .top {
transform: rotate(45deg) translateY(6px) translateX(6px);
}
.open .middle {
opacity: 0;
}
.open .bottom {
transform: rotate(-45deg) translateY(6px) translateX(-6px);
}
mobile menu
.mobile-menu {
position: fixed;
background-color:#abc09f;
top: 161px;
right:0;
width: 90%;
height: 100%;
padding: 30px;
box-shadow: inset 0 4px 3px -3px rgb(0 0 0 /10%),
inset 0 4px 2px -2px rgb(0 0 0 /7%);
transition: all 0.3s;}
.mobile-menu div a {
display: flex;
align-items: center;
font-size:1rem;
}
.hidden {
transform: translateX(100%);
}
.no-scroll {
overflow: hidden;
}
#media(max-width: 768px){
.hamburger {
display: block;
}
.navbar-brand img{
width: 220px;
height:113px;
margin: auto 0;
margin-left: 25px;
}
.navbar .navbar-nav-left,
.navbar .navbar-nav-right{
display: none;
}
}
#media(max-width:1080px){
.hamburger {
display: block;
}
.navbar .navbar-nav-left,
.navbar .navbar-nav-right{
display: none;}
}
JS SCRIPT
const btn = document.getElementById('menu-btn')
const nav = document.getElementById('menu')
function navToggle() {
btn.classList.toggle('open')
nav.classList.toggle('hidden')
document.body.classList.toggle('no-scroll')
}
btn.addEventListener('click', navToggle)
The problem is in the mobile menu CSS section. You have to add translateX(100%) to mobile-menu to hide the mobile menu on a bigger screen by default.
For the smaller screen change it to translateX(0%) so that it shows the menu when the 'hidden' class is not active.
And move the .hidden{translateX(100%)} to the 1080px media query as it is not needed for the bigger screen. The changes are wrapped inside the comments.
const btn = document.getElementById('menu-btn')
const nav = document.getElementById('menu')
function navToggle() {
btn.classList.toggle('open')
nav.classList.toggle('hidden')
document.body.classList.toggle('no-scroll')
}
btn.addEventListener('click', navToggle)
.navbar{
width: 100%;
height: auto;
background-color: #F6F6F4;
padding:20px;
box-shadow: 0 1px 3px rgb(0 0 0 / 10%),
0 2px 2px rgb(0 0 0 / 6%),
0 0 2px rgb(0 0 0 / 7%);
}
.navbar-container{
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar ul {
display: flex;
align-items: center;
}
.navbar li {
margin: 0 20px;
}
.navbar-brand img{
width: 320px;
height:113px;
margin: auto 0;
margin-left: 25px;
}
.navbar-nav-left{
text-transform: uppercase;
font-size: .9rem;
}
.navbar-nav-right img{
height: 20px;
width: 20px;
margin-right: 20px;
}
.navbar-nav-right li:first-child a {
display: flex;
align-items: center;
}
.btn {
cursor: pointer;
display: inline-block;
background: none;
border: 1px #000 solid;
border-radius: 50px;
padding: 7px 16px;
line-height: 1.2;
text-align: center;
text-decoration: none;
}
.donate {
background-color: var(--Purple);
border: none;
font-size: 1rem;
}
.donate:hover {
background-color:white;
font-size: 1rem;
color: #000000;
}
.donate_button{
color: white;
}
.hamburger {
cursor: pointer;
width: 24px;
height: 24px;
position: relative;
background: none;
border: none;
z-index: 10;
transition: all 0.25s;
padding: 0 25px;
display: none;
}
.top, .middle, .bottom {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 2px;
background: #000000;
transform: rotate(0);
transition: all 0.5s;
}
.middle {
transform: translateY(7px);
}
.bottom {
transform: translateY(14px);
}
.open .top {
transform: rotate(45deg) translateY(6px) translateX(6px);
}
.open .middle {
opacity: 0;
}
.open .bottom {
transform: rotate(-45deg) translateY(6px) translateX(-6px);
}
.mobile-menu {
position: fixed;
background-color:#abc09f;
top: 161px;
right:0;
width: 90%;
height: 100%;
padding: 30px;
box-shadow: inset 0 4px 3px -3px rgb(0 0 0 /10%), inset 0 4px 2px -2px rgb(0 0 0 /7%);
transition: all 0.3s;
/* ------------------Change here---------------*/
transform: translateX(100%); /* add translateX(100%) to hide the menu in bigger screen by default */
/* ------------------Change here---------------*/
}
.mobile-menu-bottom .nav__img{
max-width: 10px;
height: 10px;
}
.mobile-menu div a {
display: flex;
align-items: center;
font-size:1rem;
}
.no-scroll {
overflow: hidden;
}
#media(max-width: 768px){
.hamburger {
display: block;
}
.navbar-brand img{
width: 220px;
height:113px;
margin: auto 0;
margin-left: 25px;
}
.navbar .navbar-nav-left,
.navbar .navbar-nav-right{
display: none;
}
}
#media(max-width:1080px){
.hamburger {
display: block;
}
.navbar .navbar-nav-left,
.navbar .navbar-nav-right{
display: none;
}
/* ------------------Change here---------------*/
.mobile-menu{
transform: translateX(0%); /* Here mobile-menu will be shown if hidden class is not active */
}
.hidden {
transform: translateX(100%); /* And the menu will hide again if the hidden class is active*/
}
/* ------------------Change here---------------*/
}
<div>
<button type="button" class="hamburger" id="menu-btn" aria-label="hamburger">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</button>
</div>
<div class="mobile-menu hidden" id="menu">
<ul>
<li>worship and music</li>
<li>visit us</li>
<li>support us</li>
</ul>
<div class="mobile-menu-bottom">
<button class="btn donate">donate</button>
<a href="#"><img class="nav__img" src="https://img.freepik.com/premium-vector/location-icon-simple-symbol-red-pin-sign_399998-369.jpg?w=2000" alt="locator">
<span>locate us</span></a>
</div>
</div>
I adjusted it based on my screen size, and I've tried using both relative and absolute positions for .navbar, but when I open it on my laptop the navbar content overflows the parent image, setting overflow to hidden doesn't fix the issue since i want it to stay over the bottom of the image at all times regardless of screen size. Here's the jsfiddle https://jsfiddle.net/Montinyek/4dbf5p9e/1/
body, html {
height: 100%;
margin: 0;
padding:0;
font-family: Times, Times New Roman, serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url(./hero.jpg);
height: 80%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f2f2f2;
}
h1 {
padding: 80px 60px;
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.nav-container {
display: inline-block;
position: relative;
top: 87%;
}
.navbar {
overflow: hidden;
height: 100px;
display: inline-flex;
gap: 70px;
align-items: center;
justify-content: center;
width: 99vw;
}
.navbar a.main {
color: #f2f2f2;
padding-left: 47px;
padding-right: 47px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #f2f2f2;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
margin: 0px;
transition: all 0.3s;
display: block;
}
.navbar a.main:hover {
background-color: #ddd;
transform: scale(1.3);
color: black;
}
.dropdown-content {
visibility: none;
opacity: 0;
pointer-events: none;
position: absolute;
left: 64.6%;
top: 80%;
border-radius: 5px;
background-color: black;
min-width: 160px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
z-index: 1;
transition: all 0.5s;
}
.dropdown-content a {
float: none;
color: #ddd;
padding: 12px;
text-decoration: none;
display: block;
text-align: center;
transition: all 0.5s;
font-size: 1.5rem;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
</style>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Welcome</h1></div>
<div class="nav-container">
<div class="navbar">
<a class="main" href="#home">Home</a>
<a class="main" href="#mission">Mission</a>
<a class="main" href="#news">Contact</a>
<div class="dropdown">
<a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
Travel
</div>
</div>
</div></div>
</div>
</body>
</html>```
I don't know if I understood well your issue, but I made some minor changes and got this result demo
HTML:
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Welcome </h1>
</div>
<div class="navbar">
<a class="main" href="#home">Home</a>
<a class="main" href="#mission">Mission</a>
<a class="main" href="#news">Contact</a>
<div class="dropdown">
<a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
Travel
</div>
</div>
</div>
</div>
CSS:
body,
html {
height: 100vh;
margin: 0;
padding: 0;
font-family: Times, Times New Roman, serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),
url("https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.technistone.com%2Fen%2Fcolor%2Fstarlight-black&psig=AOvVaw3Ekck4Ncbtpa2vQdYYlN_V&ust=1646455838525000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCID6_o3Uq_YCFQAAAAAdAAAAABAD");
height: 80vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;
}
.hero-text {
display: flex;
justify-content: center;
text-align: center;
width: 100%;
color: #f2f2f2;
}
.hero-text h1 {
padding: 80px 60px;
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.navbar {
overflow: hidden;
height: 120px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
max-width: 100vw;
width: 100%;
}
.navbar a.main {
color: black;
padding-left: 47px;
padding-right: 47px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
margin: 0px;
transition: all 0.3s;
display: block;
}
.navbar a.main:hover {
background-color: #ddd;
transform: scale(1.3);
color: black;
}
.dropdown-content {
visibility: none;
opacity: 0;
pointer-events: none;
position: absolute;
left: 64.6%;
top: 80%;
border-radius: 5px;
background-color: black;
min-width: 160px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
rgba(0, 0, 0, 0.22) 0px 10px 10px;
z-index: 1;
transition: all 0.5s;
}
.dropdown-content a {
float: none;
color: #ddd;
padding: 12px;
text-decoration: none;
display: block;
text-align: center;
transition: all 0.5s;
font-size: 1.5rem;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
I am using GTM's "Custom HTML Tag" option with the my below code but it is giving me the following error when I try to publish it: Invalid HTML, CSS, or JavaScript found in template.
I've seen other threads where it looks like GTM doesn't support or recognize certain tag attributes. I have tested my code, and no error prompts show up in the console either. It is a standard bootstrap modal:
function myFunction() {
var copyText = document.getElementById("myInput");
navigator.clipboard.writeText(copyText.innerHTML);
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copied: " + copyText.innerHTML;
}
function outFunc() {
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copy";
}
$("#myModal").modal();
body {
font-family: 'Varela Round', sans-serif
}
.modal-login {
color: #636363;
max-width: 850px;
width: 100%;
margin: 30px auto;
background-image: none!important
}
.modal-login .modal-content {
padding: 20px;
min-height: 586px;
border-radius: 5px;
margin: 1rem;
background-color: #eaebeb;
background-image: url(https://media-services.dcm-inc.com/couponsites/static/resources/img/festival.png);
background-size: 100%;
background-repeat: no-repeat
}
.modal-login .modal-header {
border-bottom: none;
position: relative;
justify-content: center;
margin-top: 130px
}
.modal-login img {
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
width: 40%
}
.modal-login .form-group {
position: relative
}
.modal-login h4 {
text-align: center;
font-size: 20px;
width: 80%;
display: block;
margin-left: auto;
margin-right: auto
}
.modal-login i {
position: absolute;
left: 13px;
top: 11px;
font-size: 18px
}
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%
}
#media screen and (max-width:600px) {
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%
}
}
.modal-login .form-control:focus {
border-color: #fcda7b
}
.modal-login .btn,
.modal-login .form-control {
min-height: 40px;
border-radius: 30px
}
.modal-login .hint-text {
text-align: center;
padding-top: 10px
}
.modal-login .close {
position: absolute;
top: -5px;
right: -5px
}
.button,
.modal-login .btn {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%);
border: none;
line-height: normal
}
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%
}
#media screen and (max-width:600px) {
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%
}
}
.modal-login .custom-social {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%
}
.modal-login .btn:focus,
.modal-login .btn:hover {
opacity: .7
}
.trigger-btn {
display: inline-block;
margin: 100px auto
}
.contest-social {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%
}
.modal-login .fa:hover {
opacity: .7
}
.modal-login .contest-social-facebook {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-twitter {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-youtube {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-instagram {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.flexC {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
-webkit-flex-flow: row wrap
}
.modal-title img {
margin: 1rem;
max-width: 100px;
border-radius: 10px;
box-shadow: 0 0 3px 3px #ddd
}
.modal-title p {
font-size: 20px;
font-weight: 500;
max-width: 300px;
color: #000
}
.ccme {
color: #fd5c88
}
.codelinkbox {
margin: 0;
position: relative;
text-align: center;
width: auto;
position: relative
}
.codeValue {
border: 2px dashed currentColor;
font-size: 28px;
height: 50px;
line-height: 48px;
padding: 0 15px;
border-right: none;
border-radius: 0;
display: inline-block;
white-space: nowrap;
cursor: pointer;
border-radius: 6px 0 0 6px!important;
font-weight: 700;
color: #000
}
.buttonBtn.copy {
background-color: currentColor;
cursor: pointer;
font-size: 16px;
height: 50px;
line-height: 42px;
margin: 0;
padding: 0 15px;
position: relative;
text-transform: capitalize;
overflow: hidden;
min-width: 0;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
border-radius: 0 6px 6px 0
}
.buttonBtn.copy:hover {
background: #6ba62c;
color: #fff
}
.copy span {
color: #fff
}
.m1 {
margin: 1rem auto
}
.txtC {
text-align: center
}
.buttonBtn {
position: relative;
cursor: pointer;
font-size: 15px;
left: 0;
top: 0;
margin: 0;
height: 54px;
min-width: 180px;
border: 0;
outline: 0;
padding: 0 15px;
border-radius: 10px;
line-height: 54px
}
.arrRight {
color: #fff;
font-weight: 700
}
.arrRight:after {
content: '\2192';
display: inline-block;
color: #fff
}
.emailIcon {
width: 24px;
max-width: 24px;
margin: 0 5px
}
.termsto {
margin: 3rem 0
}
.sendemail {
font-size: 13px;
margin: 10px 0
}
#media all and (max-width:540px) {
.modal-title {
text-align: center
}
.modal-login .modal-header {
margin-top: 40px
}
}
.testtip {
position: relative;
display: inline-block;
}
.testtip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 120%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.testtip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.testtip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<link href="https://fonts.googleapis.com/css?family=Roboto%7CVarela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-login border">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<div class="flexC">
<img src="https://res.cloudinary.com/csnetworkco/image/upload/c_scale,h_150,w_150/csnimages/Noon_568012.jpg" alt="Noon Discount Code" title="Noon Discount Code" width="150" height="150" loading="lazy">
<p>Up To 70% Off Sale + 10% Off Using Noon Coupon Code</p>
</div>
</div>
<div class="modal-body">
<div class="codelinkbox flexC m1">
<div id="myInput" class="codeValue">YB26</div>
<div class="testtip">
<button class="buttonBtn copy ccme" onclick="myFunction()" onmouseout="outFunc()"><span id="myTooltip">Copy</span></button>
</div>
</div>
</div>
<div class="row termsto">
<div class="col-sm-8">
<p><strong>Things to remember:</strong></p>
<ul>
<li>Don't forget to paste the code in the checkout during the purchase</li>
<li>Get 10% Off for New Customers & 5% Off for Returning Customers. </li>
<li>Code Usage: 2 times per customer.</li>
<li>Always contact our customer support team if there is any issues</li>
<li>You can always share the code</li>
</ul>
</div>
<div class="col-sm-4 txtC ">
<button class="buttonBtn ccme button" id=""><span class="arrRight">VISIT SITE </span></button>
</div>
</div>
</div>
</div>
</div>
</div>
I found what the issue was, in the img tag I was adding an attribute loading="lazy" due to which the invalid HTML CSS or JS error was being thrown
They really need to highlight what part of the code is the problem
I removed the above mentioned attribute and am now able to publish the tag
Okay so my navigation is positioned absolute. Also I have a div above that also positioned absolute but with a z index of 2. When you click a toggle button the div with the z-index of 2 gets 240 pixels of margin added to the left revealing the navigation below it. This works perfectly apart from on mobile you can see the navigation below the div by scrolling. How can I fix this?
My website is up at http://www.zoidstudios.com/
Code Pen: http://codepen.io/ZoidCraft/pen/KrRvjr
<nav class="main-nav">
<ul>
<li>Examples</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<header class="top-header">
<button class="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<h1>Zoid Studios</h1>
<h2>A <span>visual design</span> studio based in the <span>united kingdom</span></h2>
<a class="btn-view" href="">view our work <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</header>
.main-nav {
position: fixed;
background-color: #080911;
height: 100%;
width: 240px;
transition: all 0.3s ease-in-out; }
.main-nav ul {
display: flex;
flex-direction: column; }
.main-nav a {
display: block;
padding: 20px 40px;
color: #FFFFFF;
text-align: center;
font-size: 1rem;
transition: all 0.3s ease-in-out; }
.main-nav a:hover {
color: #ffff00; }
.shift {
margin-left: 240px; }
.menu-toggle {
position: absolute;
z-index: 3;
top: 0;
left: 0;
padding: 10px;
margin: 20px;
background-color: transparent;
border: none;
outline: none;
cursor: pointer; }
.menu-toggle span {
display: block;
background-color: #FFFFFF;
width: 18px;
height: 2px;
margin: 4px; }
.top-header {
transition: all 0.3s ease-in-out;
width: 100%;
height: 100%;
display: flex;
position: absolute;
z-index: 2;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #101223;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); }
.top-header h1 {
color: #FFFFFF;
font-size: 3.2rem;
font-weight: 800;
padding: 25px 0;
text-align: center; }
.top-header h2 {
color: #FFFFFF;
font-size: 2.6rem;
margin-bottom: 80px;
text-align: center;
text-transform: capitalize; }
.top-header h2 span {
color: #ffff00; }
#media screen and (max-width: 768px) {
.top-header h1 {
font-size: 3rem;
margin: 0 10px 30px 10px; }
.top-header h2 {
font-size: 2.4rem;
margin: 0 10px 30px 10px; } }
.btn-view {
color: #FFFFFF;
padding: 15px 20px;
border: 1px solid #ffff00;
text-transform: capitalize;
transition: all 0.3s ease-in-out; }
.btn-view i {
padding-left: 10px; }
.btn-view:hover {
color: #101223;
background-color: #ffff00;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75); }
Is there another way of doing this exact way of side navigation?
Thanks for the help :)
I had an issue with the blank space below the footer. I've managed to solve this by adding a jQuery sticky footer as the CSS methods doesn't work for me.
However, I do have a problem with main content of the webpage. If I adjust .bg-photo's height, it will affect how low or high the footer's placement will go.
Any content within .bg-photo will not affect the footer's placement at all.
I'm thinking it could be my HTML or CSS that's doing this sort of issue. Although, I'm not sure.
What I want is that the page automatically adjust to any screen's height and the user doesn't have to scroll down to view just the footer.
Here's the webpage:
http://planet.nu/dev/test/index.html
Here's the jsFiddle:
https://jsfiddle.net/mqfrnjaa/
And the codes if you need to view them right away.
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $(".footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
html, body {
height: 100%;
}
*{
margin: 0;
}
body {
background: #fff;
min-height: 600px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #393c3d;
line-height: 22px;
}
#fw_header {
margin: 0 auto;
position: relative;
width: 980px;
}
#fw_header ul {
list-style-type: none;
}
.forums #fw_header {
margin-bottom: 0;
}
#fw_header ul {
padding-left: 12px;
padding-top: 6px;
}
#fw_header li {
float: left;
padding: 0 3px;
}
#fw_header li a {
padding: 0 8px;
}
#fw_header li a:hover {
border-bottom: 5px solid #829AC6;
text-decoration: none;
}
#fw_header li a.active {
border-bottom: 5px solid #4E6CA3;
}
#fw_header ul.submenu li a.active,
#fw_header ul.subsubmenu li a.active {
border-bottom: 5px solid #829AC6;
}
#fw_header ul.submenu,
#fw_header ul.subsubmenu {
margin-top: 1em;
padding-top: 0;
}
#fw_header ul.submenu_usage {
padding-left: 32px;
}
#fw_header ul.submenu_plugins {
padding-left: 20px;
}
#fw_header ul.submenu_development {
padding-left: 23px;
}
#fw_header ul.submenu_extras {
padding-left: 14px;
}
#fw_header ul.submenu_testing {
padding-left: 480px;
}
#fw_header ul.submenu_styling {
padding-left: 80px;
}
#fw_header ul.subsubmenu {
padding-left: 120px;
}
#fw_header ul.submenu li,
#fw_header ul.subsubmenu li {
font-size: 80%;
}
#fw_header {
font-size: 16px;
}
#fw_header a {
color: #4E6CA3 !important;
}
#fw_header h1 {
border-bottom: medium none;
color: black;
font-size: 2em;
line-height: 1.45em;
margin-top: 32px;
vertical-align: middle;
}
#fw_header h1 img {
margin-top: -5px;
vertical-align: middle;
}
#fw_header h1 a {
color: black !important;
}
#fw_header h1 a:hover {
text-decoration: none;
}
#header_options {
position: absolute;
right: 150px;
top: -32px;
width: 495px;
}
#header_options .option {
float: left;
padding: 12px 0;
text-align: center;
width: 165px;
}
#header_options a:hover {
text-decoration: none;
}
#header_options .option:hover {
background-color: #F5F7FA;
}
#header_options div.option img {
margin-right: 7px;
vertical-align: middle;
}
#header_options .option table {
margin: 0 auto;
}
#header_options .option table td {} #header_options #options_search {
padding: 7px 0;
width: 495px;
}
#header_options #options_download {} #options_search input[type="text"] {
height: 20px;
width: 350px;
}
#header_download {
background: url("../images/dl_button_220.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 0;
text-align: center;
top: -8px;
width: 220px;
}
#header_donate {
background: url("../images/donate_button.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 220px;
text-align: center;
top: -8px;
width: 220px;
}
#header_download a,
#header_donate a {
color: white;
}
#header_download a:hover,
#header_donate a:hover {
text-decoration: none;
}
#dontate_wrapper {
background-color: #FCFCFC;
border: 1px dotted #A5A5A5;
color: #555555;
font-size: 0.8em;
margin: 0 0 1.5em;
padding: 5px;
text-align: center;
}
#header_advert {
background-color: white;
height: 200px;
overflow: visible;
position: absolute;
right: 0;
top: -32px;
width: 150px;
}
body .adpacks {} body .one .bsa_it_ad {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #999999;
margin: 0;
text-align: left;
}
body .one .bsa_it_ad:hover {
background-color: #F5F7FA;
color: black;
}
body .one .bsa_it_ad .bsa_it_i {
display: block;
float: none;
font-size: 11px !important;
margin: 0;
padding: 0;
text-align: center;
}
body .one .bsa_it_ad .bsa_it_d {
font-size: 11px !important;
}
body .one .bsa_it_ad .bsa_it_i img {
border: medium none;
padding: 0;
}
body .one .bsa_it_ad .bsa_it_t {
padding: 6px 0 0;
}
body .one .bsa_it_p {
display: none;
}
.one .bsa_it_ad {
color: #F5F7FA;
padding: 4px 0 0 !important;
}
body #bsap_aplink,
body #bsap_aplink:hover {
display: block;
font-size: 10px;
left: 104px;
position: absolute;
text-decoration: none;
top: 45px;
transform: rotate(90deg);
width: 100px;
}
.css_small {
font-size: 75%;
line-height: 1.45em;
}
.css_vsmall {
font-size: 65%;
line-height: 1.45em;
}
#dt_example #container {
margin: 64px auto 30px !important;
}
.header {
width: 100%;
background: rgba(255, 255, 255, 0.6);
color: #034e7c;
text-align: center;
padding: 20px 0;
height: 115px;
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D73000', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
}
.header img.logo {
height: 105px;
}
.header ul.breadcrumb li a {
font-family: 'Open Sans';
font-size: 23px;
color: #4a4a4a
}
.header ul.log-in {
list-style-type: none;
display: inline;
float: right;
margin-top: 55px;
margin-right: 40px;
}
.header ul li {
display: inline;
color: red;
margin-right: 35px;
}
.header ul.log-in li,
.header ul.log-in li a {
display: inline;
font-size: 19px;
color: red;
text-decoration: none
}
.header .dateButton,
.dateButton {
width: 300px;
height: 45px;
background: #e63308;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e63308), color-stop(100%, #db3304));
background: -webkit-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -o-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -ms-linear-gradient(top, #e63308 0%, #db3304 100%);
background: linear-gradient(to bottom, #e63308 0%, #db3304 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e63308', endColorstr='#db3304', GradientType=0);
float: right;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-right: 70px;
text-align: center;
cursor: pointer;
margin-top: -8px;
}
.header .dateButton a,
.dateButton a {
height: 30px;
vertical-align: middle;
line-height: 45px;
font-weight: bold;
color: #f0f0f0;
font-size: 23px;
}
.header .dateButton img,
.dateButton img {
padding-right: 5px
}
.footer {
width: 100%;
background: #FFF;
text-align: center;
height: 40px;
}
.footer p {
color: #4a4a4a;
font-family: 'Open Sans', sans-serif;
padding: 30px 0;
}
.footer p a {
color: #9fcf64;
}
.navigation {
min-width: 1300px;
width: 100%;
border-top: solid 1px #d6d6d6;
border-bottom: solid 1px #d6d6d6;
height: 60px;
background: linear-gradient(to bottom, #f5f5f5 0%, #ececec 10%, #ededed 100%);
}
.navigation ul.breadcrumb {
padding: 0px;
margin: 0;
margin-left: 50px;
margin-top: 15px;
margin-right: 0px;
width: 1000px;
}
.navigation ul li {
list-style-type: none;
}
.navigation ul li a {
color: #4a4a4a;
text-decoration: none;
font-weight: bold;
font-size: 23px;
float: left;
margin-right: 10px;
}
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 3px 0 3px 5.2px;
border-color: transparent transparent transparent #4a4a4a;
float: left;
margin-top: 8px;
margin-right: 10px;
}
.top-section {
height: 100px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #393c3d;
line-height: 22px;
}
.bg-photo{
background:url(http://planet.nu/dev/test/images/bg.jpg);
background-size: cover;
height: 75%;
text-align: center;
}
.bg-photo:before{
content: '';
display: inline-block;
vertical-align: middle;
margin-right: -0.25em;
}
.loginText{
font-size: 16px;
}
#createCampaignButton {
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
font-size: 18px;
/* font-weight: bold; */
color: #fff;
background: #8bbd3a;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
table{
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.9);
}
h1{
color: #4a4a4a;
font-size: 48px;
}
table th{
color: #666666;
padding-top: 10px;
text-align: left;
padding-left: 15px;
}
table td {
padding-left: 15px;
}
table td input{
padding-left: 5px;
height: 30px;
font-size: 22px;
margin-bottom: 20px;
width: 100%;
}
tbody{
width: 95%;
display: table;
}
<div class="header">
<div class="top-section">
<img class="logo" src="http://planet.nu/dev/test/images/littleforest_logo.jpg">
</div>
</div>
<div class="bg-photo col-md-12 col-xs-12">
<div class="col-md-6 col-sm-9">
<h1 style="font-size: 35px; text-align:center; color:#FFF;margin:20px 0 0 0">
Welcome to LFi
</h1>
<p style="text-align:center; color: #FFF; font-size: 20px; padding: 28px 0 0 0;">Insight that drives web success</p>
<br>
<form method="post" action="/crawler/LoginServlet">
<table style="width: 40%; padding: 20px 30px; display: inline-block; vertical-align: middle; margin: 30px 0 0 0; background: rgba(255,255,255, 0.9);">
<tbody>
<tr>
<th>
User Name
</th>
</tr>
<tr>
<td>
<input type="text" name="username" class="textInput loginText" placeholder="User Name">
</td>
</tr>
<tr>
<th>
Password
</th>
</tr>
<tr>
<td>
<input type="password" name="password" value="" class="textInput loginText" placeholder="Password">
</td>
</tr>
</tbody>
</table>
<div>
<p class="submit">
<input type="submit" name="commit" class="button" id="createCampaignButton" value="Log in" style="width:260px; display: inline-block; vertical-align: middle; margin: 20px 0 0 0;">
</p>
</div>
</form>
</div>
</div>
<div class="footer col-md-12 col-xs-12">
<p>
Powered by Little Forest a tool that encourages continuous improvement towards web success.
</p>
</div>
What can come in handy in situation like this is css property vh.
Depends on which browsers you have to support, but to adjust to height of view port you can do height: 100vh or vmin.
More details on browser support: http://caniuse.com/#feat=viewport-units
You could achieve sticky-footer without any plugins. Here i did "sticky footer and header" only with css. One can add up more content under the form and get assured that the page stretches right down while content stays above the footer - here.
/**sticky-footer layout**/
body {
min-height: 500px;
}
.header,
#main,
.footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header {
height:120px !important;
overflow:hidden;
background:#ffffff !important;
position:relative;
z-index: 10;
padding:0 !important;
opacity:0.9;
}
.footer {
height:100px !important;
background:#ffffff !important;
overflow:hidden;
opacity:0.9;
padding:0 !important;
}
#main {
min-height:100%;
margin:-120px 0 -100px;
height:auto !important;
}
#main:after,
#main:before {
content:"";
display:block !important;
margin:0;
}
#main:before {
height:120px;
}
#main:after {
height:100px;
}
However, you might not like the fact that your bg container .bg-photo#main lays underneath header and footer (which i made opaque on purpose to demonstrate, how the blocks are positioned), thus cutting bits of your leaves background.
You would instinctively wish to transfer the background to an inner immediate div inside the main section. I've sketched this eventuality as well, however since it's uses vh units,
min-height: calc( 100vh - 220px);
it might not work in all browsers, so beware, i also used calc to subtract the header and the footer. I hope it'll work reliably for you.