navigation not working correctly

[rk]

Hello,
I have a problems to menu PC and mobile hamburger menu:

i maked screens:
https://we.tl/t-f9C1O6O32F

[rk]

My Customizing ▸ General
Additional CSS
__________________________________________________________________________________________________________________
@media only screen and (max-width: 992px){
.header_transparent header.header_v2 .sticky-header:not(.sticky-header-shrink) {
position: relative!important;
}
}
/*Mobile menu on theRight side*/
@media (max-width:992px) {
.sticky-header.sticky-header-shrink {
position: fixed!important;
}
nav.mobile-menu {
position: fixed!important;
width: 100%;
top: 80px!important;
height: 210px;
overflow: auto;
z-index:9999;
}
}
@media (max-width:480px) {
#agama-logo a {
max-width: 80%!important;
text-align: left!important;
}
.logo{
float: left!important;
}
.mobile-menu-icons{
width: 20%!important;
clear: none!important;
text-align: right!important;
}
}
/*sticky footer*/
html, body, #main-wrapper {
height: 100%!important;
}
#colophon{
position:fixed !important;
bottom:0;
width: 100%;
z-index: 99999!important;
}

#content{
margin-bottom:50px!important;
}
__________________________________________________________________________________________________________________

[Zex]

Hi, rk!

2. If you want to increase the visibility of the mobile menu list, you need to increase the height value in the existing code you already have inserted earlier.
https://prnt.sc/rco8wq

Regards

[rk]

first cod:
There are 5 errors which must be fixed before you can save.
Update anyway, even though it might break your site?

[Zex]

Can you attach a screenshot of the custom CSS menu?

[rk]

here is a screenshot:
https://we.tl/t-M5RcLLiGF7

[Zex]

Ok , I see…

Try this code instead:

@media only screen and (max-width: 1400px) {
	.sticky-nav ul.sub-menu:not(.sub-sub-menu) {
    max-height:65vh!important;
    overflow: auto;
	}
    .sticky-nav>li>ul>li>ul, 
    .sticky-nav>ul>li>ul>li>ul{
      position:relative!important;
        left:25px!important;
        width:200px!important;  
   }
}

Regards

[rk]

I tried, it’s not good how the menu works for me.

[rk]

Previously, the submenu fly on the right side, it was good, but the problem was that the submenu didn’t interfere with the screen on small displays.
It is necessary that the submenu fly out on the left side, and then it will fit on small displays.

[rk]

so I drew an example, is it possible to do this:

https://we.tl/t-Q8bmoKX8K5

[Zex]

Hello, rk!

Sorry for the late reply, we are don’t work on the weekend.

In that case, try to use the following codes instead:

@media only screen and (max-width: 1400px) {
    .sub-sub-menu{
      position:absolute!important;
      left:-100%!important;   
    }     
    .sticky-nav>li>ul.sub-menu>li:hover {
    border-right-width: 3px;
    border-right-style: solid;
    border-right-color: #c30202!important;
    border-left-color: transparent!important;
    } 
     .sticky-nav>li>ul>li.menu-item-has-children>a:before {
    font-family: FontAwesome;
    left: -10px;
    position: relative;
    content: "\f104";
    bottom: 0px;  
}
    .sticky-nav>li>ul>li.menu-item-has-children>a::after{
content:""!important;
    }
}

Regards

[rk]

Hello,
the menu is already working fine, but need to do, make the title one line:
https://we.tl/t-vTFlNbbyuA

Regards

[Zex]

Hi, rk!

Try to insert the following code additionally:

.sticky-nav ul.sub-menu, 
.sticky-nav ul.sub-sub-menu{
    width: auto;
    white-space: nowrap;
}

Regards

[rk]

excellent, everything is already working well.
thank you very much !

Regards

[Author]

Posts