We Keep Coding

screen-responsive navbar can't work properly

I have navigation bar for pc and for mobile, problem is if I maximize window when mobile navbar is opened, mobile navbar will disappear as it should but desktop navbar doesn't appear. I am working with bootstrap template and I don't know if my problem solution requires javascript knowledge but if it does, I can show it.
Here is my css code
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 30px;
font-size: 15px;
font-weight: 500;
color: #751D41;
white-space: nowrap;
transition: 0.3s;
}
.navbar a.active { color: #751D41}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #402D85;
}
.navbar .getintouch,
.navbar .getintouch:focus {
padding: 8px 20px;
margin-left: 30px;
border-radius: 50px;
color: #751D41;
font-size: 14px;
border: 2px solid #751D41;
font-weight: 600;
}
.navbar .getintouch:hover,
.navbar .getintouch:focus:hover {
color: #fff;
background: #751D41;
}
/**
* Mobile Navigation
*/
.navbar-mobile {
display: none;
}
.mobile-nav-toggle {
color: #fff;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
.mobile-nav-toggle.bi-x {
color: #fff;
}
#media (max-width: 991px) {
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
.navbar-mobile {
display: block;
position: fixed;
overflow: hidden;
top: 55px;
right: 20px;
left: 10;
bottom: 150px;
transition: 0.3s;
z-index: 999;
}
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
border-radius: 10px;
background: rgba(253, 110, 110, 0.5);
overflow-y: auto;
transition: 0.3s;
}
.navbar-mobile a,
.navbar-mobile a:focus {
padding: 10px 20px;
font-size: 14px;
color: white;
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
color: #751D41;
}
.navbar-mobile .getintouch,
.navbar-mobile .getintouch:focus {
margin: 15px;
color: #402D85;
}
and here is html code
<!-- ======= Header ======= -->
<header id="header" class="fixed-top ">
<div class="container d-flex align-items-center">
<img src="assets/img/navLogo.png" alt="" class="img-fluid">
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link scrollto" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#hero">About Us</a></li>
<li><a class="nav-link scrollto" href="#hero">Our Team</a></li>
<li><a class="nav-link scrollto" href="#hero">Our Offers</a></li>
<li><a class="nav-link scrollto" href="#hero">Projects</a></li>
<li><a class="nav-link scrollto" href="#hero">Careers</a></li>
<li><a class="getintouch scrollto" href="#hero">Get In Touch</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
</div>
</header><!-- End Header -->

Use this code for your Header and edit accordingly you want it, its responsive too.
$(document).ready(function() {
// Toggle menu on click
$("#menu-toggler").click(function() {
toggleBodyClass("menu-active");
});
function toggleBodyClass(className) {
document.body.classList.toggle(className);
}
});
/* Extra */
$primary: #fff;
$secondary: #ccc;
$ternary: #272727;
$dark: #444444;
body {
background: $secondary;
color: $ternary;
font-size: 14px;
margin: 0;
}
.logo {
max-width: 200px;
}
.navbar {
align-items: center;
background: $primary;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
display: flex;
flex-direction: row;
font-family: sans-serif;
padding: 10px 50px;
}
.push-left {
margin-left: auto;
}
/* Menu */
.hamburger {
background: transparent;
border: none;
cursor: pointer;
display: none;
outline: none;
height: 30px;
position: relative;
width: 30px;
z-index: 1000;
#media screen and (max-width: 768px) {
display: inline-block;
}
&-line {
background: $ternary;
height: 3px;
position: absolute;
left: 0;
transition: all .2s ease-out;
width: 100%;
.hamburger:hover & {
background: #777;
}
&-top {
top: 3px;
}
.menu-active &-top {
top: 50%;
transform: rotate(45deg) translatey(-50%);
}
&-middle {
top: 50%;
transform: translatey(-50%);
}
.menu-active &-middle {
left: 50%;
opacity: 0;
width: 0;
}
&-bottom {
bottom: 3px;
}
.menu-active &-bottom {
bottom: 50%;
transform: rotate(-45deg) translatey(50%);
}
}
}
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
transition: all .25s ease-in;
#media screen and (max-width: 768px) {
background: $primary;
flex-direction: column;
justify-content: center;
opacity: 0;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transform: translatey(-100%);
text-align: center;
.menu-active & {
transform: translatey(0%);
opacity: 1;
}
}
.menu-item a {
color: $dark;
display: block;
line-height: 30px;
margin: 0px 10px;
text-decoration: none;
text-transform: uppercase;
&:hover {
color: lighten($dark, 20);
text-decoration: underline;
}
#media screen and (max-width: 768px) {
font-size: 20px;
margin: 8px;
}
}
}
.sub-nav {
border: 1px solid #ccc;
display: none;
position: absolute;
background-color: $primary;
padding: 5px 5px;
list-style: none;
width: 230px;
#media screen and (max-width: 768px) {
position: relative;
width: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.20);
box-sizing: border-box;
}
}
.nav__link {
&:hover + .sub-nav {
display:block;
}
}
.sub-nav {
&:hover {
display:block;
}
}
<nav class="navbar">
<div class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/2/23/AS_sample_logo.png" alt="LOGO"></div>
<div class="push-left">
<button id="menu-toggler" data-class="menu-active" class="hamburger">
<span class="hamburger-line hamburger-line-top"></span>
<span class="hamburger-line hamburger-line-middle"></span>
<span class="hamburger-line hamburger-line-bottom"></span>
</button>
<!-- Menu compatible with wp_nav_menu -->
<ul id="primary-menu" class="menu nav-menu">
<li class="menu-item "><a class="nav__link" href="#">Home</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">About Us</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">Our Team</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">Our Offers</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">Projects</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">Careers</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">Get In Touch</a>
</li>
</ul>
</div>
</nav>

How to show only Parent and Child element? Javascript

I wish that when I clicked on parent it would show me his child element.
Since there is a multinesting,
When I select "List sub 2" I want "List 1" to disappear.
When I click again on "List 1", I want to see "List 1" and List 2 sub menu.
When click on "List sub2" to show "List 3 sub menu" and "List 1" to dissapear.
Another thing, the dropdown arrows should be if the list is open view arrows to the left and if the display is not opened right.
High priority is how to show property parent and child links.
Codepen code:
https://codepen.io/anon/pen/RXKBeq
HTML:
<div class="dropdown">
<button class="dropbtn dropbtn-three">
DropDown Parent
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<ul>
<li class="item-has-children">
List 1 <span class="rightt"> </span>
<ul class="sub-menu">
<li>List 2 sub menu <span class="rightt"> </span>
<ul class="sub-menu">
<li>List 3 sub menu </li>
<div class="hr2"></div>
<li>List 3 sub menu </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
CSS (sass)
$facebookBlue: #153161;
$strongRed: #9a0000;
$strongYellow: #ee8f01;
$white: #ffffff;
* {
box-sizing: border-box;
}
.dropdown {
position: relative;
display: inline-block;
.dropbtn {
background-color: $facebookBlue;
color: $white;
font-size: 17px;
font-weight: 600;
border: none;
cursor: pointer;
height: 55px;
background: #153161;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 12px 50px;
position: relative;
width: 360px;
text-align: left;
i {
margin-left: 30px;
color: #8391ab;
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
}
.arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #8191aa;
margin: 100%;
padding-top: 4px;
z-index: 999;
}
}
.dropbtn-two {
background: $strongRed;
}
.dropbtn-three {
background: $strongYellow;
}
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
width: 330px;
z-index: 999;
a {
color: black;
padding: 12px 25px;
text-decoration: none;
display: flex;
justify-content: flex-start;
width: 100%;
&:hover {
background-color: #F8F8F8
}
}
.rightt {
display: inline-block;
cursor: pointer;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
&:after {
content: '';
display: inline-block;
width: 9px;
height: 9px;
border-top: 0.2em solid #ababab;
border-right: 0.2em solid #ababab;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
.left {
display: inline-block;
cursor: pointer;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
&:after {
content: '';
display: inline-block;
width: 29px;
height: 29px;
border-top: 0.2em solid #ababab;
border-right: 0.2em solid #ababab;
transform: rotate(45deg);
}
}
.item-has-children {
a {
position: relative;
}
}
}
.dropdown:hover .dropdown-content {
display: block;
background: white;
opacity: 0.95;
width: 100%;
}
.hr2 {
height: 1px;
background: #ccc;
border-bottom: 1px solid #fff;
border-top: 1px solid #ccc;
}
.sub-menu {
display: none;
}
.sub-menu.selected {
display: flex;
flex-direction: column;
transition: transform 0.6s;
}
ul {
list-style: none;
padding: 0 0px;
width: 100%;
height: 100%;
}
.rightt.selected {
left: 40px;
top: 25%;
right: auto;
transform: translateY(0);
transform: rotate(180deg);
}
.padd-left {
padding-left: 0px;
}
.padd-left.selected {
padding-left: 70px;
}
JavaScript:
const links = document.querySelectorAll(".item-has-children");
const padd_left = document.querySelectorAll(".padd-left");
links.forEach((link) => {
link.addEventListener('click', (e) => {
const index = Array.from(links).indexOf(link)
if (e.target.nextElementSibling.classList.contains('selected')) {
e.target.nextElementSibling.classList.remove('selected')
e.target.querySelector('.rightt').classList.remove('selected');
Array.from(padd_left)[index].classList.remove('selected')
} else {
e.target.nextElementSibling.classList.add('selected')
e.target.querySelector('.rightt').classList.add('selected');
Array.from(padd_left)[index].classList.add('selected')
}
})
})

There is something in earlier versions of bootstrap just not in newest.
also check this out. Some dude already done it but in b4.

Here's a simple solution but with jQuery. Please see the forked CodePen: https://codepen.io/lakialex/pen/eqvEBR
const links = $('.item-has-children a');
links.each(function() {
$(this).on('click', function() {
if ($(this).hasClass('selected')) {
$(this).parent().parent().prev().show();
$(this).next('ul').hide();
$(this).removeClass('selected');
} else {
$(this).parent().parent().prev().hide();
$(this).next('ul').show();
$(this).addClass('selected');
}
});
});
I've changed the Sass a bit.
For example there's no need for .padd-left class because you can style the .selected class for left padding and arrow change.
$facebookBlue: #153161;
$strongRed: #9a0000;
$strongYellow: #000;
$white: #ffffff;
* {
box-sizing: border-box;
}
body {
display: flex;
padding-top: 40px;
}
.dropdown {
position: relative;
display: inline-block;
margin: 0 auto;
.dropbtn {
background-color: $facebookBlue;
color: $white;
font-size: 17px;
font-weight: 600;
border: none;
cursor: pointer;
height: 55px;
background: #153161;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 12px 50px;
position: relative;
width: 360px;
text-align: left;
i {
margin-left: 30px;
color: #8391ab;
// opacity: 0.2;
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
}
.arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #8191aa;
margin: 100%;
padding-top: 4px;
z-index: 999;
}
}
.dropbtn-two {
background: $strongRed;
}
.dropbtn-three {
background: $strongYellow;
}
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
width: 330px;
z-index: 999;
a {
color: black;
padding: 12px 25px;
text-decoration: none;
display: flex;
justify-content: flex-start;
width: 100%;
&:hover {
background-color: #F8F8F8
}
.rightt {
display: inline-block;
// width: 9px;
// height: 9px;
cursor: pointer;
// padding-left: 180px;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
&:after {
content: '';
display: inline-block;
width: 9px;
height: 9px;
border-top: 0.2em solid #ababab;
border-right: 0.2em solid #ababab;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
&.selected {
padding-left: 70px;
.rightt {
left: 40px;
top: 25%;
right: auto;
transform: translateY(0);
transform: rotate(180deg);
}
}
}
.left {
display: inline-block;
cursor: pointer;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
&:after {
content: '';
display: inline-block;
width: 29px;
height: 29px;
border-top: 0.2em solid #ababab;
border-right: 0.2em solid #ababab;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
.item-has-children {
a {
position: relative;
}
}
}
.dropdown:hover .dropdown-content {
display: block;
background: white;
opacity: 0.95;
width: 100%;
}
.hr2 {
height: 1px;
background: #ccc;
border-bottom: 1px solid #fff;
border-top: 1px solid #ccc;
}
.sub-menu {
display: none;
}
.sub-menu.selected {
display: flex;
flex-direction: column;
transition: transform 0.6s;
}
ul {
list-style: none;
padding: 0 0px;
width: 100%;
height: 100%;
}
Keep in mind that I've added jQuery in CodePen settings.
Cheers!
Update
The CodePen is updated with vanilla JS that does exactly like previous jQuery code.
const links = document.querySelectorAll('li a');
links.forEach( function(el) {
const parent = el.parentNode.parentNode.previousElementSibling;
el.addEventListener('click', function() {
if (el.classList.contains('selected')) {
if (parent !== null) {
parent.style.display = 'block';
}
el.nextElementSibling.style.display = 'none';
el.classList.remove('selected');
} else {
if (el.nextElementSibling !== null) {
el.nextElementSibling.style.display = 'block';
el.classList.add('selected');
}
if (parent !== null && el.nextElementSibling !== null) {
parent.style.display = 'none';
}
}
}, false);
});
Cheers!

How to translate this code from Jquery to Vanilla Javascript?

I need to translate this code from Jquery to Vanilla JS. I provide you all code but only is an important JS file. HTML and scss files not important, maybe only for catching class and nodes. I will provide and codepen code:
https://codepen.io/lakialex/pen/eqvEBR. For all question i am here
HTML:
<div class="dropdown">
<button class="dropbtn dropbtn-three">
DropDown Parent
<i class="fa fa-angle-down"></i>
</button>
<div class="dropdown-content">
<ul>
<li class="item-has-children">
List 1 <span class="rightt"> </span>
<ul class="sub-menu">
<li>List 2 sub menu <span class="rightt"> </span>
<ul class="sub-menu">
<li>List 3 sub menu </li>
<div class="hr2"></div>
<li>List 3 sub menu </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
SCSS:
$facebookBlue: #153161;
$strongRed: #9a0000;
$strongYellow: #000;
$white: #ffffff;
* {
box-sizing: border-box;
}
body {
display: flex;
padding-top: 40px;
}
.dropdown {
position: relative;
display: inline-block;
margin: 0 auto;
.dropbtn {
background-color: $facebookBlue;
color: $white;
font-size: 17px;
font-weight: 600;
border: none;
cursor: pointer;
height: 55px;
background: #153161;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 12px 50px;
position: relative;
width: 360px;
text-align: left;
i {
margin-left: 30px;
color: #8391ab;
// opacity: 0.2;
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
}
.arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #8191aa;
margin: 100%;
padding-top: 4px;
z-index: 999;
}
}
.dropbtn-two {
background: $strongRed;
}
.dropbtn-three {
background: $strongYellow;
}
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
width: 330px;
z-index: 999;
a {
color: black;
padding: 12px 25px;
text-decoration: none;
display: flex;
justify-content: flex-start;
width: 100%;
&:hover {
background-color: #F8F8F8
}
.rightt {
display: inline-block;
// width: 9px;
// height: 9px;
cursor: pointer;
// padding-left: 180px;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
&:after {
content: '';
display: inline-block;
width: 9px;
height: 9px;
border-top: 0.2em solid #ababab;
border-right: 0.2em solid #ababab;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
&.selected {
padding-left: 70px;
.rightt {
left: 40px;
top: 25%;
right: auto;
transform: translateY(0);
transform: rotate(180deg);
}
}
}
.left {
display: inline-block;
cursor: pointer;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
&:after {
content: '';
display: inline-block;
width: 29px;
height: 29px;
border-top: 0.2em solid #ababab;
border-right: 0.2em solid #ababab;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
.item-has-children {
a {
position: relative;
}
}
}
.dropdown:hover .dropdown-content {
display: block;
background: white;
opacity: 0.95;
width: 100%;
}
.hr2 {
height: 1px;
background: #ccc;
border-bottom: 1px solid #fff;
border-top: 1px solid #ccc;
}
.sub-menu {
display: none;
}
.sub-menu.selected {
display: flex;
flex-direction: column;
transition: transform 0.6s;
}
ul {
list-style: none;
padding: 0 0px;
width: 100%;
height: 100%;
}
JS:
const links = $('.item-has-children a');
links.each(function() {
$(this).on('click', function() {
if ($(this).hasClass('selected')) {
$(this).parent().parent().prev().show();
$(this).next('ul').hide();
$(this).removeClass('selected');
} else {
$(this).parent().parent().prev().hide();
$(this).next('ul').show();
$(this).addClass('selected');
}
});
});

This should do the trick
document.querySelectorAll(".item-has-children a").forEach(element => {
element.addEventListener('click', () => {
if (element.classList.contains('selected')) {
const parentsibling = element.parentElement.parentElement.previousElementSibling;
if (parentsibling) parentsibling.style.display = 'block';
let nextSibling = element;
while (nextSibling !== null && nextSibling.nodeName !== 'UL') {
nextSibling = nextSibling.nextElementSibling;
}
if (nextSibling) nextSibling.style.display = 'none';
element.classList.remove('selected');
} else {
const parentsibling = element.parentElement.parentElement.previousElementSibling;
if (parentsibling) parentsibling.style.display = 'none';
let nextSibling = element;
while (nextSibling !== null && nextSibling.nodeName !== 'UL') {
nextSibling = nextSibling.nextElementSibling;
}
if(nextSibling) nextSibling.style.display = 'block';
element.classList.add('selected')
}
})
})
However, as other have stated in comments, you should probably learn to search for this on your own. You can find more informations on the methods I used to do this here :
querySelectorAll
parentNode
addEventListener
previousElementSibling
nextElementSibling
classList
You can also find all of jQuery source code on GitHub, which might help you understand how they do things comprehensively !

How do I get my site to scroll properly on mobile

I am building a site with a js menu that loads content into a container div. The site works fine on desktop, and on the respsonsive mobile emulator on my desktop browser, but on my phone it doesn't scroll.
https://clippingpointmedia.co.za/cpm2019dev/
This is my main stylesheet:
/* CSS Document */
body {
padding: 0;
margin: 0;
background-color: #222;
font-family: 'Comfortaa';
}
#container {
display: block;
padding: 0;
}
#content {
margin-top: 0;
margin-right: 70px;
margin-left: 70px;
margin-bottom: 0px;
max-height:100vh;
overflow:hidden;
transition-timing-function: ease-in-out;
transition-duration: 0.5s;
}
#page-content {
width: 100%;
min-height: 100vh;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #2693C1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#mobile-nav, .mobile-footer {
display: none;
}
.side-nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
left: -300px;
width: 360px;
transition-timing-function: ease-in-out;
transition-duration: 0.5s;
}
.side-menu {
width: 300px;
background-color: #fff;
}
.menu-toggle, .mobile-menu-toggle {
width: 60px;
height: 60px;
background-size: 90%;
background-image: url("../images/MenuButtonOpen.svg");
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
float: right;
position: relative;
transition-delay: 0.1s;
transition-timing-function: ease-in-out;
transition-duration: 0.4s;
}
.menu-top {
height: 150px;
padding: 20px 0 0;
text-align: center;
}
#mobile-cp-logo {
background: url("../images/HomeIcon-light.svg") no-repeat center;
height: 45px;
padding-top: 10px;
margin-bottom: 10px;
margin-left: -30px
}
#cp-logo {
height: 120px;
max-width: 175px;
display: block;
margin: 0 auto 20px;
background: url("../images/HomeIcon-dark.svg") no-repeat center;
transition-delay: 0.1s;
transition-timing-function: ease-in-out;
transition-duration: 0.4s;
}
#pt-container {
padding: 15px 0;
background-color: #ccc;
text-align: center;
transition-delay: 0.1s;
transition-timing-function: ease-in-out;
transition-duration: 0.4s;
width: 100%;
}
#prod-title, #digi-title, #event-title {
background-color: #ccc;
text-transform: uppercase;
color: #fff;
border-top: 1px solid #2693C1;
border-bottom: 1px solid #2693C1;
padding: 10px 0;
width: 66.66667%;
margin: 0 auto;
font-size: 20px;
font-weight: 300;
display: none;
}
.side-menu ul {
list-style: none;
}
.side-ul ul {
list-style: none;
margin: 0;
padding: 0;
}
.side-ul li a {
display: block;
color: #fff;
text-align: center;
width: 100%;
padding: 30px 0;
background: linear-gradient(#444 0%, #1c1c1c 100%);
font-weight: 700;
font-size: 18px;
text-transform: lowercase;
text-decoration: none;
}
.side-ul li a::after, .top-ul li a::after {
float: right;
content: url("../images/arrow-right.svg");
padding-right: 20px;
padding-left: -20px;
}
.side-ul li a:focus::before, .top-ul li a:focus::before {
float: left;
content: url("../images/arrow-left.svg");
padding-right: -20px;
padding-left: 20px;
}
.side-sub-ul ul, .side-footer ul, .mobile-sub-ul ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
.side-sub-ul li, .side-footer li, .mobile-sub-ul li {
float: left;
width: 33.333333%;
}
.side-sub-ul li a, .side-footer li a, .mobile-sub-ul li a {
display: block;
text-align: center;
text-transform: lowercase;
text-decoration: none;
width: 100%;
}
.side-sub-ul li a, .mobile-sub-ul li a {
color: #606060;
background-color: #ccc;
font-size: 13px;
padding: 18px 0;
margin: 7px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.side-sub-ul li, .mobile-sub-ul li {
background-color: #ccc;
list-style-type: none;
}
.side-footer li a {
color: #273658;
font-size: 8px;
padding: 5px 0;
background-color: #fff;
width: 100%;
}
.show {
display: initial
}
.hide {
display: none;
}
.menu-item-tablet {
display: none !important;
}
.wes-hi {
border-top: 1px solid #fff !important;
border-bottom: 1px solid #fff !important;
}
.social {
position: fixed;
width: 60px;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.social a {
display: block;
text-align: center;
padding: 9px 0;
}
.mobile-footer a {
color: #fff;
font-size: 8px;
text-decoration: none;
padding: 0 5px;
}
.mobile-footer li {
display: inline-block;
}
#totop-btn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: rgba(0,0,0,0.8);
color: white;
cursor: pointer;
padding: 1px 14px 7px 15px;
font-size: 30px;
border-radius: 0;
transform: rotate(-90deg);
}
#totop-btn:hover {
color: #2693C1;
}
#bg {
position: fixed;
top: 0;
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
z-index: -9;
background: url("../images/full-bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Responsive Queries */
#media only screen and (max-width: 992px) {
/* Tablet View */
.menu-item {
display: none !important;
}
.menu-item-tablet {
display: block !important;
}
#content {
margin-right: 0;
/* padding-top: 10px;/* height: calc(100vh - 10px);*/
}
.social {
width: 100%;
bottom: 0;
transform: none;
text-align: center;
background: rgba(0,0,0,0.8);
top: auto;
position:absolute;
}
.social a {
display: inline-block;
padding: 5px;
}
.social a img {
transform: scale(0.75);
}
.mobile-footer {
display: inline-block;
vertical-align: 95%;
}
#totop-btn {
bottom: 50px;
}
.side-footer {
display: none
}
}
#media only screen and (max-width: 359px), (orientation: landscape) and (max-width:600px) {
/* Small Mobile View */
#container {
display: block;
width: 100%;
min-height: -webkit-fill-available;
}
#content {
margin-left: 0;
margin-top: 0;
padding-top: 0;
}
#page-content {
min-height: calc(100vh - 138px);
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.side-nav {
display: none;
position:absolute;
visibility: hidden;
z-index: -99999;
}
#mobile-nav {
/* position: fixed;*/
top: 0;
width: 100%;
display: block;
background-color: rgba(0,0,0,0.8);
padding: 10px 0;
height: 55px;
overflow: hidden;
transition-timing-function: ease-in-out;
transition-duration: 0.5s;
}
.mobile-menu-toggle {
height: 55px;
}
.top-ul li a {
display: block;
color: #fff;
text-align: center;
width: 100%;
padding: 20px 0;
background: linear-gradient(#444 0%, #1c1c1c 100%);
font-weight: 700;
font-size: 14px;
text-transform: lowercase;
text-decoration: none;
}
.mobile-footer {
/* vertical-align: top;*/
padding-bottom: 3px;
}
.social {
height: 63px;
}
.social a {
padding: 4px 10px 0;
}
.side-sub-ul li a, .mobile-sub-ul li a {
padding: 15px 0;
margin: 7px 0;
}
}
And the relevant html:
<body>
<div id="loader"></div>
<div id="container" style="display: none">
<div id="mobile-nav">
<div class="mobile-menu-toggle" onclick="togglemobilenav()"></div>
<ul class="top-ul">
<div id="mobile-cp-logo"></div>
<li>Production
</li>
<li>Digital
</li>
<li>Events
</li>
</ul>
<ul class="mobile-sub-ul">
<li>About
</li>
<li>News
</li>
<li>Contact
</li>
</ul>
</div>
<div class="side-nav">
<div class="menu-toggle" onclick="togglenav()"></div>
<div class="side-menu">
<div class="menu-top">
<div id="cp-logo"></div>
<div id="pt-container" style="display:none">
<div id="prod-title">Production</div>
<div id="digi-title">Digital</div>
<div id="event-title">Events</div>
</div>
</div>
<ul class="side-ul">
<li>Production
</li>
<li>Production
</li>
<li>Digital
</li>
<li>Digital
</li>
<li>Events
</li>
<li>Events
</li>
</ul>
<ul class="side-sub-ul">
<li>About
</li>
<li>About
</li>
<li>News
</li>
<li>News
</li>
<li>Contact
</li>
<li>Contact
</li>
</ul>
<ul class="side-footer">
<li>© clipping point 2019
</li>
<li>our terms & conditions
</li>
<li>our terms
</li>
<li>our privacy policy
</li>
<li>our privacy policy
</li>
</ul>
</div>
</div>
<!-- content will be loaded here -->
<div id="content"></div>
<div class="social">
<img src="images/li-icon.svg" alt="" />
<!-- <img src="images/fb-icon.svg" alt="" />-->
<img src="images/tw-icon.svg" alt="" />
<img src="images/yt-icon.svg" alt="" />
<img src="images/insta-icon.svg" alt="" />
<ul class="mobile-footer">
<li>© clipping point 2019
</li>
<li>our terms
</li>
<li>our privacy policy
</li>
</ul>
</div>
</div>
<div id="bg"></div>
</body>
I think it has something to do with the height of the #page-content div that I have set to min-height: calc(100vh - 138px) to compensate for the navbar at the top and the footer at the bottom.
Alternatively it may have something to do with visibility or positioning on the other elements. The layout of the site changes completely on smaller devices...
I've tried adding -webkit-overflow-scrolling: touch; to various elements, but even when I set it to all elements using * {} it still doesn't scroll.
I've read a dozen posts some of which point to position: fixed so i've tried switching to absolute positioning...
It seems like the whole page tries to scroll instead of the #content or #page-content div... i'm just at a loss! PLEASE HELP!!!

Add below CSS inside #media only screen and (max-width: 800px) in your style.css at line no 4030. It'll unable your parent scroll and disable your individual container scroll and also you add an individual footer in each container. So I also hide all container's footer and visible only last container footer. Try this I hope it'll help you out. Thanks
#ascensorBuilding {
overflow: auto !important;
}
#ascensorBuilding > div {
position: static !important;
overflow: hidden !important;
height: auto !important;
transform: none !important;
}
#ascensorBuilding > div .footer {
display: none;
}
#ascensorBuilding > div:last-child .footer {
display: block;
}

Make menu in CSS like in the picture

I have questions about how to reproduce the following:
I would like to know how I should proceed to make this menu conform to the picture above. I do not want anything ready, but a way to get the expected result.
So far, I have the following code:
body{
background: white;
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
}
nav:after{
content: '';
border-bottom: 10px solid black;
width: 100%;
position: fixed;
margin-top: 5px;
}
nav li {
display: inline-block;
list-style: none;
}
nav li a {
color: #fff;
display: inline-block;
font-weight: bold;
padding: 20px 15px 15px 15px;
text-decoration: none;
}
nav li a:hover {
background: red;
color: #fff;
}
nav li a:hover:after {
content: '';
border-bottom: 10px solid yellow;
position: fixed;
width: auto;
margin-top: 54px;
left: 0;
right: 0;
z-index: 1;
}
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
I hope someone can help me. Thank you in advance!

You can try this solution should be helpful
body {
background: white;
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
nav li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
nav li:last-child a:before {
display: none;
}
nav li a {
color: #fff;
display: inline-block;
padding: 1.6em 0.6em 0.7em 0.6em;
text-decoration: none;
position: relative;
font-size: 18px;
line-height: 1;
}
nav li a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 1.6em;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
color: #fff;
}
nav li a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #ffaf1a;
z-index: 2;
}
nav li a:hover {
background: red;
color: #fff;
}
nav li a:hover:after {
display: block;
}
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 23</li>
<li>Menu 345</li>
<li>Menu 44567</li>
<li>Menu 567889</li>
</ul>
</nav>

Here it is: https://jsfiddle.net/97cyvmcy/
Simply, just use two linear gradients to achieve the desired effect:
One with red and yellow stripes:
li a:hover {
background: linear-gradient(to bottom, red 0%, red 90%, yellow 90%, yellow 100%);
}
And the other with black and white stripes at the bottom:
nav:after {
content:' ';
width: 100%;
height: 15px;
position: absolute;
bottom: 10px;
background:linear-gradient(to bottom, black 0%, black 50%, white 50%, white 100%);
}

Stick the elements out of the bottom of the nav with this code: https://jsfiddle.net/d379Lagm/
body{
background: white;
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
outline: 5px solid #000;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
list-style: none;
}
nav li a {
color: #fff;
display: inline-block;
font-weight: bold;
padding: 20px 15px 15px 15px;
text-decoration: none;
position: relative;
border-bottom: 5px solid transparent;
}
nav li a:hover {
background: red;
color: #fff;
}
nav li a:after {
position: absolute;
left: 0;
right: 0;
background: transparent;
height: 5px;
content: "";
transform: translateY(950%);
}
nav li a:hover:after {
background: yellow;
}