We Keep Coding

How can i close this navbar when user clicks a link on mobile view?

The navbar is not closing when a user clicks on links to navigate through website?
I had tried to add a click event listener to every link to close navbar but it didn't work!
Also the hamberberger menu icon in active position i.e. X is not aligned well. But the major preblem is to collapse the navbar when clicked.
$(document).ready(function() {
$('.container').click(function() {
$('.navbar .menu').toggleClass("active");
});
});
function myFunction(x) {
x.classList.toggle("change");
}
#media (max-width: 1104px) {
.about .about-content .left img {
height: 350px;
width: 350px;
}
}
#media (max-width: 991px) {
.max-width {
padding: 0 50px;
}
}
#media (max-width: 947px) {
.menu-btn {
display: block;
z-index: 999;
}
/* .menu-btn i.active:before {
content: "\f00d";
} */
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
background: #111;
text-align: center;
padding-top: 80px;
transition: all 0.3s ease;
}
.navbar .menu.active {
left: 0;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
}
.navbar {
position: fixed;
width: 100%;
z-index: 999;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
transition: all 0.3s ease;
}
.navbar.sticky {
padding: 15px 0;
background: crimson;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
position: relative;
color: #fff;
font-size: 35px;
font-weight: bold;
text-transform: uppercase;
font-family: 'Orbitron', sans-serif;
border: 3px solid #fff;
padding: 0px 10px;
text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%);
letter-spacing: 2px;
}
.navbar .logo a::after {
content: 'PANDEY';
position: absolute;
font-size: 15px;
font-weight: bold;
bottom: -12px;
/* color: crimson; */
right: 15px;
background: crimson;
border-radius: 5px;
/* box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); */
padding: 0px 4px;
letter-spacing: 2px;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.navbar.sticky .logo a::after {
border-radius: 4px;
background: #fff;
color: crimson;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9);
}
.container {
display: inline-block;
cursor: pointer;
box-sizing: border-box;
}
.bar1 {
width: 35px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar2 {
width: 25px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar3 {
width: 15px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: translate(0, -6px) rotate(40deg);
width: 35px;
}
.navbar.sticky .logo a span {
color: #fff;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: block;
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
position: relative;
color: #fff;
}
.navbar.sticky .menu li a:hover {
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<nav class="navbar">
<div class="max-width">
<div class="logo">Chhailbihari</div>
<ul class="menu">
<li class="menu-btn">Home</li>
<li class="menu-btn">About</li>
<li class="menu-btn">Services</li>
<li class="menu-btn">Skills</li>
<li class="menu-btn">Contact</li>
</ul>
<div class="menu-btn">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</nav>

i think you have make menu which is responsive - i.e. works on mobile also.
for this use #media screen css
show hamburger icon when width of window is like tab or mobile else hide this icon.
in menu div (mobile or tab) add close icon to close menu.
hope this solution helps
you may refer below code for navbar for mobile view with hamburger icon.
body
{
margin: 0;
padding: 0;
background: blue;
color: #cdcdcd;
}
#togglmenu
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#togglmenu a
{
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#togglmenu a:hover
{
color: tomato;
}
#togglmenu input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
#togglmenu span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#togglmenu span:first-child
{
transform-origin: 0% 0%;
}
#togglmenu span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#togglmenu input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#togglmenu input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#togglmenu input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
#togglmenu input:checked ~ ul
{
transform: none;
}
<nav role="navigation">
<div id="togglmenu">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Info</li>
<li>Contact</li>
</ul>
</div>
</nav>

On mobile I want my navbar to close when I click an ID

I have a problem with my navbar. I want to select an #id (page) on my mobile device, reach that side of the page and then close the .nav-wrapper which holds all the ul li's, the one that was opened to view all the pages (id's).
I've tried something but it didn't work. Hope you understood my question and also I hope that you can help me.
$(document).ready(function(){
$(window).scroll(function(){
if($(document).scrollTop()>130){
$(".nav-btn").addClass("fundal")
}
else{
$(".nav-btn").removeClass("fundal")
}
});
});
window.addEventListener('load', ()=> {
const preload = document.querySelector('.preload');
preload.classList.add('preload-finish');
});
$("ul").click(function () {
$(".nav-wrapper").toggleClass(".nav-btn");
})
/* NAVBAR */
.navigatie{
background-color:transparent;
width:100%;
position: absolute;;
z-index: 99;
margin:0px;
padding:0px;
}
.logo {
float: left;
padding: 8px;
margin-left: 40px;
margin-top: 8px;
}
.navbar-brand{
color:white !important;
}
.navbar-brand img{
width: auto;
height: 100px;
margin:-32px 0px -25px 0px;
}
nav ul {
float: right;
list-style-type: none;
padding-top:5px;
margin-right:20px;
}
nav ul li {
float: left;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
letter-spacing: 1.1px;
font-weight: 700;
}
nav ul li a:hover{
color:#fff;
text-decoration: underline;
}
/* FUNDAL JS */
.fundal{
background:#e04f45 !important;
box-shadow:1px 2px 4px 0px #00000075 !important;
}
.fundal .nav-btn {
background-color:#e04f45;
border-radius: 50%;
box-shadow:1px 2px 4px 0px #00000075;
}
.fundal .nav-btn i{
background: #fff;
border-radius: 2px;
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
background-color: #e04f45;
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
display:block
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
/* MEDIA SCREEN NAVBAR PTR TLF */
#media only screen and (max-width: 991px){
.navigatie{
background-color:transparent;
width:100%;
position: absolute;
z-index: 99;
margin:0px;
padding:0px;
}
.navbar-brand img{
height:100px;
margin:-20px 0px 0px 0px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
display:none;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: center;
padding-top:10px;
margin-bottom: 10px;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 30px;
top: 28px;
display: block;
width: 47px;
height: 46px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigatie">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="nav-wrapper">
<ul>
<li>Acasă</li>
<li>Despre</li>
<li>Studii</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>

You could do that by changing a small thing in your JavaScript.
Now the menu is showing when the checkbox is checked, you need to make sure that the checkbox gets unchecked when clicking a link. I've updated the JS in your 'click' function
Tip: try to avoid doing one thing with Vannila JS and the other thing with jQuery
$(document).ready(function () {
$(window).scroll(function () {
console.log($(document).scrollTop());
if ($(document).scrollTop() > 130) {
$(".nav-btn").addClass("fundal");
console.log("add class", $(".nav-btn").hasClass("fundal"));
} else {
$(".nav-btn").removeClass("fundal");
console.log("remove class");
}
});
});
window.addEventListener("load", () => {
const preload = document.querySelector(".preload");
preload.classList.add("preload-finish");
});
// Updated the selector
$(".nav-wrapper li a").click(function () {
$(".nav-wrapper").toggleClass(".nav-btn");
// Uncheck your checkbox
$("#nav").prop("checked", false)
});
.page {
background: #f00;
height: 500px;
margin-bottom: 10px;
}
/* NAVBAR */
.navigatie {
background-color: transparent;
width: 100%;
position: absolute;
z-index: 99;
margin: 0px;
padding: 0px;
}
.logo {
float: left;
padding: 8px;
margin-left: 40px;
margin-top: 8px;
}
.navbar-brand {
color: white !important;
}
.navbar-brand img {
width: auto;
height: 100px;
margin: -32px 0px -25px 0px;
}
nav ul {
float: right;
list-style-type: none;
padding-top: 5px;
margin-right: 20px;
}
nav ul li {
float: left;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
letter-spacing: 1.1px;
font-weight: 700;
}
nav ul li a:hover {
color: #fff;
text-decoration: underline;
}
/* FUNDAL JS */
.fundal {
background: #e04f45 !important;
box-shadow: 1px 2px 4px 0px #00000075 !important;
}
.fundal.nav-btn {
background-color: #e04f45;
border-radius: 50%;
box-shadow: 1px 2px 4px 0px #00000075;
}
.fundal.nav-btn i {
background: #fff;
border-radius: 2px;
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
background-color: #e04f45;
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
display: block;
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
/* MEDIA SCREEN NAVBAR PTR TLF */
#media only screen and (max-width: 991px) {
.navigatie {
background-color: transparent;
width: 100%;
position: absolute;
z-index: 99;
margin: 0px;
padding: 0px;
}
.navbar-brand img {
height: 100px;
margin: -20px 0px 0px 0px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
display: none;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 30px;
top: 28px;
display: block;
width: 47px;
height: 46px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="preload"></div>
<div class="navigatie">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="nav-wrapper">
<ul>
<li>Acasă</li>
<li>Despre</li>
<li>Studii</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div class="page" id="home"></div>
<div class="page" id="despre"></div>
<div class="page" id="studii"></div>
<div class="page" id="abilitati"></div>
<div class="page" id="contact"></div>

Issue with CSS Text box rendering in IE

I have been trying to build a search engine using basic HTML and CSS for my Uni but IE just doesnt seem to like text boxes. Works perfectly fine in Chrome and Edge but for some reason doesnt work well in IE.
Screenshots attached below.
Image in IE
Image in Chrome
Any help would be highly appreciated.
Code for the search box and the search text button:
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
}
/*
.search-box:hover ~ .category-box {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box:hover {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box {
position: absolute;
align-items: center;
top: 38%;
left: 50%;
text-decoration-color: white;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
width: 0px;
color: white;
visibility: collapse;
opacity: 0;
transition: width 1s, height 1s, transform 1s;
transition: opacity 1s;
}
*/
.search-box > ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box > ul li {
left: -10px;
margin: 0 0 10px 0;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box > ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box > ul li:hover {
color: red;
}
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy">
</ul>
</div>
</div>

Can you set 400px in .search-box class should be work

Try to add the height property for the .search-text, code as below:
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
height:58px;
}
The output as below:

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!

Search box looks different on mobile, cannot get it to be in the center of the page nor reduce the size of the search box

My site looks different on mobile, the hotel search box does not show up in it's entirety, so the labels at the bottom get cut off. Also I tried to add the following CSS code, it helped to center the hotel search box but I cannot get it to move the box closer to the header and make it smaller so that when I click on options they are not cut off:
#media only screen and (max-width:767px){
.containerBox {
width: 100%!important;
}
}
Here is the link and screenshot of what I am talking about.
Hotel Search box on the home page.
I will include the full code below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#selectCountry:ACTIVE, #destino:ACTIVE, #selectCountry:FOCUS, #destino:FOCUS {
color: #FFFFFF;
background-color: #ed8323; }
.select-complementarias {
border: 0px solid #dadada !important;
border-radius: 3px !important;
padding: 5px !important;
font-weight: bold !important;
color: #424547 !important;
width: 100%; }
.select-complementarias:ACTIVE, .select-complementarias:FOCUS {
color: #FFFFFF;
background-color: #ed8323; }
.searchCity {
min-width: 200px;
width: 100%;
color: #424547; }
.warning {
color: #FF0000 !important;
font-size: 14px; }
.numInputHidden, .elementHidden {
display: none; }
.divNewLine {
clear: left;
padding: 3px; }
.divCell {
float: left;
margin-right: 2px;
max-width: 236px;
width: 100%;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.cell-complementarias {
float: left;
margin-right: 2px;
width: 250px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px; }
.divCell-auto {
float: left;
margin-right: 2px;
width: 100%;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCellSmall {
float: left;
margin-right: 2px;
width: 110px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCell-20px {
float: left;
margin-right: 2px;
width: 20px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCell-50px {
float: left;
margin-right: 2px;
width: 50px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 3px; }
.divCell-130px {
float: left;
margin-right: 2px;
width: 130px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.divCell-100px {
float: left;
margin-right: 2px;
width: 100px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 3px; }
.time-hours {
width: 100px !important; }
.time-minutes {
width: 100px !important; }
.hoursFligths {
display: inline;
margin-left: 11px;
width: 130px !important; }
#selectsMenores select {
width: 50px; }
.textHidden {
display: none; }
.ui-datepicker {
font-size: 11px; }
.ui-widget {
font-size: 12px; }
.containerBox input {
border: 0px solid #dadada;
border-radius: 3px;
padding: 5px;
/*font-weight: bold;*/
line-height:21px!important;
width: 95%!important;
}
.containerBox select {
border: 0px solid #dadada !important;
border-radius: 3px !important;
padding: 5px !important;
/*font-weight: bold !important;*/
color: #424547 !important;
width: 100%;
-moz-appearance: none;
cursor: pointer;
height:auto;
}
#selectCountry {
width: 95% !important; }
.input-date {
width: 100%;
color: #424547; }
.input-date-home {
width: 357px !important;
color: #424547; }
.input-date:ACTIVE, .input-date-home:FOCUS, .input-date-home:ACTIVE, .input-date-home:FOCUS {
color: #FFFFFF;
background-color: #ed8323; }
.ui-widget {
font-weight: bold !important; }
.ui-widget-content {
font-weight: bold !important;
border: 0px solid #eee; }
.container-box-ticket, .container-box-hotel {
width: 375px !important; }
.container-box-ticket {
width: 375px !important; }
.containerBox {
font-family: arial;
border: 0px solid #dadada;
width: 512px!important;
background-color: #262626e8;
color: #FFFFFF;
font-size: 17px;
/*font-weight: bold;*/
padding: 10px;
position: relative; }
.containerBox label {
font-size: 12px;
font-weight: bold;
color: #fff;
display: inline-block;
}
.containerBox input:FOCUS {
border: 0px solid #dadada;
border-color: #53a69d;
box-shadow: 0 0 3px #000000;
background-color: #ed8323;
color: #FFFFFF; }
select:FOCUS, .containerBox input:ACTIVE, select:ACTIVE {
border: 0px solid #dadada !important;
border-color: #ed8323 !important;
box-shadow: 0 0 3px #000000 !important;
background-color: #ed8323 !important;
color: #FFFFFF !important; }
.containerBox button {
border: 0px solid #D8D8D8;
border-radius: 3px;
background-color: #F2F2F2;
font: arial;
font-size: 12px;
cursor: pointer;
width: 100px;
height: 35px!important; }
.containerBox button:HOVER {
border-radius: 3px;
border-color: #CED8F6;
background-color: #D8D8D8; }
#divbuttonverpreciosbuscando {
display: none; }
.spinner {
margin: 10px auto;
width: 50px;
height: 40px!important;
text-align: center;
font-size: 10px; }
.spinner > div {
background-color: #333;
height: 100%!important;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }
.spinner .rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
#-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4); }
20% {
-webkit-transform: scaleY(1); } }
#keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4); }
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1); } }
hr {
color: #ed8323;
border-color: #ed8323; }
.titulo {
font-size: 20px;
text-align: left;
margin-left: -15px;
margin-right: -15px; }
.titulo-segundo {
font-size: 12px;
margin-left: -8px;
margin-right: 38px;
margin-top: -28px;
position: fixed;
text-align: left;
width: 225px;
z-index: 110; }
#ver_precios, .buttonForm {
background-color: #ed8323 !important;
color: #FFFFFF !important;
font-weight: bold !important;
opacity: 1 !important;
border: 0 solid #d8d8d8;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
width: 100px;
height: 35px;!important; }
.ui-datepicker {
background: #ffffff;
border: 1px solid #555;
color: #EEE;
border: 0px;
box-shadow: 0 0 3px #000000; }
.ui-datepicker-header {
position: relative;
padding-bottom: 10px;
background: #ffffff !important;
border: 0px !important; }
.ui-widget-header {
background: #ffffff !important; }
.ui-dialog .ui-dialog-titlebar {
color: #FFFFFF;
font-size: 16px;
font-weight: bold !important;
background: #262626; }
.ui-dialog .ui-dialog-titlebar .ui-button {
color: #FFFFFF !important;
font-size: 16px !important;
font-weight: bold !important;
background: #262626 !important; }
.ui-dialog .ui-dialog-titlebar .ui-state-focus {
background: red; }
.ui-dialog {
background: #262626;
position: fixed; }
.ui-datepicker-title {
background-color: #ffffff;
line-height: 1em !important; }
.ui-datepicker-month {
color: #ed8323;
padding: 0px !important;
margin: 0px !important;
background-color: #ffffff; }
.ui-datepicker-year {
color: #ed8323;
background-color: #ffffff; }
.ui-datepicker .ui-state-default {
background: #ffffff !important;
border: 0px solid #d3d3d3 !important; }
.ui-datepicker, .ui-datepicker .ui-datepicker-calendar .ui-state-default {
color: #000000 !important;
text-align: center; }
.ui-state-active {
border-radius: 0 !important;
background: #ed8323 !important;
cursor: pointer !important;
text-decoration: none !important; }
.ui-state-focus {
border-radius: 0 !important;
cursor: pointer !important;
text-decoration: none !important;
border: 0px; }
.ui-state-focus:HOVER {
border-color: transparent;
color: #FFFFFF !important;
background: #1ec7e6 !important; }
.ui-menu, .ui-menu-item {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-calendar td a.ui-state-hover {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-calendar td a.ui-state-active {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-calendar td a.ui-state-focus {
background: #ed8323 none repeat scroll 0 0 !important; }
.ui-datepicker-title {
margin: 0 2.3em;
text-align: center; }
.ui-datepicker-year {
display: block;
font-size: 9px;
margin-left: -5px; }
.ui-datepicker table {
border-collapse: separate;
font-size: 0.9em; }
.calendarioIcon {
height: 19px!important;
margin: 6px 149px;
position: absolute; }
.close-dialog-icon {
cursor: pointer;
height: 51px;
margin: -22px 525px 0;
position: absolute; }
.calendarioIcon-hotel {
height: 19px!important;
margin: 3px 20px;
position: absolute;
right: 5%; }
.calendarioIcon-tickets {
height: 19px!important;
margin: 6px 438px;
position: absolute; }
.calendario-icon-homes {
height: 19px!important;
margin: 3px 440px;
position: absolute; }
.calendario-icon-arrow {
height: 25px!important;
margin: 3px 175px;
position: absolute; }
.ui-autocomplete-loading {
background: white url("material/ring-alt.svg") right center no-repeat;
background-size: 20px 20px; }
.spinner {
margin: 10px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px; }
.spinner > div {
background-color: #333;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }
.spinner .rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
#-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4); }
20% {
-webkit-transform: scaleY(1); } }
#keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4); }
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1); } }
#divbuttonverpreciosbuscando {
display: none; }
.ui-corner-all {
border: 0px; }
#airline {
width: 100%!important; }
.label-hiden {
display: none !important; }
.containerBox-header {
opacity: 0.9 !important;
/* border-top-left-radius: 10px;
border-top-right-radius: 10px;*/ }
.containerBox-footer {
opacity: 1 !important;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
/* padding-top: 9px !important;
padding-bottom: 20px !important;*/
transition-duration: 0.4s;
transition-property: background;
/* height: 5px !important;*/
background-color: #ed8323 !important;
font-size: 14px;
font-weight: 500 !important; }
.containerBox-footer:HOVER {
background-color: #ed8323 !important;
cursor: pointer; }
.buscar-label {
margin-top: 5px !important; }
.ui-dialog .ui-dialog-titlebar, .ui-dialog label {
background: #262626 none repeat scroll 0 0 !important;
color: #FFFFFF; }
.error-input {
border-color: #FF0000;
box-shadow: 0 0 1em red;
background-color: #FBEFF2; }
.error-input:-ms-input-placeholder {
color: red !important; }
.error-input::-moz-placeholder {
color: red !important; }
.error-input:-moz-placeholder {
color: red !important; }
.error-input::-webkit-input-placeholder {
color: red !important; }
.containerBox input::-webkit-input-placeholder {
color: #000000; }
.containerBox input:-ms-input-placeholder {
color: #000000; }
.containerBox input::-moz-placeholder {
color: #000000; }
.containerBox input:focus::-webkit-input-placeholder {
color: #000000 !important; }
.containerBox input:focus:-ms-input-placeholder {
color: #000000 !important; }
.containerBox input:focus::-moz-placeholder {
color: #000000 !important; }
#not-found-sources {
color: #FFFFFF; }
.ui-autocomplete-input .ui-corner-all {
color: #000000 !important; }
.ui-autocomplete a {
color: #000000 !important; }
.box_float{
display: block;
position: absolute;
top: 90px;
z-index: 2;
}
li{
list-style-type: none!important;
margin: 0;
padding: 0;
}
.caja_fondo{
height:auto;
font-family: arial;
border: 0px solid #dadada;
opacity: 0.8;
color: #FFFFFF;
font-size: 17px;
/*font-weight: bold;*/
padding: 15px;
position: relative;
}
.catalog-area {
display: inline-block;
background-color: rgba(39,46,59,.8);
height: auto;
padding: 1px 1px 1px 1px;
width: 100%;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/*.imagenes_circuitos {
height: 456px;
width: 370px;
padding: 1px 1px 1px 1px;
overflow-y: scroll;
}
.imagenes_circuitos_min{
padding-top: 20px;*/
}
.circuit_catalog {
display: table-cell;
z-index: 9;
padding: 1px 1px 1px 1px;
font-family: Arial, Helvetica, sans-serif;
/*font-weight: bold;*/
display: inline-block;
text-align: center;
color: gray;
display: inline-block;
border-radius: 25px;
vertical-align: middle;
border-radius: 25px;
}
.circuit_catalog a {
color: #3c5c8b;
font-weight: 700;
text-decoration: none;
outline: none;
font-family: Arial, Helvetica, sans-serif;
line-height: 12px;
/*font-weight: bold;*/
display: inline-block;
text-align: center;
color: gray;
display: inline-block;
}
/*.img_circuits {
opacity: .8;
width: 160px;
height: 200px;
border-radius: 15px;
box-shadow: 2px 2px 2px #3C5C8B;*/
}
.containerBoxCircuits {
font-family: arial;
border: 0px solid #dadada;
background-color: #262626;
color: #ffffff;
font-size: 17px;
/*font-weight: bold;*/
padding-left: 15px;
padding-right: 15px;
display: inline-block;
float: left;
opacity: .8;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.container-box-circuit{
margin-left:20px;
display:none;
}
/*.img_circuits_min {
width: 80px;
height: 100px;
border-radius: 15px;
box-shadow: 2px 2px 2px #3C5C8B;*/
}
.circuit_catalog_min {
font-family: Arial, Helvetica, sans-serif;
line-height: 12px;
/*font-weight: bold;*/
width: 88px;
height: 110px;
display: inline-block;
text-align: center;
color: gray;
display: inline-block;
border-radius: 25px;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
}
.celdas {
float: left;
padding: 5px;
}
.containerBox-circuits {
padding-bottom: 20px;
}
/*.img_circuits_botmin {
background-color: #d42729;
position: absolute;
float: left;
left: 4px;
bottom: 10px;
width: 80px;
height: 23px;
line-height: 10px;
font-size: 7px;
color: white;
font-weight: inherit;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;*/
}
.textcatmin {
position: absolute;
float: left;
padding-top: 0px;
left: 0px;
width: 80px;
height: 22px;
line-height: 7px;
font-size: 7px;
color: white;
font-weight: inherit;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
overflow: hidden;
}
.containerBoxAll {
width: 512px!important;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.tab-content .tab-menu button {
color: #fff;
cursor: pointer;
opacity: 1 !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
transition-duration: 0.4s;
transition-property: background;
height: 5px !important;
background-color: #ed8323 !important;
width: 81px;
padding: 10px;
}
.tab-content .tab-menu button:HOVER {
background-color: #ed8323 !important;
cursor: pointer;
color:#000;
}
.tab-content .tab-menu button.active {
background-color: #262626!important;
color: #ed8323 ;
}
span.titulo-tabs {
word-wrap:normal;
float:left;
line-height: 0px;
}
.footerAll {
width: 512px!important;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.form-service{
margin-left: 13px;
margin-right: -13px;
}
.CircuitsAll {
width: 511px!important;
opacity: 1!important;
}
.CircuitsAll:HOVER {
opacity: 1!important;
}
.containerBoxCircuitsAll:HOVER {
opacity: 1!important;
}
.containerBoxCircuitsAll{
width: 541px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.tab-content{
width:100%;
float:left;
}
input[type="radio"], input[type="checkbox"] {
margin-right: 0.5em;
width: 15px!important;
}
/*# sourceMappingURL=comun.css.map */

Use these css
#media(max-width:767px){
.html_header_transparency #top .avia-builder-el-0 .container, .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
padding-top: 0px;
}
#top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select {
margin-bottom: 10px;
height: 39px;
}
.avia-slideshow li img {
display: none;
}
}
for center the box use it.
.containerBox {
margin: auto;
}
.containerBox-header {
opacity: 0.9 !important;
margin-top: 70px;
}
.avia_codeblock_section .avia_codeblock .widget {
top: 0;
left: 0;
}
for mobile view
#media (max-width: 767px)
#wrap_all #main #after_full_slider_1 .container .av-content-full .post-entry .entry-content-wrapper .avia_codeblock_section .avia_codeblock .widget {
width: 100% !important;
}
.avia_codeblock_section .avia_codeblock .widget {
left: 0;
top: 0;
}
}
if it's not work use !important after css like this - display: none !important;