Home Forums Art WordPress Theme Expanded panel

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #22574
    richardcech
    Participant
    Purchased
    Supported

    Hello, i have three questions about expanded panel menu for mobile device.

    1. It is possible to shorten expanded panel from hamburger menu on mobile like on your page – https://seatheme.net/ or on page http://www.emiliotunon.com/en/

    2. When i open expanded menu panel on mobile the content of page behind expanded panel strangely move up a and after that menu expand,… it looks weird, it is some kind of bug ?

    3. It is possible replace symbol of hamburger menu on mobile for custom symbol ? And it is possible make larger touch field for this menu (click on it is hard) ?

    My web page is richardcech.com

    Thank you very much
    Best Regards

    Richard Cech

    #22575
    SeaTheme
    Keymaster
    Purchased

    Hi,

    1, The CSS will be shorted it:

    @media (max-width: 767px){
    .responsive-ux .menu-panel-inn,.responsive-ux.admin-bar .menu-panel-inn {
        height: 50vh;
        min-height: 0;
     }
    }

    But the thing is that the content area will be faded out, the effect is not obvious.

    2, I checked your website, the content doesn’t move up, it is faded out.

    3.1, There is not the option to change the SVG.
    3.2, It is possible by custom CSS(“Appearance > Customize: Additional CSS”), like:

    .navi-trigger-out { 
        padding: 20px 0 20px 20px;
    }

    Regards!

    SeaTheme – SeaTheme.netTwitterFacebook

    #22579
    richardcech
    Participant
    Purchased
    Supported

    Hello, Thank you, I tried your custom css.

    1) I think it works, but it had no effect, Is is possible to turn of – faded out effect ?
    2) Yes thanks, try to look
    3) It works i think well 🙂

    #22580
    SeaTheme
    Keymaster
    Purchased

    Hi, welcome!

    1)
    Please update the custom CSS:

    .show_mobile_menu:not(.navi-show-icon) .menu-panel { 
        position: absolute;
    }
    @media (max-width: 767px){
     .responsive-ux .menu-panel-inn,.responsive-ux.admin-bar .menu-panel-inn { height: 200px; min-height: 0; }
     .responsive-ux.show_mobile_menu #wrap  { position: relative; }
    }
    @keyframes Opacity1to0 {
    	0% {
    		opacity: 1;
    		position: relative;
    	}
    	99% {
    		opacity: 1;
    		position: relative;
    	}
    	100% {
    		opacity: 1;
    		position: relative;
    	}
    }
    @keyframes Opacity0to1 {
     
    	0% {
    		opacity: 1;
    	}
    
    	100% {
    		opacity: 1;
    	}
    }
    @keyframes transY_100to0 {
     
    	0% {
    		transform: translate3d(0, -100%, 0);
    		position: absolute;
    	}
    
    	100% {
    		transform: translate3d(0, 80px, 0);
    		position: absolute;
    	}
    }

    ps: It will affect the header icon, but you don’t activate the header icon. It should be ok.

    Best

    • This reply was modified 1 week, 4 days ago by SeaTheme.
    #22587
    richardcech
    Participant
    Purchased
    Supported

    Hello,
    it is absolutely perfect !!

    I noticed that when I scroll down and click on Hamburger menu I don’t see menu, then I must scroll up to see things from menu, do you have any idea how to fix it ?

    Please try that on my web page when you scroll down and open hamburger meno on mobile device for example on thist page: http://richardcech.com/projects/

    Thank you
    Best Regards

    Richard Cech

    #22588
    SeaTheme
    Keymaster
    Purchased

    Hi, welcome!

    The animation doesn’t work with it.
    1) Please update the custom CSS:

    .show_mobile_menu:not(.navi-show-icon) .menu-panel {
    position: fixed;
    animation: none; 
    top: 80px;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all 0s;
    transition: all 0s;
    }
    @media (max-width: 767px){
     .responsive-ux .menu-panel-inn,.responsive-ux.admin-bar .menu-panel-inn { height: 200px; min-height: 0; }
     .responsive-ux.show_mobile_menu #wrap  { position: relative; }
    }
    @keyframes Opacity1to0 {
    	0% {
    		opacity: 1;
    		position: relative;
    	}
    	99% {
    		opacity: 1;
    		position: relative;
    	}
    	100% {
    		opacity: 1;
    		position: relative;
    	}
    }
    @keyframes Opacity0to1 {
     
    	0% {
    		opacity: 1;
    	}
    
    	100% {
    		opacity: 1;
    	}
    }
    @keyframes transY_100to0 {
     
    	0% {
    		transform: translate3d(0, -100%, 0);
    		position: absolute;
    	}
    
    	100% {
    		transform: translate3d(0, 80px, 0);
    		position: absolute;
    	}
    }

    Best

    #22594
    richardcech
    Participant
    Purchased
    Supported

    Hello,
    it works very nice :), but when I am turning of hamburger menu it probably make animation of text return. It looks weird on white background, I think maybe turn off animation of returning text in menu ? Or do you have any other nice solution ?

    Thank you
    Best Regards
    Richard Cech

    #22611
    SeaTheme
    Keymaster
    Purchased

    Please try to add the custom CSS:

     .menu-panel  {
        -webkit-transition: all 0s;
        transition: all 0s;
    }

    Best

    #22631
    richardcech
    Participant
    Purchased
    Supported

    Thank you very much, It is awesome.
    Best Regards
    Richard Cech

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

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!