Develop Reference

Css menu dropdown

I currently have a lack of idea on a css menu that I would like to realize. What I would like to do is that my menu is up and not down but that my TEST is at the top of my list and does not move until I no longer have my mouse on it. I don’t know how to do that right now, and if anyone has any ideas, I take it.Thank you for a good day.
.span1 {
background-color: #e83737;
color: white;
position: absolute;
text-align: center;
vertical-align: middle;
line-height: 60px;
top: 413px;
left: 120px;
width: 192px;
height: 68px;
font-size: 20px;
}
.span1:hover {
background-color: #e83737;
position: absolute;
left: 120px;
top: 123px;
width: 192px;
height: 68px;
font-size: 20px;
}
.dropdown ul li:hover ul {
height: initial;
bottom: 100%;
overflow: visible;
background: lightgray;
}
.dropdown-child {
display: none;
background-color: #f28c8c;
position: absolute;
width: 192px;
top: 190px;
left: 120px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
<div class="dropdown">
<span class="span1">TEST</span>
<div class="dropdown-child">
abc
abc
abc
abc
</div>
</div>
Codepen demo: https://codepen.io/tiboo__/pen/XWjoeQB

Not sure if I got what you're trying to achieve but try to change .span1:hover { to .dropdown:hover .span1 {.

There must be a relative positioned parent for a child absolute block.
Add this to your css:
.dropdown {
position: relative;
}
And the positioning rules for .span1:
top: 0;
left: 0;
Also, some selectors contained extra rules and selectors.
.dropdown {
position: relative;
}
.span1 {
background-color: #e83737;
color: white;
position: absolute;
text-align: center;
vertical-align: middle;
line-height: 60px;
top: 0;
left: 0;
width: 192px;
height: 68px;
font-size: 20px;
}
.dropdown ul li:hover ul {
height: initial;
bottom: 100%;
overflow: visible;
background: lightgray;
}
.dropdown-child {
display: none;
background-color: #f28c8c;
width: 192px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
<div class="dropdown">
<span class="span1">TEST</span>
<div class="dropdown-child">
abc
abc
abc
abc
</div>
</div>

Add/Remove class to get a menu to display

I started programming the mobile version of my nav menu earlier. I had to rework my #serviceNav to get it to work in a mobile setting. When doing this I changed my javascript from this:
/*$('#serviceClick').click( function () {
$('#serviceNav').addClass('activeSol');
});*/
$('[data-pop-close]').on('click', function(e) {
//var targeted_pop = $(this).attr('data-pop-close');
$('#serviceNav').removeClass('active');
$('body').css('overflow', 'auto');
e.preventDefault();
});
To this:
$('#serviceClick').click(function() {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('.activeSol').removeClass('activeSol').next('#serviceNav').slideUp(500);
relative.addClass('activeSol').next('#serviceNav').slideDown();
//$('.infoTitles:before').addClass('opened');
} else {
relative.removeClass('activeSol').next('#serviceNav').slideUp(500);
}
return false;
});
The issue that I am having now that I previously didn't with my javascript code is that now my desktop media query version of my #serviceNav is not displaying, however it does display and function in the mobile setting. The trigger for this menu is the menu item called "Solutions". You can see that in a media query over 640px that nothing happens, but 640px or less it applies the fadeDown function.
Does anyone see why this is not working for the larger version media query?
Here is a jsfiddle
Full code:
$('#mobile-button').on('click', function () {
$('#nav-pop').addClass('active');
$('html').addClass('is-navOpen');
});
/*$('#serviceClick').click( function () {
$('#serviceNav').addClass('activeSol');
});*/
$('#serviceClick').click(function() {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('.activeSol').removeClass('activeSol').next('#serviceNav').slideUp(500);
relative.addClass('activeSol').next('#serviceNav').slideDown();
} else {
relative.removeClass('activeSol').next('#serviceNav').slideUp(500);
}
return false;
});
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-logo {
float: left;
height: 100%;
width: auto;
display: block;
position: relative;
margin-left: 5%;
}
#nav-logo img {
height: 80%;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);-webkit-transform: translateY(-50%);
}
#mobile-button {
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/menu.svg");
background-size: 30px 30px;
float: right;
width: 30px;
height: 30px;
margin-right: 5%;
margin-top: 15px;
cursor: pointer;
display: none;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#mobile-button:hover {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#nav-pop {
float: right;
display: block;
margin-right: 5%;
margin-top: 25px;
transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
opacity: 1;
background: rgba(0,0,0,0.8);
background: #2f2f2f;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 999999;
transition: ease 0.6s;-webkit-transition: ease 0.6s;
transform: translateX(0);-webkit-transform: translateX(0);
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
#nav-list li {
display: inline-block;
margin: 0 17px;
vertical-align: top;
}
#nav-list li:first-child {
margin-left: 0px;
}
#nav-list li:last-child {
margin-right: 0px;
}
#nav-list li a, #serviceClick {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
color: #747678;
letter-spacing: 1px;
vertical-align: top;
transition: all .3s;-webkit-transition: all .3s;
cursor: pointer;
}
#nav-list li a:after, #serviceClick:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #b82222;
height: 2px;
transition: width .3s;
}
#nav-list li a:hover, #serviceClick:hover {
color: #4b4b4b;
transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 100%;
transition: width .3s;
}
#nav-list li a.navInverse {
padding: 10px 12px;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.2rem;
color: #FFF;
border: 1px solid #b82222;
background: linear-gradient(to right bottom, #b82222, #a51e1e);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
#nav-list li a.navInverse:hover {
background: #b82222;
background: #FFF;
color: #b82222;
/*transition: all 0s;-webkit-transition: all 0s;*/
}
#nav-list li a.navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
#nav-pop-close {
display: none;
}
#nav-pop-close, #close-panel {
position: relative;
top: 3%;
left: 90%;
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/icon_close.png");
background-size: 30px 30px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
cursor: pointer;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
top: -40vh;
left: 0;
z-index: -1;
position: fixed;
background-color: rgba(0,0,0,0);
height: 40vh;
transition: all .4s;
padding: 20px 0;
}
#serviceNav.activeSol {
top: 0;
width: 100%;
background-color: rgba(0,0,0,.9);
z-index: 99999;
height: 40vh;
}
.popup-close {
position: absolute;
right: 12px;
top: 12px;
width: 32px;
height: auto;
}
#serviceNavInner {
margin: 0 5%;
height: 100%;
position: relative;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 33%;
height: 100%;
border-right: 1px solid rgba(255,255,255,.5);
position: relative;
}
#serviceNavBlock1Wrap {
width: 80%;
text-align: left;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 66.6%;
height: 100%;
margin: 10px auto;
position: relative;
}
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;transition: all 0.25s;
-webkit-transform: scale(1.1);transform: scale(1.1);
-webkit-backface-visibility: hidden;
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
box-sizing: border-box;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
#mobile-button {
display: block;
}
#nav-pop {
float: none;
opacity: 0;
position: fixed;
margin-top: 0;
width: 75%;
right: -100%;
height: 100vh;
transform: translateX(100%);-webkit-transform: translateX(100%);
}
#nav-pop-close {
display: block;
background-size: 20px 20px;
height: 20px;
width: 20px;
}
#nav-list {
margin-top: 20px;
}
#nav-list li {
display: block;
position: relative;
width: 100%;
margin: 0;
padding: 20px 10%;
background: linear-gradient(to bottom right, #151515, #2f2f2f);
background: #2f2f2f;
text-align: left;
cursor: pointer;
border-bottom: .3px solid #FFF;
}
#quoteButton {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
#nav-list li:hover #quoteButton {
background: #2f2f2f;
}
#nav-list li:hover, #nav-list li:active {
background: #000;
}
#nav-list li:first-child {
margin-left: 0;
}
#nav-list li:last-child {
margin: 20px auto;
text-align: center;
border-bottom: none;
background: #2f2f2f;
padding: 20px 0;
}
#nav-list li a, #serviceClick {
font-family: 'Nunito', sans-serif;
font-size: .8rem;
color: #FFF;
letter-spacing: .3rem;
}
#nav-list li a:after, #serviceClick:after {
display: none;
}
#nav-list li a:hover, #serviceClick:hover {
color: #FFF;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 0%;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
z-index: 1;
position: relative;
background-color: rgba(0,0,0,0);
height: 200px;
transition: all .4s;
padding: 10px 0;
display: none;
top: 0;
}
#serviceNav.activeSol {
background-color: #000;
z-index: 9999999;
height: auto;
min-height: 20%;
top: 0;
border-bottom: .01em solid #FFF;
}
.popup-close {
display: none;
}
#serviceNavInner {
margin: 0 2.5%;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 100%;
height: 50px;
border-right: none;
display: block;
position: relative;
}
#serviceNavBlock1Wrap {
width: 100%;
text-align: center;
}
#navOverviewT, #navOverviewP {
display: none;
}
#solOverviewB {
font-size: .7rem;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 100%;
height: 100%;
margin: 10px auto;
display: block;
}
.servNavItemWrap {
display: inline-block;
width: 25%;
margin-bottom: 15px;
}
.servNavItemWrap img {
width: 30px;
height: 30px;
}
.servNavItemTitle {
margin-top: 5px;
font-size: .5rem;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<div id="nav-logo">
</div>
<div id="mobile-button"><img src="" class="hidden" alt=""></div>
<div id="nav-pop">
<div id="nav-pop-close"></div>
<ul id="nav-list">
<li>ABOUT</li>
<li id="serviceClick">SOLUTIONS</li>
<div id="serviceNav">
<div id="serviceNavInner">
<div id="serviceNavBlock1" class="iblock">
<button class="buttonInv2" id="solOverviewB">Solutions Overview</button>
</div><div id="serviceNavBlock2" class="iblock">
</div>
</div>
</div>
<li>LEARN</li>
<li>CONTACT</li>
<li>REQUEST QUOTE</li>
</ul>
</div>
</nav>

There is a lot going on here and frankly, it's hard to decipher but I think "Nothing happens" is relative. When inspecting the element in dev console you can see the Javascript styling is being added appropriately. So something is happening, it's simply happening off screen because you've told it to. I think the culprit here, is the >640px positioning of your #serviceNav element is maintained at top: -40vh; That's a lot. When removing this value the button displays as follows:
Note: you will have to change some other things around as this displays it on page load. But you get the idea

Click function never reading else statement to remove class

I have been stuck on a sliding down menu, but have made some headway with it. I had to modify a lot to make it work for both desktop and mobile viewports. The only thing I am stuck on now is getting the menu to close in a < 640px viewport.
In my snippet and jsfiddle below there is a lot of code, but the only code that really matters to this question is the javascript below:
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});
Basically my else statement is now removing the class 'activeSol` and then sliding up the selection.
In the mobile viewport, after clicking on "Solutions" the menu expands, but when you click on "Solutions" again, nothing happens.
It seems as if the variable relative is never reading as the class appended to it, making the click function run else. I did a simple console.log and the else never runs. I tried changing the click function to a change, but then the menu never triggers.
Does anyone see what is causing my else statement to not removeClass from serviceNav and slideUp?
JSfiddle link to see in mobile viewport.
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});
$('[data-pop-close]').on('click', function(e) {
//var targeted_pop = $(this).attr('data-pop-close');
$('#serviceNav').removeClass('activeSol');
$('body').css('overflow', 'auto');
e.preventDefault();
});
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-logo {
float: left;
height: 100%;
width: auto;
display: block;
position: relative;
margin-left: 5%;
}
#nav-logo img {
height: 80%;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);-webkit-transform: translateY(-50%);
}
#mobile-button {
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/menu.svg");
background-size: 30px 30px;
float: right;
width: 30px;
height: 30px;
margin-right: 5%;
margin-top: 15px;
cursor: pointer;
display: none;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#mobile-button:hover {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#nav-pop {
float: right;
display: block;
margin-right: 5%;
margin-top: 25px;
transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
opacity: 1;
background: rgba(0,0,0,0.8);
background: #2f2f2f;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 999999;
transition: ease 0.6s;-webkit-transition: ease 0.6s;
transform: translateX(0);-webkit-transform: translateX(0);
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
#nav-list li {
display: inline-block;
margin: 0 17px;
vertical-align: top;
}
#nav-list li:first-child {
margin-left: 0px;
}
#nav-list li:last-child {
margin-right: 0px;
}
#nav-list li a, #serviceClick {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
color: #747678;
letter-spacing: 1px;
vertical-align: top;
transition: all .3s;-webkit-transition: all .3s;
cursor: pointer;
}
#nav-list li a:after, #serviceClick:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #b82222;
height: 2px;
transition: width .3s;
}
#nav-list li a:hover, #serviceClick:hover {
color: #4b4b4b;
transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 100%;
transition: width .3s;
}
#nav-list li a.navInverse {
padding: 10px 12px;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.2rem;
color: #FFF;
border: 1px solid #b82222;
background: linear-gradient(to right bottom, #b82222, #a51e1e);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
#nav-list li a.navInverse:hover {
background: #b82222;
background: #FFF;
color: #b82222;
/*transition: all 0s;-webkit-transition: all 0s;*/
}
#nav-list li a.navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
#nav-pop-close {
display: none;
}
#nav-pop-close, #close-panel {
position: relative;
top: 3%;
left: 90%;
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/icon_close.png");
background-size: 30px 30px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
cursor: pointer;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
top: -40vh;
left: 0;
z-index: -1;
position: fixed;
background-color: rgba(0,0,0,0);
height: 40vh;
transition: all .4s;
padding: 20px 0;
}
#serviceNav.activeSol {
top: 0;
width: 100%;
background-color: rgba(0,0,0,.9);
z-index: 99999;
height: 40vh;
}
.popup-close {
position: absolute;
right: 12px;
top: 12px;
width: 32px;
height: auto;
}
#serviceNavInner {
margin: 0 5%;
height: 100%;
position: relative;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 33%;
height: 100%;
border-right: 1px solid rgba(255,255,255,.5);
position: relative;
}
#serviceNavBlock1Wrap {
width: 80%;
text-align: left;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 66.6%;
height: 100%;
margin: 10px auto;
position: relative;
}
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;transition: all 0.25s;
-webkit-transform: scale(1.1);transform: scale(1.1);
-webkit-backface-visibility: hidden;
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
box-sizing: border-box;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
#mobile-button {
display: block;
}
#nav-pop {
float: none;
opacity: 0;
position: fixed;
margin-top: 0;
width: 75%;
right: -100%;
height: 100vh;
transform: translateX(100%);-webkit-transform: translateX(100%);
}
#nav-pop-close {
display: block;
background-size: 20px 20px;
height: 20px;
width: 20px;
}
#nav-list {
margin-top: 20px;
}
#nav-list li {
display: block;
position: relative;
width: 100%;
margin: 0;
padding: 20px 10%;
background: linear-gradient(to bottom right, #151515, #2f2f2f);
background: #2f2f2f;
text-align: left;
cursor: pointer;
border-bottom: .3px solid #FFF;
}
#quoteButton {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
#nav-list li:hover #quoteButton {
background: #2f2f2f;
}
#nav-list li:hover, #nav-list li:active {
background: #000;
}
#nav-list li:first-child {
margin-left: 0;
}
#nav-list li:last-child {
margin: 20px auto;
text-align: center;
border-bottom: none;
background: #2f2f2f;
padding: 20px 0;
}
#nav-list li a, #serviceClick {
font-family: 'Nunito', sans-serif;
font-size: .8rem;
color: #FFF;
letter-spacing: .3rem;
}
#nav-list li a:after, #serviceClick:after {
display: none;
}
#nav-list li a:hover, #serviceClick:hover {
color: #FFF;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 0%;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
z-index: 1;
position: relative;
background-color: rgba(0,0,0,0);
height: 200px;
transition: all .4s;
padding: 10px 0;
display: none;
top: 0;
}
#serviceNav.activeSol {
background-color: #000;
z-index: 9999999;
height: auto;
min-height: 20%;
top: 0;
border-bottom: .01em solid #FFF;
}
.popup-close {
display: none;
}
#serviceNavInner {
margin: 0 2.5%;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 100%;
height: 50px;
border-right: none;
display: block;
position: relative;
}
#serviceNavBlock1Wrap {
width: 100%;
text-align: center;
}
#navOverviewT, #navOverviewP {
display: none;
}
#solOverviewB {
font-size: .7rem;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 100%;
height: 100%;
margin: 10px auto;
display: block;
}
.servNavItemWrap {
display: inline-block;
width: 25%;
margin-bottom: 15px;
}
.servNavItemWrap img {
width: 30px;
height: 30px;
}
.servNavItemTitle {
margin-top: 5px;
font-size: .5rem;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<div id="nav-logo">
</div>
<div id="mobile-button"><img src="" class="hidden" alt=""></div>
<div id="nav-pop">
<div id="nav-pop-close"></div>
<ul id="nav-list">
<li>ABOUT</li>
<li id="serviceClick">SOLUTIONS</li>
<div id="serviceNav">
<div id="serviceNavInner">
<div id="serviceNavBlock1" class="iblock">
<button class="buttonInv2" id="solOverviewB">Solutions Overview</button>
</div><div id="serviceNavBlock2" class="iblock">
</div>
</div>
</div>
<li>LEARN</li>
<li>CONTACT</li>
<li>REQUEST QUOTE</li>
</ul>
</div>
</nav>

var relative = $(this);
Is picking the serviceClick list item (li) and then you are checking
if (!relative.hasClass('activeSol')) {
but you never added the class to the li, instead you added it to the div #serviceNav.
I think changing
if (!relative.hasClass('activeSol')) {
to
if (!$('#serviceNav').hasClass('activeSol')) {
should work.

Your shouldn't check for $("#serviceClick") for class activeSol, should check on $("#serviceNav") instead.
if (!$('#serviceNav').hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}

relative doesn't have the class 'activeSol' and will never have it, in order to have it toggle the visibility of your menu, you should add and remove classes to it, like this:
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('opened')) { // if it's not opened
relative.addClass('opened'); // open it
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else { // if it's opened
relative.removeClass('opened'); // close it
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});

Trying to set onClick event with jQuery

I have a class called .dropdown-sub and another called .dropdown-toggle . I want when .dropdown-toggle is clicked .dropdown-sub slide down and when clicked again disappear.
This is the css.
/* Mega Menu */
.site-nav > li > a {
padding: 20px;
font-weight: bold;
}
.site-nav > li.mega-menu { position: static; }
.dropdown-sub {
display: none;
position: absolute;
top: 60px;
left: 0;
z-index: 5;
padding: 35px 30px;
margin-bottom: 0;
width: 100%;
min-width: 215px;
}
.wrapper-container .site-nav li.menu-dropdown:focus .dropdown-sub { display: block; text-align: left;}
.wrapper-container .site-nav li.dropdown:focus.mega-menu > a > .icon-dropdown { border-top-color: #fff; opacity: 1; }
.wrapper-container .site-nav li.mega-menu .nav-dropdown { width: auto; left: 0%; right: 0%; border: 0; padding: 40px 45px; }
.wrapper-container .site-nav li.mega-menu .nav-dropdown img{margin-top:37px;}
.nav-dropdown .menu-group ul.menu-dropdown { display: block; position: static; padding: 0; }
.site-nav li.mega-menu > .menu-dropdown:focus > .nav-dropdown,
.site-nav li.mega-menu > .menu-dropdown.open > .nav-dropdown { display: block; }
.cbp-spmenu .nav-dropdown .col-1 { padding:0; }
.cbp-spmenu .nav-dropdown .col-1 .inner { position: relative; }
.cbp-spmenu .nav-dropdown .col-1 .inner > a { margin: 0; padding: 11px 0 13px; font-size: 11px; letter-spacing: 0.02em; border-top: 1px solid #e5e5e5; }
.cbp-spmenu .nav-dropdown .col-1 ul.menu-dropdown { display: none; padding: 0; margin-bottom: 27px; }
.cbp-spmenu .site-nav li.mega-menu li li a { font-size: 12px; padding: 9px 35px; }
.cbp-spmenu .site-nav li.mega-menu li li a:focus span { border-bottom: 1px solid #fff; }
.cbp-spmenu .site-nav li.mega-menu .nav-dropdown li:focus > a:focus,
.cbp-spmenu .site-nav li.mega-menu .nav-dropdown li:focus > a,
.cbp-spmenu .site-nav li.mega-menu .nav-dropdown a:focus { background: none; }
.cbp-spmenu .site-nav li.mega-menu .nav-dropdown > p.toogleClick { top: 0; }
.sub-mega-menu { display: none; }
.addthis_native_toolbox .at-share-tbx-element { display: none; }
.addthis_native_toolbox .at-share-tbx-element:first-child { display: block; }
.site-nav .menu-dropdown .dropdown-sub .menu-title{
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
margin-bottom: 20px;
text-transform: uppercase;}
.site-nav .menu-dropdown .dropdown-sub ul.nav-links li a{
font-weight: bold;
padding: 7px 0;
}
.site-nav > li.focus > a:before, .site-nav > li:focus > a:before{
content: '';
position: absolute;
height: 45px;
width: 2px;
background-color: #fff;
-ms-transform: translate(0%, -50%) rotate(45deg);
-webkit-transform: translate(0%, -50%) rotate(45deg);
left: 50%;
vertical-align: middle;
display: table-cell;
transform: translate(0%, -50%) rotate(45deg);
top: 50%;
}
.site-nav > li.mega-menu.full-width .dropdown-sub{
top: 140px;
width: auto;
left: 0%;
right: 0%;
border: 0;
text-align: left;
padding: 30px 60px;
}
.container{
position: relative;
}
.site-nav > li {float: none; position: relative; display: inline-block; list-style: none; }
.site-nav > li > a {position: relative; text-transform: uppercase; padding: 22px 20px; letter-spacing: 1px; }
.site-nav > li:first-child > a { margin-left: 0; }
.nav-dropdown {background:#fff; text-align: left; display: none; position: absolute; top: 62px; left: 0; width: 215px; z-index: 999; padding: 15px 20px; margin-bottom: 0; border: 1px solid transparent; }
.nav-dropdown li a { padding: 8px 0px 8px 0px; position: relative; }
.site-nav li:focus .dropdown-sub{opacity: 1;top: 58px;display:block;z-index: 99; visibility: visible;}
.site-nav .menu-dropdown li a{font-size:13px;letter-spacing: 0.5px; font-family: Lato;font-weight:400;text-transform: capitalize;}
.dropdown-sub {
background: #fff none repeat scroll 0 0;
left: 0;transition: all 0.3s ease-in-out 0s;
opacity: 0;
position: absolute;
text-align: left;
top: 100px; visibility: hidden;
width: 100%;
min-width: 220px;padding:0 15px;
z-index: -1;
}
.dropdown-menu-inner {
padding: 15px;
}
.menu-title {
color: #000;
font-family: Montserrat;
font-size: 16px;margin-bottom:10px;
font-weight: 600;
text-transform: uppercase;
}
.lable-new::before {
border-color: #333 transparent #fff;
border-style: solid;
border-width: 6px 4px 0 0;
bottom: -6px;
content: "";
left: 6px;
position: absolute;
}
.is-ticky .lable-new{top:-1px}
.lable-new {
background: #333 none repeat scroll 0 0;
border-radius: 1px;
color: #fff;
font-size: 10px;
font-weight: 300;
left: 50%;
padding: 0 5px;
position: absolute;
top: -8px;
z-index: 9;
}
.lable-hot::before {
border-color: #cc0000 transparent #fff;
border-style: solid;
border-width: 6px 4px 0 0;
bottom: -6px;
content: "";
left: 6px;
position: absolute;
}
.is-ticky .lable-hot{top:-1px}
.lable-hot {
background: #cc0000 none repeat scroll 0 0;
border-radius: 1px;
color: #fff;
font-size: 10px;
font-weight: 300;
left: 50%;
padding: 0 5px;
position: absolute;
top: -8px;
z-index: 9;
}
#product-menu .sca-qv-button-wrap{display:none!important}
#product-menu .grid-item{padding:0 7px;}
And this is js:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// build a variable to target the #menu div
var menu = $('.dropdown-sub')
// bind a click function to the menu-trigger
$('.dropdown-toggle').click(function(event){
event.preventDefault();
// if the menu is visible slide it up
if (menu.is(":visible"))
{
menu.slideUp(400);
document.getElementsByClassName('dropdown-sub').style.display = 'none';
}
// otherwise, slide the menu down
else
{
menu.slideDown(400);
document.getElementsByClassName('dropdown-sub').style.display = 'block';
}
});
});
</script>
I get this error on Google Chrome console "Uncaught TypeError: Cannot set property 'display' of undefined"

if (menu.is(":visible"))
{
menu.slideUp(400);
$('.dropdown-sub').css('visibility', 'hidden');
}
// otherwise, slide the menu down
else
{
menu.slideDown(400);
$('.dropdown-sub').css('visibility', 'visible');
}
OR
if(menu.is(":visible")) {
menu.slideUp(400);
$(dropdown-sub).toggleClass('visible invisible');
} else {
menu.slideDown(400);
$(dropdown-sub).toggleClass('visible invisible');
}}
Make sure .dropdown-sub starts off with this: .visible { visibility: visible;} or .invisible { visibility: hidden; }

Couple of things to change on your code.
1) Change the code inside your if else to below.
if (menu.is(":visible"))
{
menu.slideUp(400);
document.getElementsByClassName('dropdown-sub')[0].style.display = 'none';//added [0]
//$('.dropdown-sub').css('display','none');
}
// otherwise, slide the menu down
else
{
menu.slideDown(400);
document.getElementsByClassName('dropdown-sub')[0].style.display = 'block'; //added[0]
//$('.dropdown-sub').css('display','block');
}
Explanation.
The getElementsByClassName() method returns a collection of an
elements's child elements with the specified class name, as a NodeList
object.
The NodeList object represents a collection of nodes. The nodes can be
accessed by index numbers. The index starts at 0.
2)
I think you forgot to make the element display:block and then start the slide down. else the menu.slideDown(400); will slide down a hidden element and hence you may not see the animation. So do this in your else part.
else
{
document.getElementsByClassName('dropdown-sub')[0].style.display = 'block'; //added[0]
//$('.dropdown-sub').css('display','block');
menu.slideDown(400);
}
Note: Since you already are using jquery you dont have to use document.getElementsByClassName this is a javascript syntax. use the $('.dropdown-sub') jquery syntax. I have placed them in the code as well but commented.

Responsive search box issue, need help please

Currently, I use PrestaShop, and I wanted to change the width of search box, but, when I change the width of search box to 650px, on desktop it's ok, but on mobile the search box is very long — not responsive at all. Can you help with this issue please?
#search_block_top {
padding-top: 30px;
width: 650px;
}
#search_block_top #searchbox {
float: left;
width: 100%;
margin-top: -20px;
}
#search_block_top .btn.button-search {
background: #7ab55c;
display: block;
position: absolute;
top: 0;
right: 0;
border: none;
color: #fff;
width: 80px;
height: 40px;
text-align: center;
padding: 10px 0 11px 0;
}
#search_block_top .btn.button-search span {
display: none;
}
#search_block_top .btn.button-search:before {
content: "\f002";
display: block;
font-family: "FontAwesome";
font-size: 17px;
width: 100%;
text-align: center;
}
#search_block_top .btn.button-search:hover {
color: #6f6f6f;
}
#search_block_top #search_query_top {
display: inline;
padding: 13px 60px 13px 13px;
height: 40px;
background: #fbfbfb;
margin-right: 1px;
}
.ac_results {
background: #fff;
border: 1px solid #d6d4d4;
width: 271px;
margin-top: -1px;
}
.ac_results li {
padding: 0 10px;
font-weight: normal;
color: #686666;
font-size: 13px;
line-height: 22px;
}
.ac_results li.ac_odd {
background: #fff;
}
.ac_results li:hover,
.ac_results li.ac_over {
background: #fbfbfb;
}
form#searchbox {
position: relative;
}
form#searchbox label {
color: #333;
}
form#searchbox input#search_query_block {
margin-right: 10px;
max-width: 222px;
margin-bottom: 10px;
display: inline-block;
float: left;
}
form#searchbox .button.button-small {
float: left;
}
form#searchbox .button.button-small i {
margin-right: 0;
}
enter image description here

Try setting max-width
#search_block_top {
padding-top: 30px;
width: 100%;
max-width: 650px;
}

You can maybe use media queries and write something like that:
#search_block_top {
padding-top: 30px;
width: 650px;
#media screen and (max-width: 650px) {
width: 95%;
}
}