Hi,
Site: (http://e98.5d3.myftpupload.com)
I have added the following code to my CSS to keep the sub-menus expanded all the time on mobile devices only.
-
Issue (1) Mobile: this code is working good for mobile devices on the home page but not on any other page i.e. (http://e98.5d3.myftpupload.com/custom-websites)
-
Issue (2) Non Mobile: sub-menus do not show up on any page other then the home page i.e. (http://e98.5d3.myftpupload.com/custom-websites)
CSS Code:
@media (max-width: 979px){
ul.sub-menu {
display:block !important;
visibility:visible !important;
}
}
@media (max-width: 979px){
ul.sub-menu.mobile-collapsed {
display:none !important;
visibility:visible !important;
}
}
.x-navbar .desktop .x-nav li > a > span::after {
content: “”!important;
}
.x-sub-toggle > span {
font-size: 0px!important;
}
.x-navbar .desktop .x-nav > li ul {
top: 76px!important;
}
.desktop .sub-menu {
border-top-left-radius: 0px!important;
border-top-right-radius: 0px!important;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
font-size: 14px!important;
font-weight: 400!important;
}
.x-navbar .mobile .x-nav li > a {
font-size: 14px;
line-height: 1.0!important;
white-space: normal;
}
Just to be clear - my goal is to have the sub-menus expanded all the time on mobile devices only & for them to function as normal on all non-mobile devices across all pages.
Please advises…
Thank you,
Keith Lucas
keith@lucasdesignstudios.com
