[Support request] Sub menu TOGGLED ON at all time / by Default

[liorsade8]

Hi Tom and guys,
need your help please,
i’m working on a site: http://testsite.s178.upress.link
and trying to make a sub menu TOGGLED ON >> display at all time (by Default) when people click on any of the ABOUT sub menu pages:
CONTACT US
JOBS
CLIENTS
AWARDS
TEAM
COMPANY PROFILE

Also, i need this toggled on menu to stay sticky while scrolling…

i have searched and try all of your forum posts about it – even when this sub menu is a secondary menu…
even this topic #1066964 and it didnt work for me
i dont mind it to be… as long as it’s doing the job.
i’ve added in private information login + pass so it will be even easier for u guys.
please help
thanks

[Ying]

Hi there,

Try this css:

body .main-navigation.sub-menu-left ul ul {
    left: auto;
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow: visible;
    position: fixed;
}

Let me know 🙂

[liorsade8]

please take a look on the site… now it’s like double…
or should i remove the code i did before?
thanks

[David]

Hi there,

i am only seeing the one sub menu – did you resolve this ?

[liorsade8]

hi
if u check it now… i eliminate all the code and left only with u’r code u will see it’s like double because of the sticky menu…
please do tell how it can be fixed.

when u check please check a page that is scrollable, like this:
http://testsite.s178.upress.link/company-profile

thanks

THIS IS ALL THE CODE I PUT THERE FROM THE BEGINING…

.site-header {display:none}

@media (min-width: 769px) {
.inside-navigation {
padding-top: 20px;
}}

/* width */
::-webkit-scrollbar {
width: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #000000;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #000000;
}

.sticky-enabled .main-navigation.is_stuck {
box-shadow: 0 2px 2px -2px rgba(0,0,0,0);
}

body {
font-family: ‘proxima-nova’, sans-serif;
}

.menu-toggle {
font-family: ‘proxima-nova’, sans-serif;
}

.mobile-menu {
font-family: ‘proxima-nova’, sans-serif;
}

.main-navigation .mobile-bar-items a {
padding-right: 0px;
}

.main-navigation ul ul {
box-shadow: 0 2px 2px rgb(0 0 0 / 0%) !important;
}

.menu-item-has-children .dropdown-menu-toggle {
display: none;
}

body .main-navigation ul.menu > li > ul {
width: 100%;
}

.mobile-header-navigation .mobile-header-logo img {
padding: 12px 0px 10px 15px;
}

.page-id-28 .main-navigation ul ul {
background-color: #ffffff00;
}

.page-id-28 .elementor-526 .elementor-element.elementor-element-73dd6fea:not(.elementor-motion-effects-element-type-background) {
background-color: #ffffff00 !important;
}

.page-id-28 .elementor-572 .elementor-element.elementor-element-131a829c:not(.elementor-motion-effects-element-type-background){
background-color: #ffffff00 !important;
}

.page-id-28 .dialog-widget-content {
background-color: #ffffff00 !important;
}

body .sf-menu > li {
position: static;
}

body .main-navigation ul.menu > li > ul {
width: 100%;
}

body .main-navigation ul.menu > li > ul > li {
width: auto;
}

body .main-navigation ul.menu > li > ul > li ul {
left: 0;
top: 100%;
}

.main-navigation li {
float: right;
}

@media (min-width: 1200px) and (max-width: 2500px) {
.inside-navigation {
margin-left: 100px;
margin-right: 100px;
}}

@media (min-width: 769px) and (max-width: 1199px) {
.inside-navigation {
margin-left: 50px;
margin-right: 50px;
}}

.main-navigation .main-nav ul ul li a {
padding: 10px 0px 10px 30px;
}

/*!
* Hamburgers
* @description Tasty CSS-animated hamburgers
* @author Jonathan Suh @jonsuh
* @site https://jonsuh.com/hamburgers
* @link https://github.com/jonsuh/hamburgers
*/
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible; }
.hamburger:hover {
opacity: 0.7; }
.hamburger.is-active:hover {
opacity: 0.7; }
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #000; }

@media( min-width: 769px ) {
.hamburger-box {
height: 10px!important;
}}

.hamburger-box {
width: 40px;
height: 20px;
display: inline-block;
position: relative; }

.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 2px;
background-color: #000;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
content: “”;
display: block; }
.hamburger-inner::before {
top: -10px; }
.hamburger-inner::after {
bottom: -10px; }

/*
* Collapse
*/
.hamburger–collapse .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.13s;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger–collapse .hamburger-inner::after {
top: -20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
.hamburger–collapse .hamburger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger–collapse.is-active .hamburger-inner {
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger–collapse.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
.hamburger–collapse.is-active .hamburger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }

.menu-toggle .mobile-menu,
.menu-toggle:before {
display: none;
}

body .hamburger{
transform: scale(.8);
padding: 0;
line-height: 0;
vertical-align: middle;
}

body .hamburger.is-active .hamburger-inner::after,
body .hamburger-inner,
body .hamburger-inner::before,
body .hamburger-inner::after,
body .hamburger.is-active .hamburger-inner,
body .hamburger.is-active .hamburger-inner::before,
body .hamburger.is-active .hamburger-inner::after{
background-color: currentColor;
}

[Ying]

Try the edited CSS here:
https://generatepress.com/forums/topic/sub-menu-toggled-on-at-all-time-by-default/#post-1590000

Let me know 🙂

[Author]

Posts