Shop Categories

X

navigation not working correctly

Home Forums Agama Pro navigation not working correctly

Topic Resolution: Resolved
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #25512
    rk
    Participant

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

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

    #25513
    rk
    Participant

    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;
    }
    __________________________________________________________________________________________________________________

    #25520
    Zex
    Moderator

    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

    #25521
    rk
    Participant

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

    #25522
    Zex
    Moderator

    Can you attach a screenshot of the custom CSS menu?

    #25524
    rk
    Participant

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

    #25526
    Zex
    Moderator

    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

    #25527
    rk
    Participant

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

    #25528
    rk
    Participant

    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.

    #25532
    rk
    Participant

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

    https://we.tl/t-Q8bmoKX8K5

    #25611
    Zex
    Moderator

    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

    #25671
    rk
    Participant

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

    Regards

    #25679
    Zex
    Moderator

    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

    #25680
    rk
    Participant

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

    Regards

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.